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="width: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="width: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>
}

结果如下:

点击查询后:

作为笔记使用。无意侵权。

时间: 2024-10-05 16:08:15

MVC之Ajax.BeginForm使用详解之更新列表的相关文章

Ajax.BeginForm参数详解

在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Ajax使用,方便快捷. 使用Ajax.BeginForm方法会生成一个form表单,最后以Ajax的方式提交表单数据:需要用using把该方法括起来,使系统知道form表单从何处开始,何处结束. 有11个方法重载,下面详解该方法的各项参数: 参数一:AjaxOptions class类型 说明:配置Ajax的一些选项 举例:new AjaxOptions { HttpMethod = "POST", Load

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

javascript AJAX与Comet详解

          博客专家福利      [限时活动]建专辑得大奖       专访荣浩:流程的永恒之道      当青春遇上互联网,能否点燃你的创业梦      推荐有礼--找出您心中的技术大牛 javascript AJAX与Comet详解 分类: javascript2012-12-24 17:39 367人阅读 评论(0) 收藏 举报 XMLHttpRequest对象 在IE5中,XHR对象是通过MSXML库中的ActiveX对象实现的.在IE中可能会遇到三种不同版本的XHR对象,即M

$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证

原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证 MVC中,关于往后台提交的方法有: 1.Html.BeginForm():同步 2.Ajax.BeginForm():异步 3.js或jQuery提交后台 本文体验Ajax.BeginForm()方法.   View model using System; using System.ComponentModel.DataAnnotations;   namespace XHelent.Models { public

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

$.ajax()所有参数详解

原文:https://www.cnblogs.com/everest33Tong/p/6159700.html [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetu

Icehouse版keystone配置完全详解(更新中)

本文全面解读Icehouse发行版keystone的配置文件keystone.conf [DEFAULT]admin_token=(string value)# 这是一个公知的密码,用于初始化keystone,强烈建议在生产模式中禁用,只需要在# keystone-paste.ini文件中移除AdminTokenAuthMiddleware这个pipeline即可 public_bind_host=(string value)# The IP Address of the network int

Asp.Net MVC part2 View、Controller详解

View详解Razor视图引擎简介HtmlHelper强类型页面 Razor视图引擎简介强大的@:表示使用C#代码,相当于aspx中的<%%>可以完成输出功能当遇到html标签时会认为C#代码结束,贪婪匹配后面的内容,如@a1会认为是变量a1,如@a<br>1会认为是变量a会对标签内容进行Html编码注释:@*注释内容*@注意:@变量表示输出,结尾不加分号引入命名空间:@using 命名空间; HtmlHelperHelper:是为了方便View的开发而产生的HtmlHelper的