ProgramingTip

뷰 내에서 부분 뷰를로드하는 방법

bestdevel 2020. 10. 31. 09:58
반응형

뷰 내에서 부분 뷰를로드하는 방법


나는이 부분적인 견해와 매우 혼동 스럽습니다 ...

메인 뷰 안에 부분 뷰를로드하고 싶습니다 ...

여기에 간단한 예제가 있습니다 ...

Homecontroller Index 작업의 Index.cshtml을 기본 페이지로로드하고 있습니다.

index.cshtml에서 다음을 통해 링크를 만들 수 있습니다.

@Html.ActionLink("load partial view","Load","Home")

HomeController에서 나는 새로운 액션을 추가하고 있습니다.

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

_LoadView.cshmtl에서 나는 단지

<div>
    Welcome !!
</div>

하지만 프로젝트를 실행하면 index.cshtml이 순서대로 실행되고 "Load Partial View"링크가 표시됩니다. 클릭하면 _LoadView.cshtml에서 index.cshtml로 환영 메시지를 전달합니다. .

어떤 잘못 될 수 있습니까?

참고 : AJAX를 통해 페이지를로드하고 싶지 않습니다. Ajax.ActionLink를 사용하고 싶지 않습니다.


기본보기 내에서 부분보기를 직접로드 비용 Html.Action도우미를 사용할 수 있습니다 .

@Html.Action("Load", "Home")

또는로드 작업을 수행하지면 HtmlPartial hepler를 사용합니다.

@Html.Partial("_LoadView")

을 사용하려는 다음으로 Ajax.ActionLink바꾸십시오 Html.ActionLink.

@Ajax.ActionLink(
    "load partial view", 
    "Load", 
    "Home", 
    new AjaxOptions { UpdateTargetId = "result" }
)

물론 부분이 표시 될 페이지에 포함되어야합니다.

<div id="result"></div>

또한 다음을 포함하는 것을 잊지 않습니다.

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

Ajax.*도우미 를 활성화하기 위해 기본보기에서 . 그리고 web.config에서 눈에 잘지 않는 자바 펼쳐가 활성화되어 있는지 확인하십시오.

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

나는 레니 엘과 똑같은 문제가 있었다. 나는 여기와 다른 12 곳에서 제안 된 수정을 시도했다. 마침내 나를 위해 일한 내용

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

내 레이아웃에 ...


을 사용 @Html.ActionLink()하여 수행하면 앵커 요소를 클릭 할 때 PartialView로드가 일반 요청으로 처리됩니다. 즉, PartialViewResult 메서드의 응답으로 새 페이지를로드합니다.
즉시로드 @Html.RenderPartial("_LoadView")또는 을 사용 @Html.RenderAction("Load")합니다.
사용자 상호 작용 (예 : 링크 클릭) 시이를 수행해야 AJAX를 수행합니다->@Ajax.ActionLink()


나를 위해 NuGet을 통해 AJAX Unobtrusive 라이브러리를 다운로드 한 후 작동했습니다.

 Search and install via NuGet Packages:   Microsoft.jQuery.Unobtrusive.Ajax

보기에 jquery 및 AJAX Unobtrusive에 대한 참조를 추가하는 것보다 :

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

다음으로 Ajax ActionLinkdiv 는 수행했습니다.

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

위의 작은 tweek

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

<div id="toUpdate"></div>

RenderParital은 성능을 위해 사용하는 것이 좋습니다.

{@Html.RenderPartial("_LoadView");}

뷰 내부에 부분 뷰의 내용을 채우려면 다음을 사용할 수 있습니다.

@Html.Partial("PartialViewName")

또는

{@Html.RenderPartial("PartialViewName");}

서버 요청을하고 데이터를 처리 한 다음 해당 데이터로 채워진 메인 뷰로 부분 뷰를 반환하려면 사용할 수 있습니다.

...
    @Html.Action("Load", "Home")
...

public PartialViewResult Load()
{
    return PartialView("_LoadView");
}

사용자가 링크를 클릭 한 다음 부분보기의 데이터를 채우려면 다음을 사용할 수 있습니다.

@Ajax.ActionLink(
    "Click Here to Load the Partial View", 
    "ActionName", 
    "ControlerName",
    null, 
    new AjaxOptions { UpdateTargetId = "toUpdate" }
)

참고 URL : https://stackoverflow.com/questions/7295835/how-can-i-load-partial-view-inside-the-view

반응형