学习笔记：Asp.Net MVC更新部分页面

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文件单独请求一次，有助于页面加载速度。

　　至此，部分视图刷新功能初步实现。