MVC Ajax Helpers

There are many ways to implement Ajax in MVC, with Microsoft's own Microsoftajax, or with jquery Ajax, and if you are familiar with other JavaScript frameworks, you can use other implementations, such as prototype and so on.

The following are Microsoft's own implementation scenarios.

JavaScript files that require pre-loading:

1  <script src="@Url. Content ("~/scripts/microsoftajax.js")" type="text/javascript"></script>2  <script src= " @Url. Content ("~/scripts/microsoftmvcajax.js") " type=" ></script> "text/javascript"

Some of the following ready-made HTML Hepler have been provided in MVC:

• Ajax.actionlink ()
• Ajax.beginform ()
• Ajax.routelink ()
• Ajax.beginrouteform ()

Ajax.actionlink

Methods for sending asynchronous requests using ActionLink:

View

1 <div id="mypnl" style="width:300px; height:30px; border:1px dotted silver; ">2 </div>3 @Ajax. ActionLink ("clickMe"  GetTime"new"mypnl" })

Controller

1  Public actionresult GetTime () 2 {3     return Content (DateTime.Now.ToString ()); 4 }

The example above uses the ActionLink hyperlink to send a request to gettime, which returns a contentresult that specifies the page element that needs to be updated through the Updatetargetid property in Ajaxoptions.

There are other properties that you can specify in Ajaxoptions:

Confirm	Equivalent to return confirm (msg) in JavaScript, the information that needs confirmation is first prompted when you click on the link.
HttpMethod	Specifies that HTTP requests are sent using GET or post
Insertmode	Specifies which way to update data in the specified Updatetargetid element, there are three ways: "InsertAfter", "InsertBefore", or "Replace". The default is: Replace
Loadingelementduration	Loading the time the element is displayed
Loadingelementid	You can specify the loading element that is displayed during an HTTP request
Onbegin	JavaScript methods that are executed before HTTP requests
OnComplete	Methods to execute at the end of an HTTP request
OnFailure	Methods to execute when an HTTP request fails
Onsuccess	Methods to execute when an HTTP request succeeds
Updatetargetid	HTTP requests for updated page elements
Url	URL of the HTTP request

The use of methods in Ajaxoptions, in the previous article on the introduction of ActionResult, has been related to the following:

Jsonresult

Watch out.

• The difference between OnComplete and onsuccess: OnComplete is raised when an HTTP request is obtained, and the page has not been updated, and onsuccess is raised after the page has been updated.
• The relationship between the URLs in ActionName and ajaxoption in ActionLink: The HTML of the two are as follows, but the result is the same, I hope there is a master can explain whether the difference between the two.

1<a href="/home/gettime"Data-ajax-update="#myPnl"Data-ajax-mode="Replace"data-ajax="true">click me</a>2<a href="/"Data-ajax-url="Home/gettime"Data-ajax-update="#myPnl"Data-ajax-mode="Replace"data-ajax="true">click me</a>

Ajax.beginform

The HTML Hepler can be implemented using AJAX to submit the form, displaying the result of the submission in the specified page element.

View

1 @model MvcAjax.Models.UserModel2 @{3Viewbag.title ="Ajaxform";4 }5 6<div id="MYPNL"style="width:300px; height:30px; border:1px dotted silver;">7</div>8 9@using (Ajax.beginform ("Saveuser",Newajaxoptions {Updatetargetid ="MYPNL" }))Ten { One<table> A<tr> -<td> -@Html. labelfor (M =m.username) the</td> -<td> -@Html. textboxfor (M =m.username) -</td> +</tr> -<tr> +<td> A@Html. labelfor (M =m.email) at</td> -<td> -@Html. textboxfor (M =m.email) -</td> -</tr> -<tr> in<td> -@Html. labelfor (M =M.desc) to</td> +<td> -@Html. textboxfor (M =M.desc) the</td> *</tr> $<tr>Panax Notoginseng&LT;TD colspan="2"> -<input type="Submit"Value="Submit"/> the</td> +</tr> A</table> the}

Model

1 usingSystem.ComponentModel.DataAnnotations;2 3 namespaceMvcajax.models4 {5      Public classUsermodel6     {7[Display (Name ="Username")]8          Public stringUserName {Get;Set; }9 Ten[Display (Name ="Email")] One          Public stringEmail {Get;Set; } A  -[Display (Name ="Description")] -          Public stringDesc {Get;Set; } the     } -}

Controller

1  Publicactionresult ajaxform ()2 {3     returnView ();4 }5 6 [HttpPost]7  Publicactionresult Saveuser (Usermodel usermodel)8 {9     //Save User Code hereTen     //...... One  A     returnContent ("Save complete!"); -}

The example code above implements the approximate method of submitting form data using AJAX, using Ajaxoptions in Ajax.beginform to set the parameters of the AJAX request in the same way as in Ajax.actionlink.

Other:

When introducing Javascriptresult, it was mentioned that the ActionResult was directly reponse as a file in a normal request, but in an AJAX request, the result can be used and the JavaScript in result will be executed.

For example, change the above Conntroller to the following code:

1 [HttpPost]2  Publicactionresult Saveuser (Usermodel usermodel)3 {4     //Save User Code here5     //......6 7     //return Content ("Save complete!");8     returnJavaScript ("alert (' Save complete! ');");9}

The statements in Javascriptresult can be executed after the AJAX request is executed.

MVC Ajax Helpers