学习笔记: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>
View Code

  注意,@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*"));
View Code

  这三个包是vs2013中默认添加的。其作用大概就是在服务器将多个js文件打包,页面加载的时候只会请求一次,而不是之前的每一个js文件单独请求一次,有助于页面加载速度。

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。