學習筆記：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);
        }

　　注意方法返回類型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文件單獨請求一次，有助於頁面加載速度。

　　至此，部分視圖刷新功能初步實現。