Learning notes: Asp. Net MVC updates page, asp. netmvc

Learning notes: Asp. Net MVC updates page, asp. netmvc

Asp. Net MVC Update page

Imagine how to refresh the comment content only when submitting a comment in the following article,

Method 1: ajax is implemented through js Code.

Method 2: Use Ajax. BeginForm () + partial views.

JavaScript code is a common method. Here we mainly discuss how to implement it through Ajax. BeginForm () + partial views. This also improves the reusability of the view. You can also use this method to update multiple referenced parts or part of the page.

Step 1: Create the Action for generating the Form. The Code is as follows:

[ChildActionOnly ()] public PartialViewResult _ CommentForm (Int32 SessionID) {Comment comment = new Comment () {SessionID = SessionID}; // assume the ID of the article to be commented on here, // upload the comment Article ID to the view and save it with a hidden field so that return PartialView ("_ CommentForm", comment) can be obtained when submitting the comment );}Response to the Form Action

Note that the method returns the PartialViewResult type, and returns the return PartialView instead of the normal View.

Step 2: Request the comment list using the following code:

Public PartialViewResult _ GetForSession (Int32 SessionID) {// assume the ID of the article to be commented on here ViewBag. sessionID = SessionID; // List of comments <Comment> comments = context. comments. where (c => c. sessionID. equals (SessionID )). toList (); return PartialView ("_ GetForSession", comments );}Method for requesting a comment list

Step 3: Process POST requests for "POST comments"

[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 );}Post comments

Step 4: add some views

// _ CommentForm. code in 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. code in cshtml @ model IEnumerable <MvcApplication1.Models. comment> <div id = "comments"> <ul> @ foreach (var comment in Model) {<li> @ comment. content </li >}</ul> <! ----------------------------- Partially update key code ------------------------------------------------------------> @ using (Ajax. beginForm ("_ Submit", "Comment", new AjaxOptions () {UpdateTargetId = "comments"}) {@ Html. antiForgeryToken (); @ Html. action ("_ CommentForm", new {SessionId = ViewBag. sessionID}) ;}</div>View Code

Note: @ using (Ajax. in BeginForm ("_ Submit", "Comment", new AjaxOptions () {UpdateTargetId = "comments"}), UpdateTargetId refers to the element Id on the page to be refreshed. This is critical.

Of course, to use Ajax. BeginForm, do not forget to add references to JQuery and jquery. unobtrusive-ajax.

Here we can reference @ Scripts. Render ("~ /Bundles/jquery ");@ Scripts. Render ("~ /Bundles/jqueryval ");

If you do not understand the meaning of the two codes, you can open App_Start/BundleConfig. cs and read it at a glance.

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

These three packages are added by default in vs2013. The function is probably to Package Multiple js files on the server, and the page will only be requested once when loading, instead of each previous js file separately, which helps the page loading speed.

At this point, some view refresh functions are initially implemented.