zoukankan      html  css  js  c++  java
  • MVC之Ajax.BeginForm使用详解之更新列表

     

    1.首先,请在配置文件设置如下:(该项默认都存在且为true)

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

    2.在你的_layout.cshtml中引入JS文件:

    <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.获取简单的某个值,比如ID,NAME等int,string类型:

    数据实体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; }

        }

    }

     

     

    控制器UserController.cs:(部分代码)

     

          /// <summary>

            /// 定义的用户仓库

            /// </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 (获取简单的某个值)

            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

     

    视图UserID.cshtml:

     

    @using MvcApplication1.Models;

    @model User

    @{

        ViewBag.Title = "查询用户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="80px; height:30px;">查询UserID</button>

    }

    <div id="div_uid"></div>

    <!--如果是异步,则本文本框输入的值不会被刷新掉-->

    <input type="text" autocomplete="off" />

     

    如果你前面该引入的文件都引了,那么在点击查询时,

    div_uid 中就会显示查询到的ID

    结果如下:

     

     

    4.获取用户列表,用于异步刷新列表:

    注意:如果你有一个列表需要异步查询并更新查询结果,那就需要使用分布视图!也就是说你还需要一个View才可以,不可以将结果直接返回到本页!

    控制器UserController.cs:(部分代码)

     

         #region GetUserList  (获取用户列表,用于异步刷新列表)

            // 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

     

    主视图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="80px; height:30px;">查询UserList</button>

    }

    <table>

        <thead>

            <tr>

                <td>用户ID</td>

                <td>用户名称</td>

            </tr>

        </thead>

        <tbody id="tb">

        @Html.Partial("_pview", Model)

        </tbody>

    </table>

    <!--如果是异步,则本文本框输入的值不会被刷新掉-->

    <input type="text" autocomplete="off" />

     

    分布视图_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>

    }

     

    结果如下:

     

    点击查询后:

     

    5.好了,基本上主流的2个用法都有,希望能对大家有帮助!

  • 相关阅读:
    Medium | LeetCode 179. 最大数 | 排序
    Medium | LeetCode 448. 找到所有数组中消失的数字 | 原地Hash
    Medium | LeetCode 78. 子集 | 回溯
    Medium | LeetCode 39. 组合总和 | 回溯
    js上传头像进行图片压缩
    js 点击按钮复制文本
    eclipse下载
    gulp打包修改配置文件
    vuejs之过滤器(filters)的使用
    关于layui弹出层关闭之后,弹出的dom显示问题
  • 原文地址:https://www.cnblogs.com/lgx5/p/5529818.html
Copyright © 2011-2022 走看看