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

或者如果您不想通过“加载”操作，请使用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方法响应的新页面。
如果你想立即加载它，那么你使用@Html.RenderPartial("_LoadView")或@Html.RenderAction("Load")。
如果你想在用户交互（即点击链接）上这样做，那么你需要使用AJAX - ＆gt; @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

上面的小推文

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

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

Answer 6

RenderParital最适合用于提高性能。

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

Answer 7

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

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

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

7 个答案: