Asp.Net MVC 更新部分页面
设想我们有一篇文章下面的提交评论时如何只刷新评论内容部分，
方法一，利用ajax通过js代码实现。
方法二，利用Ajax.BeginForm()+部分视图实现。
通过js代码的方法比较常见，这里主要是探讨通过Ajax.BeginForm()+部分视图的方式实现。这样还可提高该视图的重用性。同理，有多处引用的零部件或页面部分内容更新等，也可以利用此方法实现。
Step1,创建生成Form的Action，代码如下：
[ChildActionOnly()]
public PartialViewResult _CommentForm(Int32 SessionID)
{
Comment comment = new Comment() { SessionID = SessionID };
//假定这里待评论文章的ID ，
//将评论文章ID传至视图，用隐藏字段保存起来，以便提交评论时取出来
return PartialView("_CommentForm", comment);
}
响应请求Form的Action
注意方法返回类型PartialViewResult，最后返回的是return PartialView，而不是普通的View。
Step2,请求评论列表的方法，代码如下：
public PartialViewResult _GetForSession(Int32 SessionID)
{
//假定这里待评论文章的ID
ViewBag.SessionID = SessionID;
//评论列表数据
List<Comment> comments = context.Comments.Where(c => c.SessionID.Equals(SessionID)).ToList();
return PartialView("_GetForSession", comments);
}
请求评论列表的方法
Step3,处理“发表评论”的POST请求
[ValidateAntiForgeryToken()]
public PartialViewResult _Submit(Comment comment)
{
context.Comments.Add(comment);
context.SaveChanges();
ViewBag.SessionID = comment.SessionID;
List<Comment> comments = context.Comments.Where(c => c.SessionID.Equals(comment.SessionID)).ToList();
return PartialView("_GetForSession", comments);
}
发表评论
Step4,添加部分视图
//_CommentForm.cshtml中代码 @model MvcApplication1.Models.Comment @Html.HiddenFor(m=>m.SessionID)
<div>
@Html.LabelFor(m=>m.Content)
@Html.EditorFor(m=>m.Content) </div>
<button type="submit">Submit Commment</button> //_GetForSession.cshtml中的代码 @model IEnumerable<MvcApplication1.Models.Comment>
<div id="comments">
<ul>
@foreach (var comment in Model)
{
<li>@comment.Content</li>
}
</ul>
<!-----------------------------部分更新关键代码------------------------------------------------------------>
@using (Ajax.BeginForm("_Submit", "Comment", new AjaxOptions() { UpdateTargetId = "comments" }))
{
@Html.AntiForgeryToken();
@Html.Action("_CommentForm", new { SessionId = ViewBag.SessionID }); }
</div>
注意，@using (Ajax.BeginForm("_Submit", "Comment", new AjaxOptions() { UpdateTargetId = "comments" }))中UpdateTargetId即是指要刷新的页面中的元素Id，这里非常关键。
当然啦，要想使用Ajax.BeginForm，一定不要忘记添加对JQuery和jquery.unobtrusive-ajax这两个包的引用。
这里可以这样引用@Scripts.Render("~/bundles/jquery")；@Scripts.Render("~/bundles/jqueryval");
不明白这两句代码意思的同学可打开App_Start/BundleConfig.cs中一看便知。
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
这三个包是vs2013中默认添加的。其作用大概就是在服务器将多个js文件打包，页面加载的时候只会请求一次，而不是之前的每一个js文件单独请求一次，有助于页面加载速度。
至此，部分视图刷新功能初步实现。