Update list of MVC's Ajax.BeginForm usage details

1. First, please set the following in the configuration file: (this item exists and is true by default)

<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 ID, NAME and other int, string types:

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>
        /// Defined user repository
        /// </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;">查询UserID</button>
}
<div id="div_uid"></div>
<!--If it is asynchronous, the value entered in this text box will not be refreshed-->
<input type="text" autocomplete="off" />

If you have cited all the files that you should have imported, then when you click on the query,

The queried ID will be displayed in div_uid

The result is as follows:

 

4. Get a list of users for asynchronously refreshing the list:

Note: If you have a list that needs to be queried asynchronously and updated with the query results, then you need to use a distributed view! That is to say, you still need a View, you can't return the result 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 = InsertionMode.Replace }))
{
    @Html.TextBox("name")
     <button type="submit"  name="CX" style="width:80px; height:30px;">查询UserList</button>
}
<table>
    <thead>
        <tr>
            <td>User ID</td>
            <td>Username</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 refreshed-->
<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 result is as follows:

After clicking query:

5. Well, basically there are two mainstream usages, I hope it can be helpful to everyone!