学习笔记: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文件单独请求一次,有助于页面加载速度。
至此,部分视图刷新功能初步实现。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。