Learning Note: ASP. NET MVC Update Partial view implementation

ASP. NET MVC Update partial view implementation

Imagine that we have an article on how to only refresh the comment section when submitting a comment

Method One, the use of Ajax through the JS code implementation.

Method two, implemented using Ajax.beginform () + partial view.

Through the method of JS code is more common, here is mainly to explore through ajax.beginform () + partial view of the way to achieve. This also improves the reuse of the view. Similarly, there are multiple references to component or page part content updates, etc., which can also be implemented using this method.

STEP1, create the action that generates the form, with the following code:

        [Childactiononly ()]        public  partialviewresult _commentform (Int32 SessionID)        {                         New Comment () {SessionID = SessionID};             // Suppose the ID of the article to be            commented on here, // Pass the comment article ID to the view and save it with a hidden field so that it can be taken out            when the comment is submitted return Partialview ("_commentform", comment);        }

action to respond to request form

　　Note that the method returns the type Partialviewresult, and finally returns the return Partialviewinstead of the normal view.

Step2, the method that requests the comment list, the code is as follows:

         Public partialviewresult _getforsession (Int32 SessionID)        {                     // assume the ID            of the article to be reviewed here Viewbag.sessionid = SessionID;             // Comment List data            List<comment> comments = Context.Comments.Where (c = c.sessionid.equals (SessionID)). ToList ();             return Partialview ("_getforsession", comments);        }

How to request a comment list

STEP3, handling Post requests for "commenting"

        [Validateantiforgerytoken ()]        public  partialviewresult _submit (Comment Comment)        {            context.Comments.Add (comment);            Context. SaveChanges ();             = comment. SessionID;            List<Comment> comments = Context.Comments.Where (c = c.sessionid.equals (Comment). SessionID)). ToList ();             return Partialview ("_getforsession", comments);        }

Post a comment

STEP4, adding partial views

//code in _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>//code in the _getforsession.cshtml@model IEnumerable<mvcapplication1.models.comment><div id="Comments"> <ul>@foreach (varCommentinchModel) {            <li> @comment. Content</li>        }    </ul> <!----------------------------- Section update key Codes------------------------------------------------------------>@using (Ajax.beginform ("_submit","Comment",NewAjaxoptions () {Updatetargetid ="Comments"}) {@Html. AntiForgeryToken (); @Html. Action ("_commentform",New{SessionId =Viewbag.sessionid}); }</div>

View Code

Note that@using (Ajax.beginform ("_submit", "Comment", new Ajaxoptions () {Updatetargetid = "comments"})) Updatetargetid refers to the element ID in the page to be refreshed, which is critical here.

Of course, to use Ajax.beginform, be sure not to forget to add references to both the jquery and Jquery.unobtrusive-ajax packages.

Here you can refer to @Scripts. Render ("~/bundles/jquery");@Scripts. Render ("~/bundles/jqueryval");

Do not understand the two code meaning of the students can open App_start/bundleconfig.cs in a glance to know.

Bundles. ADD (NewScriptbundle ("~/bundles/jquery"). Include ("~/scripts/jquery-{version}.js")); Bundles. ADD (NewScriptbundle ("~/bundles/jqueryui"). Include ("~/scripts/jquery-ui-{version}.js")); Bundles. ADD (NewScriptbundle ("~/bundles/jqueryval"). Include ("~/scripts/jquery.unobtrusive*",                        "~/scripts/jquery.validate*"));

View Code

These three packages are added by default in vs2013. It is probably the role of the server will be more than one JS file packaging, page loading will only be requested once, instead of each of the previous JS file request once, help page loading speed.

At this point, the partial view refresh feature is initially implemented.

Learning Note: ASP. NET MVC Update Partial view implementation