MVC Ajax helpers

Source: Internet
Author: User
Tags actionlink

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  > 

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.

Celery label: MVC
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.