2011-09-03 156 views
57

我很与此部分观点混淆...我怎样才能加载视图

我想加载我的主视图内的局部视图...

这里是简单〔实施例中局部视图...

我加载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呈现第一和展示我的新行动链接“加载部分视图”...当我点击它时,它会转到新的页面,将_LoadView.cshtml中的欢迎消息呈现到index.cshtml中。

什么可能是错的?

注:我不想通过AJAX加载页面或不想如果你想直接加载,你可以使用Html.Action帮手主视图内的局部视图使用Ajax.ActionLink

回答

121

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

,或者如果你不想去通过荷载作用使用HtmlPartial赫普勒:

@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.*助手。并确保不显眼的JavaScript在您的web.config中启用(它应该是默认的):

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

正常工作......因此,这意味着,如果我想和@ Html.ActionLink其goona行为使用它作为一个正常请求并在新页面中打开全局视图? ... –

+1

@ patel.milanb,正好。 Html.ActionLink在html中呈现一个普通的锚,它只是对给定的url执行GET请求,并将浏览器重定向到它。由于您已将其指向仅返回部分的Load操作,因此浏览器会重定向并显示此部分。 –

+0

thx ....有你的观点....非常有帮助...很快发布另一个查询... –

5

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

+0

上述解决方案正常工作...所以这意味着如果我想用@ Html.ActionLink它的goona行为作为一个正常的请求,并打开新页面中的parial视图?只是想清除我的头脑与局部视图... –

15

我有完全一样的问题,因为Leniel。我尝试修复这里和其他十几个地方。终于为我工作的事情是简单地增加

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

到我的布局......

+2

+1为什么没有人upvoted你打我..没有两个进口,它不工作.. – Chookoos

+0

我也花了几个小时来击败这个问题。在我的默认mvc4模板“基本mvc应用程序”我有@ Scripts.Render(“〜/ bundles/jquery”),但不是@ Scripts.Render(“〜/ bundles/jqueryval”)。所以我只是添加第二个和部分视图开始呈现在同一个页面而不是新的。谢谢。 – user808128

+0

即使我没有工作,直到我导入这两个进口。 – Niraj

4

对我来说,这个工作我下载后通过的NuGet AJAX不显眼的库:不是添加在

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> 

Next the Ajax ActionLink的DIV是我们要呈现结果:

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

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

我在YouTube上遵循了一个教程来实现这一点,并且我没有安装'Microsoft.jQuery.Unobtrusive.Ajax'。尽管我已经安装了jquery.unobstrusive-ajax.min.js。谢谢你为我节省了很多头痛。 – Dev

1

小tweek上述

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

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

RenderParital最好使用性能。

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

一件事是AWARE - 我跌倒的这个犯规......

jquery.validate.unobtrusive.js 
jquery.validate.unobtrusive.min.js 

是不一样的AS ...

jquery.unobtrusive-ajax.js 
jquery.unobtrusive-ajax.min.js 

我读 “不显眼”并假定我有正确的库 - AJAX的是必需的!

0

如果要填充你的视图中的局部视图的内容,你可以使用

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