MVC uses jquery to implement Ajax

When I introduced the Ajax Implementation Method in MVC in the previous article, I mentioned that jquery is another method to implement Ajax besides Ajax HTML helper.

Ajax request via get Method

View

 <  Script  Type  = "Text/JavaScript"> Function Gettime () {$. Get ( "Home/gettime" , Function (Response) {$ ( "# Mypnl" Response .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

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

Use the POST method to implement form Ajax submission

View

 @ Model Mvcajax. models. Usermodel  @{ Viewbag. Title = "Ajaxform" ; }  <  Script Type  = "Text/JavaScript"> $ (Document). Ready ( Function () {$ ( "Form [Action $ = 'saveuser']" ). Submit ( Function () {$. Post ($ ( This ). ATTR ( "Action" ), $ ( This ). Serialize (), Function (Response) {$ ( "# Mypnl" Response .html (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  >  @ 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

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

AboveCodeImplements the jquery post data submission method.

By viewing the Ajax implementation methods of the above two jquery methods, we can see that the controller is the same as the previous Ajax HTML helper.

The main implementation scheme for data submission using jquery is to send a request to the Controller of MVC through jquery's get or POST method, process the obtained response, and update it to the page.

Note:

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

There will be a question in this place:

If JavaScript scripts are disabled for this page, the page is redirected or the form is submitted, and the returned actionresult processing will be faulty.

In this case, the controller needs to determine whether the request is an Ajax request and return different actionresults based on different situations:

 
[Httppost]PublicActionresultSaveuser (UsermodelUsermodel ){// Save User code here //......If(Request. isajaxrequest ())ReturnContent ("Save complete! ");Else returnView();}