1. First, please set the following in the configuration file: (The item is present by default and True)
<add key= "unobtrusivejavascriptenabled" value= "true"/>
2. Introduce the JS file in your _layout.cshtml:
<script src= "~/scripts/jquery-1.8.2.min.js" ></script><script src= "~/Scripts/ Jquery.validate.min.js "></script><script src=" ~/scripts/jquery.validate.unobtrusive.min.js ">< /script><script src= "~/scripts/jquery.unobtrusive-ajax.min.js" ></script>
3. Get a simple value, such as a int,string type such as Id,name:
Data Entity User.cs:
Using system;using system.collections.generic;using system.linq;using system.web;namespace MvcApplication1.Models{ Public class User {public int ID {get; set;} public string Name {get; set;}} }
Controller UserController.cs: (partial code)
<summary>/// user warehouse defined/// </summary> private list<user> _userrepository = new List <User> { new user{id=1,name= "AB"}, new user{id=2,name= "BC"}, new User{id=3,name= "CD"}, new User{id=4,name= "Ace"} }; #region GetUserID for (get a simple value) public actionresult UserID () { return View (); } [HttpPost] public int UserID (string name) { User user = _userrepository.firstordefault (x = = string. Equals (X.name, Name, stringcomparison.currentcultureignorecase)); if (user = = null) { return-1; } return user.id; } #endregion
View userid.cshtml:
@using mvcapplication1.models; @model user@{ viewbag.title = "Query user ID";} @using (Ajax.beginform ("UserID", "User", new ajaxoptions {httpmethod = "Post", Updatetargetid = "Div_uid", Insertionmode = Insertionmode.replace}) { @Html. TextBox ("name") <button type= "Submit" Name= "CX" style= "width:80px; height:30px; " > Query Userid</button>}<div id= "Div_uid" ></div><!--if it is asynchronous, the value entered in this text box will not be flushed out--><input type = "text" autocomplete= "Off"/>
If the file you introduced earlier is cited, then when you click on the query,
The ID that is queried is displayed in the Div_uid
The results are as follows:
4. Get a list of users to refresh the list asynchronously:
Note: If you have a list that requires an asynchronous query and updates the query results, you need to use the distribution view! In other words, you need a view to be able to return the results directly to this page!
Controller UserController.cs: (partial code)
#region getuserlist (get user list for asynchronous refresh list) //Get:/user/public actionresult userlist () { var result = _userrepository; return View (result); [HttpPost] Public ActionResult userlist (string name) { var result = _userrepository; if (!string. Isnullorwhitespace (name)) { result = _userrepository.where (U = u.name.contains (name)). ToList (); } Return Partialview ("_pview", result); } #endregion
Main View userlist.cshtml:
@using mvcapplication1.models; @model list<user>@{ viewbag.title = "Index";} @using (Ajax.beginform ("UserList", "User", new ajaxoptions {httpmethod = "Post", Updatetargetid = "TB", Insertionmode = I Nsertionmode.replace}) { @Html. TextBox ("name") <button type= "Submit" name= "CX" style= "width:80px; height:30px; " > Query userlist</button>}<table> <thead> <tr> <td> user id</td> <td> user name </td> </tr> </thead> <tbody id= "TB" > @Html. Partial ("_pview", Model) </tbody></table><!--If it is asynchronous, the value entered in this text box will not be flushed out--><input type= "text" autocomplete= "Off"/>
Distribution View _pview.cshtml:
@using mvcapplication1.models; @model list<user>@{ Layout = null; Viewbag.title = "_pview";} @foreach (User u in Model) { <tr> <td>@u.ID</td> <td>@u.Name</td> </tr>}
The results are as follows:
After clicking on the query:
5. Well, basically the mainstream of the 2 usage have, hope to be helpful to everyone!
MVC's Ajax.beginform Use a detailed list of updates