MVC Ajax helpers

There are many ways to implement Ajax in MVC. Microsoft's microsoftajax can also be implemented using jquery's Ajax. If you are familiar with other JavaScript frameworks, you can also use other implementation schemes, such as prototype.

The following are Microsoft's own implementation solutions.

JavaScript files to be preloaded:

     <  Script  SRC  ="  @  URL. Content (  "~ /Scripts/microsoftajax. js"  )"  Type  = "Text/JavaScript"> </  Script  > <  Script SRC  ="  @  URL. Content (  "~ /Scripts/microsoftmvcajax. js"  )"  Type  = "Text/JavaScript"> </  Script  > 

 
Mvc3.0 needs to reference <SCRIPT type = "text/JavaScript" src = "@ URL. Content ("~ /Scripts/jquery. unobtrusive-ajax.min.js ")"> </SCRIPT>
 

 
Otherwise there will be no Ajax Effect
 

In MVC, the following ready-made HTML hepler is provided:

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

Ajax. actionlink

How to send an asynchronous request using actionlink:

View

<DivID= "Mypnl"Style="Width: 300px;Height: 30px;Border: 1px dotted silver; "> </Div>@Ajax. actionlink ("Click me","Gettime",NewAjaxoptions{Updatetargetid ="Mypnl"})
 

Controller

PublicActionresultGettime (){ReturnContent (Datetime. Now. tostring ());}
 

The preceding example uses the actionlink hyperlink to send a request to gettime and returns a contentresult. The updatetargetid attribute in ajaxoptions specifies the page element to be updated.

Other attributes can be specified in ajaxoptions:

Confirm	It is equivalent to return confirm (MSG) in Javascript. When you click this link, the message to be confirmed is displayed.
Httpmethod	Specify to use get or post to send HTTP requests
Insertmode	You can use either of the following methods to update data on the specified updatetargetid element: "insertafter", "insertbefore", or "replace ". The default value is replace.
Loadingelementduration	Time when the loading element is displayed
Loadingelementid	You can specify the loading element displayed during the HTTP request.
Onbegin	JavaScript method executed before the HTTP request
Oncomplete	Method executed at the end of the HTTP request
Onfailure	Method executed when an HTTP request fails
Onsuccess	Method executed when the HTTP request is successful
Updatetargetid	Page elements updated by HTTP requests
URL	HTTP request URL

For the usage of methods in ajaxoptionsArticleRelated columns:

Jsonresult

Notes

• Oncomplete and onsuccess: oncomplete is triggered when an HTTP request is obtained. At this time, the page has not been updated, and onsuccess is triggered after the page has been updated.
• The relationship between actionname in actionlink and URL in ajaxoption: the HTML generated by the two is as follows, but the execution results are the same. I hope you can explain whether the two are different.

<A href = "/home/gettime" data-Ajax-update = "# mypnl" data-Ajax-mode = "replace" data-Ajax = "true"> click me </A>
<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 use ajax to submit a form and display the submitted result in the specified page element.

View

 @ Model Mvcajax. models. Usermodel @{ Viewbag. Title = "Ajaxform" ; }  <  Div  ID  = "Mypnl"  Style  ="  Width  : 300px;  Height  : 30px;  Border  : 1px dotted silver; "> </  Div >  @  Using (Ajax. beginform ( "Saveuser" , New  Ajaxoptions {Updatetargetid = "Mypnl" })){ <  Table  > <  Tr  > <  TD  >  @ Html. labelfor (M => M. username) </  TD  > <  TD  >  @ Html. textboxfor (M => M. username) </  TD  > </  Tr  > <  Tr  > <  TD  > @ Html. labelfor (M => M. Email) </  TD  > <  TD  >  @ Html. textboxfor (M => M. Email) </  TD  > </  Tr  > <  Tr  > <  TD >  @ Html. labelfor (M => M. DESC) </  TD  > <  TD  >  @ Html. textboxfor (M => M. DESC) </  TD  > </  Tr  > <  Tr  > < 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

PublicActionresultAjaxform (){ReturnView ();}[Httppost]PublicActionresultSaveuser (UsermodelUsermodel ){// Save User code here //......ReturnContent ("Save complete! ");}
 

The above exampleCodeThe Approximate Method of Using ajax to submit form data is implemented. In Ajax. beginform, ajaxoptions is also used to set Ajax request parameters, which is the same as the method used in Ajax. actionlink.

Others:

When introducing javascriptresult, we once mentioned that this actionresult is directlyCompositionBut in the Ajax request, you can use the result and execute the Javascript in the result.

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

 
[Httppost]PublicActionresultSaveuser (UsermodelUsermodel ){// Save User code here // ...... // return content ("Save complete! ");ReturnJavaScript ("Alert ('Save complete! ');");}
 

You can execute the statement in javascriptresult after the Ajax request is modified.