如何在视图中加载部分视图？

我对这种片面的看法感到非常困惑。

我想在主视图中加载部分视图。

下面是一个简单的例子。

我正在将 HomController 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 Part View”。当我单击它时，它会转到新页面，而不是将 _ LoadView.cshtml 中的欢迎消息呈现到 index.cshtml 中。

能有什么问题呢？

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

245278 次浏览
小开
最佳答案

如果你想直接在主视图中加载部分视图，你可以使用 Html.Action助手:

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

或者如果不想执行 Load 操作，请使用 HtmlPartialAsync 助手:

@await Html.PartialAsync("_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 中启用了 Unobtrusive JavaScript (默认情况下应该是这样) :

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

如果使用 @Html.ActionLink()，那么在单击锚元素时，加载 PartialView 将作为正常请求处理，即使用 PartialViewResult 方法的响应加载新页面。< br/> 如果您想立即加载它，那么可以使用 @Html.RenderPartial("_LoadView")或 @Html.RenderAction("Load")。< br/> 如果你想在用户交互时做这件事(比如点击一个链接) ，那么你需要使用 AJAX —— > @Ajax.ActionLink()

小开

我和 Leniel 的问题一模一样。我试过这里和其他地方的建议。最后对我有效的方法就是简单地加上

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

我的布局。

小开

对我来说，在我通过 NuGet 下载了 AJAX 非侵略性库之后，这个方法起作用了:

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

然后在视图中添加对 jquery 和 AJAX 的引用:

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

接下来，我们要渲染 Ajax 行动连结和 Div的结果:

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


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

小周以上

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

提交答案