MVC uses jquery for Ajax

In the previous introduction to the AJAX implementation approach in MVC, it was mentioned that, in addition to using the Ajax HTML helper approach, jquery was another way to implement Ajax.

Implementing AJAX requests with the Get method

View

<script type= "Text/javascript" >    function GetTime () {        $.get ("Home/gettime", function (response) {            $ ("#myPnl"). HTML (response);        });        return false;    } </script><div id= "MYPNL" style= "width:300px; height:30px; border:1px dotted silver; " ></div><a href= "#" onclick= "return GetTime ();" >click me</a>

Controller

Public ActionResult GetTime () {    return Content (DateTime.Now.ToString ());}

Implementing AJAX submission of form by post method

View

@model mvcajax.models.usermodel@{viewbag.title = "Ajaxform";} <script type= "Text/javascript" > $ (document). Ready (function () {$ ("form[action$= ' Saveuser ']"). Submit (Funct Ion () {$.post ($ (this). attr ("Action"), $ (this). Serialize (), function (response) {$ ("#myPnl"). h            TML (response);            });        return false;    });    }); </script><div id= "MYPNL" style= "width:300px; height:30px; border:1px dotted silver; "                ></div> @using (Html.BeginForm ("Saveuser", "Home")) {<table> <tr> <td> @Html. labelfor (M = m.username) </td> <td> @Html. textboxfor (M = m.username) </td> </tr> <tr> <td> @Htm            L.labelfor (M = m.email) </td> <td> @Html. textboxfor (M = m.email) </td> &Lt;/tr> <tr> <td> @Html. labelfor (M = m.desc) </td> <td> @Html. textboxfor (M = m.desc) </td> </tr> <t         R> <td colspan= "2" > <input type= "Submit" value= "Submit"/> </td>  </tr> </table>}

Model

Using System.componentmodel.dataannotations;namespace mvcajax.models{public    class Usermodel    {        [ Display (Name = "Username")] public        string Username {get; set;}        [Display (Name = "Email")]        public string Email {get; set;}        [Display (Name = "Description")]        public string Desc {get; set;}}    }

Controller

[Httppost]public actionresult Saveuser (Usermodel usermodel) {    //save User Code here    //...    Return Content ("Save complete!");}   

The above code implements the jquery post submission data method.

By looking at the AJAX implementations of the two jquery methods above, you can see that the controller is the same in comparison with the previous Ajax HTML Helper.

The main implementation of the data submission using jquery is to send the request to the MVC controller via jquery's Get or POST method, then process the obtained response and update to the page.

Note the point:

Whether you submit a request using a hyperlink or form, the JavaScript method always has a return value of false, which is used to prevent the hyperlink from jumping or the actual submission of the form.

This place will come up with a question:

If the JavaScript script is blocked for this page, then the page is either a jump or a form is a commit, and the returned ActionResult processing will be problematic.

At this point, you need to determine in the controller whether the request is an AJAX request, and return different actionresult depending on the situation:

[Httppost]public actionresult Saveuser (Usermodel usermodel) {    //save User Code here    //...    if (Request.isajaxrequest ())        return Content ("Save complete!");    else        return View ();}   

MVC uses jquery for Ajax