如何在视图中加载局部视图

Question

这部分观点让我很困惑......

我想在主视图中加载局部视图...

这是简单的例子......

我正在加载Homecontroller Index操作的Index.cshtml作为主页面.

在index.cshtml我正在创建一个链接

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

在HomeController中我添加了一个名为的新Action

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

在_LoadView.cshmtl我只是有一个

<div>
    Welcome !!
</div>

但是,当运行项目时,index.cshtml首先渲染并向我显示链接"加载部分视图"...当我点击它时,它转到新页面instade,将欢迎消息从_LoadView.cshtml呈现到index.cshtml .

有什么不对？

注意:我不想通过AJAX加载页面或者不想使用Ajax.ActionLink

Answer 1

如果要直接在主视图中加载局部视图,可以使用Html.Action帮助器:

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

或者如果您不想通过Load操作,请使用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中启用了不显眼的javascript(默认情况下应该是这样):

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

Answer 2

我有与莱尼尔完全相同的问题.我在这里和其他十几个地方尝试过修复.最终对我有用的事情就是添加

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

我的布局......

Answer 3

如果您使用@Html.ActionLink()然后加载,则在单击锚元素时将PartialView作为正常请求处理,即加载具有PartialViewResult方法响应的新页面.
如果你想加载itmedialty,那么你使用@Html.RenderPartial("_LoadView")或@Html.RenderAction("Load").
如果你想在用户交互(即点击链接)上进行,那么你需要使用AJAX - >@Ajax.ActionLink()

Answer 4

对我来说,这是通过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 ActionLink和div:

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

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

Answer 5

如果您想在视图中填充部分视图的内容，您可以使用

@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" }
)