How to build an ASP. Mvc4&jquery&ajax&json sample

Background:

A small example will be built in the blog to demonstrate how to use jquery Ajax in an ASP. NET MVC4 project.

Steps:

1, add the controller (HomeController) and action Method (index), and add a view (index.cshtml) for the Index action method, the HTML in the view is as follows:

Enter your name: <input type= "text" id= "txtname"/><br/> Enter your age: <input type= "text" id= "txtage"/><br/> <button type= "button" id= "BTN1" > Submit </button><button type= "button" id= "btn2" > Empty </button>< P id= "Display" ></p>

The view contains two text boxes, respectively, to enter a name and age, including a button to submit information and empty the contents of the text box, together with a paragraph to display the data information returned by Ajax.

2, add another Action Party (addusers) in the home controller to receive and process the data passed by the view, and return the execution result to the view, the code is as follows:

1 public         ActionResult addusers () 2         {3             var my = new MyModel (); 4             string result = String. Empty; 5             if (Request.isajaxrequest ()) 6             {7 this                 . Updatemodel (my); 8                 String name = My. Name; 9                 int age = My. Age;10                 if (age <) result = name+ "The article is so Rotten"; "one                 else result = name+", remember to write "bad";             }13             return Content (result);         

As shown in the code: Returns a string directly with content.

or return a contentresult () object, similar to the code above (so collapsed), the code is as follows:

1 public         ActionResult dowithusers () 2         {3             var actionresult = default (Contentresult); 4             var my = new Mymode L (); 5             Try 6             {7 this                 . Updatemodel (my); 8                 String name = My. Name; 9                 int age = My. age;10                 String temp = ""; one                 if (age <) temp = "the article sucks"; "                 Else temp =", remember Rotten also write ";                 ActionResult = New Contentresult ()                 {                     Content = name + temp16                 };             }18             catch (Exception ex)             {                 return null;21             }22             return actionresult;23         }

3. Modify the Jquery&ajax code:

1     $ (document). Ready (function () {2         $ ("#btn1"). Click (function () {3             var data = ""; 4             var name = $ ("#txtName"). Val (); 5             var age = $ ("#txtAge"). Val (); 6             Data + = "&name=" + encodeURI (name); 7< C6/>data + = "&age=" + encodeuri (age); 8             $.ajax ({9                 async:true,10                 cache:false,11                 timeout:60 * * 1000,12                 data:data,13                 Type: " GET ",                 datatype:" JSON ",                 URL:"/ajax/addusers ",                 success:function (Result),                 {                     $ (" #display "). Text (result),                 },20                 error:function (Result) {                     $ (" #display "). HTML (" error ");                 ))         ;

4, Operation effect

Above, the simplest example of the ASP. NET Mvc4&jquery&ajax is complete.

Send an action-processed result in JSON:

In more cases, it is not just about returning a string, but instead returning the result in JSON.

5, modify the action as follows:

1 public         ActionResult dowithusers () 2         {3             var my = new MyModel (), 4             try 5             {6 this                 . Updatemodel (my); 7                 String name = My. Name; 8                 int age = My. Age;  9                 String temp = ""; "                 if (age <) temp =" The article sucks ah ";" all                 else temp = ", remember Rotten also to write";                 JavaScriptSerializer JSS = new JavaScriptSerializer ();                 return Json (JSS. Serialize (New {name = name, Message = temp}), jsonrequestbehavior.allowget),             }15             catch (Exception ex) 16
   {17                 return null;18             }19         }

Description: The JSON method returns a Jsonresult, while Jsonresult is also inherited from ActionResult.

6, modify the Ajax section, the code is as follows:

1                 success:function (Result) 2                 {3                     result = Json.parse (result); 4                     $ ("#display"). Text (result. Name + result. Message); 5                 },

Run in the same effect.
Above, the simplest example of the ASP. NET Mvc4&jquery&ajax&json is complete.

Excerpt from: https://www.cnblogs.com/SharpL/p/4641040.html

How to build an ASP. Mvc4&jquery&ajax&json sample