Razor 保存动态表格
本文转载自 ASP.NET MVC数组模型绑定 ,https://www.cnblogs.com/choon/p/5429065.html
内容根据评论内容中的方式有所调整
在ASP.NET MVC中使用Razor语法可以在视图中方便地展示数组,如果要进行数组模型绑定,会遇到索引断裂问题,如下示例:
<input type="text" name="[0].Name" />
<input type="text" name="[1].Name" />
<input type="text" name="[2].Name" />
<input type="text" name="[4].Name" />
<input type="text" name="[5].Name" />
数组Name在索引3处断裂,在模型绑定器解析完成后,会丢弃后面的4和5,只有0、1、2会被正确解析到对应模型中。
这种断裂在进行动态数组绑定时会经常发生。
下面,以一个案例来探讨如何进行动态数组绑定。假设有以下应用场景:
要求能够动态地添加和删除乘机人,最终提交表单后乘机人信息要填充到视图模型中的一个数组或集合属性中,以方便我们进行后续业务处理。
方式一:使用占位符替换
第一种方式我称之为”占位符替换“,使用的是ASP.NET MVC默认的模型绑定器(DefaultModelBinder)并结合前端处理。
首先,第一步,根据业务场景设计视图模型:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public class OrderModel { /// <summary> /// 航班号 /// </summary> public string FlightNo { get ; set ; } /// <summary> /// 乘机人 /// </summary> public List<Passenger> Passengers { get ; set ; } } public class Passenger { public string Name { get ; set ; } public string IdNo { get ; set ; } } |
其次,将此视图模型传递给视图:
1
2
3
4
5
6
7
8
|
public ActionResult New() { Models.OrderModel orderModel = new Models.OrderModel(); List<Models.Passenger> passenger = new List<Models.Passenger>(); passenger.Add( new Models.Passenger()); orderModel.Passengers = passenger; return View(orderModel); } |
再在视图文件中进行展示:
<div style="width:680px">
<form method="post" id="postForm">
<div class="form-group">
<label>航班</label><br />
@Html.TextBoxFor(p => p.FlightNo, new { placeholder = "航班号" })
</div>
<div class="form-group">
<label>乘机人</label>
<table class="passenger">
<tbody>
@if (Model.Passengers != null && Model.Passengers.Count > 0)
{
for (int i = 0; i < Model.Passengers.Count; i++)
{
<tr>
<td>姓名:</td>
<td>@Html.TextBoxFor(p => Model.Passengers[i].Name) <input name="Passengers.Index" type="hidden" value="@i" /></td>
<td>身份证号:</td>
<td>@Html.TextBoxFor(p => Model.Passengers[i].IdNo)</td>
<td>
<a href="javascript:;" onclick="removePassenger(this)">删除</a>
</td>
</tr>
}
}
</tbody>
</table>
<div style="margin-top:10px">
<a href="javascript:;" onclick="addPassenger()">添加乘机人</a>
</div>
</div>
@*<button type="submit">提交</button>*@
<button type="button" onclick="myfunction()">提交</button>
</form>
</div>
由于ASP.NET MVC的模型绑定器(DefaultModelBinder)具备自动解析形如"[0].属性名"、"[1].属性名"的能力,所以可以在模板文件中以占位符的形式来表示数组下标:
<!-- 乘机人模板 -->
<script type="text/html" id="passengerTemplate">
<tr>
<td>姓名:</td>
<td><input name="Passengers.Index" type="hidden" value="{}" /><input id="Passengers_{}__Name" name="Passengers[{}].Name" type="text" value=""></td>
<td>身份证号:</td>
<td><input id="Passengers_{}__IdNo" name="Passengers[{}].IdNo" type="text" value=""></td>
<td>
<a href="javascript:;" onclick="removePassenger(this)">删除</a>
</td>
</tr>
</script>
以上代码中的"{}"是数组下标占位符。当添加乘机人时,可预先随机生成一个key,然后再使用JavaScript替换”{}“为数组下标。
// 添加乘机人
当删除乘机人时,因为存在隐藏域,不需要考虑索引断裂问题:
// 删除乘机人
function
removePassenger(e) {
$(e).parents("tr").remove();}
这样,当我们提交表单时,乘机人信息就会自动填充到模型的Passengers属性中。
方式二:重写DefaultModelBinder
从Request.Form表单里面读取所有不同的索引,拼接索引读取数据。
public class TestModelBinder : DefaultModelBinder, IModelBinder
{
public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
var model = base.BindModel(controllerContext, bindingContext);
var inspectKeys = controllerContext.HttpContext.Request.Form.AllKeys.Where(c => c.Contains("IdNo")).ToList();
List<Passenger> passengerList = new List<Passenger>();
List<string> inspectLengths = new List<string>();
for (int i = ; i < inspectKeys.Count; i++)
{
string result = System.Text.RegularExpressions.Regex.Replace(inspectKeys[i], @"[^0-9]+", "");
if (!inspectLengths.Contains(result) && !string.IsNullOrWhiteSpace(result))
{
inspectLengths.Add(result);
}
}
for (int i = ; i < inspectLengths.Count; i++)
{
Passenger dto = new Passenger()
{
IdNo = controllerContext.HttpContext.Request.Form["IdNo" + inspectLengths[i]],
Name = controllerContext.HttpContext.Request.Form["Name" + inspectLengths[i]],
};
passengerList.Add(dto);
}
var entity = model as OrderModel;
if (entity != null)
{
entity.Passengers = passengerList;
return entity;
}
return model;
}
}
控制器接收代码:
[HttpPost]
public ActionResult Test(Models.OrderModel orderModel)
{
return View(orderModel);
}
文件下载:TestCode.zip
Razor 保存动态表格的更多相关文章
- Java利用poi生成word(包含插入图片,动态表格,行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
- 基于.NetCore开发博客项目 StarBlog - (12) Razor页面动态编译
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 【设计过程】.NET ORM FreeSql WhereDynamicFilter 动态表格查询功能
前言 最近几乎每天40度,越热越不想面对电脑,还好开源项目都比较稳定没那么多待解决问题,趁着暑假带着女儿学习游泳已略有小成.游泳好处太多了,建议有孩子的都去学学,我是在岸边指导大约一周左右就学会了,目 ...
- 在<s:iterator>标签里给动态表格添加序号
在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 5.11-5.15javascript制作动态表格
制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...
- winfrom之动态控件生成以及保存动态空间的数据
前些天要完成一个winform程序,里面涉及到动态控件的添加以及保存动态空间中数据的保存,效果如下 初始化时: 点击添加阶梯价后:(点击一下,动态添加一行) 那么接下来,我们就具体的讲下代码实现: 首 ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- jQuery的下面是动态表格动态表单中的HTML代码
动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...
随机推荐
- 一、Angular环境的搭建
1.安装nodejs (1) 下载网址https://nodejs.org/en/download/ (2) 双击进行安装 (3) 打开命令行,输入node -v 和 npm -v 查看是否安装成功 ...
- ubuntu 安装apache2 二进制包
官方安装教程 http://httpd.apache.org/docs/2.4/install.html 一.下载安装包 进入https://httpd.apache.org/download.cg ...
- Kettle数据同步速度调优记录
Msyql到Vertica 1.mysql中在openshop 数据库中选择其中一个300W左右数据的表 create table ip_records_tmp_01 AS SELECT * FROM ...
- PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别
PL/SQL-FOR UPDATE 与 FOR UPDATE OF的区别 数据库 oracle for update of 和 for update区别 select * from T ...
- java基础复习(一)
一.常用的DOS命令 打开命令提示符窗口的方式: ① win + R --> 输入cmd --> 回车 ② 开始 --> 搜索程序和文件的框中输入 cmd --> 回车 ...
- js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...
- SpringMvc Filter的使用
一:Filter过滤器. 先自定义一个过滤器. package com.jbj.filter; import org.springframework.web.filter.OncePerRequest ...
- linux内核源码——内存管理:段页式内存及swap
os的内存管理大概可以分成两块:1.段页式管理(虚存)2.swap in 和 swap out 段页式管理 段式管理的图像:运行时重定位 多级页表的管理图像 块表加速 用户(程序员)希望用段,物理内 ...
- 正确设置nginx/php-fpm/apache权限 提高网站安全性 防止被挂木马
核心总结:php-fpm/apache 进程所使用的用户,不能是网站文件所有者. 凡是违背这个原则,则不符合最小权限原则. 根据生产环境不断反馈,发现不断有 php网站被挂木马,绝大部分原因是因为权限 ...
- Spring中Bean的作用域和生命周期
作用域的种类 Spring 容器在初始化一个 Bean 的实例时,同时会指定该实例的作用域.Spring3 为 Bean 定义了五种作用域,具体如下. 1)singleton 单例模式,使用 sing ...