MVC Ajax Helper或Jquery异步加载部分视图
废话不多说了，直接给大家贴代码了。
Model:
namespaceMvcApplication1.Models
{
publicclassTeam
{
publicstringPreletter{get;set;}
publicstringName{get;set;}
}
}
通过jQuery异步加载部分视图
Home/Index.cshtml视图中：
@{
ViewBag.Title="Index";
Layout="~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
<ahref="#"id="a">通过jQuery异步</a><br/>
</div>
<divid="result">
</div>
@sectionscripts
{
<scripttype="text/javascript">
$(function(){
$('#a').click(function(){
$.ajax({
url:'@Url.Action("Index","Home")',
data:{pre:'B'},
type:'POST',
success:function(data){
$('#result').empty().append(data);
}
});
returnfalse;
});
});
</script>
}
HomeController控制器中：
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web.Mvc;
usingMvcApplication1.Models;
namespaceMvcApplication1.Controllers
{
publicclassHomeController:Controller
{
publicActionResultIndex()
{
returnView();
}
[HttpPost]
publicActionResultIndex(stringpre)
{
varresult=GetAllTeams().Where(t=>t.Preletter==pre).ToList();
ViewBag.msg="通过jQuery异步方式到达这里~~";
returnPartialView("TeamY",result);
}
privateList<Team>GetAllTeams()
{
returnnewList<Team>()
{
newTeam(){Name="巴西队",Preletter="B"},
newTeam(){Name="克罗地亚队",Preletter="K"},
newTeam(){Name="巴拉圭",Preletter="B"},
newTeam(){Name="韩国",Preletter="K"}
};
}
}
}
部分视图TeamY.cshtml：
@modelIEnumerable<MvcApplication1.Models.Team>
@{
varresult=string.Empty;
foreach(variteminModel)
{
result+=item.Name+",";
}
}
@ViewBag.msg.ToString()
<br/>
@result.Substring(0,result.Length-1)
通过MVCAjaxHelper异步加载部分视图
Home/Index.cshtml视图中需要引用jquery.unobtrusive-ajax.js文件，从控制器返回的强类型部分视图内容呈现到UpdateTargetId指定的div中。
@{
ViewBag.Title="Index";
Layout="~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div>
@Ajax.ActionLink("通过MVCAjaxHelper","Load","Home",new{pre="K"},newAjaxOptions(){UpdateTargetId="result1"})
</div>
<divid="result1">
</div>
HomeController控制器中：
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web.Mvc;
usingMvcApplication1.Models;
namespaceMvcApplication1.Controllers
{
publicclassHomeController:Controller
{
publicActionResultIndex()
{
returnView();
}
publicActionResultLoad(stringpre)
{
varresult=GetAllTeams().Where(t=>t.Preletter==pre).ToList();
ViewBag.msg="通过MVCAjaxHelper到达这里~~";
returnPartialView("TeamY",result);
}
privateList<Team>GetAllTeams()
{
returnnewList<Team>()
{
newTeam(){Name="巴西队",Preletter="B"},
newTeam(){Name="克罗地亚队",Preletter="K"},
newTeam(){Name="巴拉圭",Preletter="B"},
newTeam(){Name="韩国",Preletter="K"}
};
}
}
}
部分视图和上一种方式一样。
页面刷新的方式加载部分视图方法包括：
Html.RenderPartial()
Html.RenderAction()
下面给大家介绍MVC中实现部分内容异步加载
action中定义一个得到结果集的方法
publicActionResultGetItemTree(stringtitle,intitemid,int?page)
{
pp=newPagingParam(page??1,VConfig.WebConstConfig.PageSize);
Common.Page.PagedList<Entity.Res_Item_Resource_R>res_Item_Resource_R=iResourceService.GetRes_Item_Resource_RByItemId(itemid,pp);
ViewData["res_Item_Resource_R"]=res_Item_Resource_R;
res_Item_Resource_R.AddParameters=newSystem.Collections.Specialized.NameValueCollection();
res_Item_Resource_R.AddParameters.Add("title",title);
res_Item_Resource_R.AddParameters.Add("itemid",itemid.ToString());
ViewResultvr=newViewResult
{
ViewData=ViewData,
MasterName="",
};
returnvr;
}
在主页面使用下面jquery代码异步调用上面的action
$(function(){
varid='<%=itemid%>';
$.ajax({
type:"POST",
url:"/Student/GetItemTree",
data:{title:'<%=Model.Name%>',itemid:id,page:1},
beforeSend:function(data){//取回数据前
$("#itemTree").html('<spanstyle="padding:5">数据加载中...</span>');
},
error:function(data){//发生错误时
//debugger;
},
success:function(data){//成功返回时
$("#itemTree").html(data);
}
});
最后在分部视图GetItemTree.ascx中写上你要返回的数据结构即可
注意一点就是，如果涉及到分页，要用AJAX分页方式
<divstyle="float:left"> <%=Html.AjaxPager(resItemResourceBefore,"itemTree","GetItemTree","Student")%> </div>