ASP.NET MVC数组模型绑定详解

在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)并结合前端处理。

首先,第一步,根据业务场景设计视图模型:

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; }
}

其次,将此视图模型传递给视图:

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">
 <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)</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>
</div>

由于ASP.NET MVC的模型绑定器(DefaultModelBinder)具备自动解析形如"[0].属性名"、"[1].属性名"的能力,所以可以在模板文件中以占位符的形式来表示数组下标:

<!-- 乘机人模板 -->
<script type="text/html" id="passengerTemplate">
 <tr>
 <td>姓名:</td>
 <td><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>

以上代码中的"{}"是数组下标占位符。当添加乘机人时,可预先计算已有乘机人个数,然后再使用JavaScript替换”{}“为数组下标。

// 添加乘机人
function addPassenger() {
 // 当前添加行数组元素下标
 var index = $(".passenger").find("tbody").find("tr").length;
 //{}是数组元素下标占位符
 var passengerHTML = $('#passengerTemplate').html().replace(/{}/g, index);
 $(".passenger").find("tbody").append(passengerHTML);
}

当删除乘机人时,注意如果删除的不是最后一个,会发生索引断裂问题,需要重新调整数组下标:

// 删除乘机人
function removePassenger(e) {
 $(e).parents("tr").remove();
 // 依次遍历表格的每行,重新调整数组下标
 var tb = $(".passenger").first();
 var count = tb.find("tbody").find("tr").length;
 for (var i = 0; i < count; i++) {
 var newTR = tb.find("tr").eq(i).formhtml().replace(/\[\d+\]/g, '[' + i + ']');//重新调整数组元素下标
 tb.find("tr").eq(i).html(newTR);
 }
}

这样,当我们提交表单时,乘机人信息就会自动填充到模型的Passengers属性中。

方式二:使用Vue.js
使用第一种方式需要编写大量前端代码,包括模板文件,添加删除事件,还需要处理重新调整顺序时的插值问题。

如果使用前端MVVM框架会让这一流程变得简单,目前比较流行的前端MVVM框架有AngularJS,有老古董KnockoutJS,也有新兴小众框架Vue.js。

AngularJS比较庞大,这么简单的一个模型绑定用Anuglar有一种杀鸡用牛刀的感觉;Knockout和Vue都是轻量级的MVVM框架,但Knockout需要包裹原生数据来制造可观察对象,取值和赋值时需要采用函数调用的形式,使用起来不是很方便,所以我选择了Vue.js。Vue.js是一个轻量高效的库,它没有像Angular的module、controller、scope、factory、service这种API,核心就是一个模型绑定功能。大小只有70kb,gzip压缩后只有25kb,非常轻量化。

这种方式的基本原理是前端使用Vue.js声明视图模型并进行绑定,然后提交表单时把模型序列化为json字符串传递到后台,后台再使用Json.net反序列化为C#对象。

由于Vue.js的绑定特点,我们只需要操作数组元素即可,不需要额外关注DOM操作,节省了不少工作量。

首先,需要声明视图模型,并使用Vue.js进行绑定:

<script src="~/Scripts/vue.js"></script>
<script type="text/javascript">
 // 视图模型
 var viewModel = {
  FlightNo: '',
  Passengers: [
  { ElementId: 'passenger_1', Name: '', IdNo: '' }
  ]
 }
 // 模型绑定
 new Vue({
  el: '#app',
  data: viewModel,
  methods: {
  removePassenger: function (elementId) {
   for (var i = 0; i < viewModel.Passengers.length; i++) {
   if (viewModel.Passengers[i].ElementId == elementId) {
    viewModel.Passengers.splice(i, 1);
   }
   }
  },
  addPassenger: function () {
   var tb = document.getElementsByTagName('table')[0];
   var index = tb.rows[tb.rows.length - 1].getElementsByTagName('input')[0].getAttribute("id").split('_')[1];
   viewModel.Passengers.push({ Name: '', IdNo: '', ElementId: 'passenger_' + (index + 1) });
  },
  submitForm: function () {
   var jsonString = JSON.stringify(viewModel);
   document.getElementById("viewModel").value = jsonString;
   return true;
  }
  }
 });
</script>

然后,在视图中使用Vue.js绑定:

<form action="/Order2/NewPost" method="post">
 <div id="app" style="width:680px">
 <div class="form-group">
  <label>航班</label><br />
  <input v-model="FlightNo" type="text" placeholder="航班号" />
 </div>
 <div class="form-group">
  <label>乘机人</label>
  <table class="passenger">
  <tbody>
   <tr v-for="passenger in Passengers">
   <td>姓名:</td>
   <td><input v-model="passenger.Name" v-bind:id="passenger.ElementId" type="text" /></td>
   <td>身份证号:</td>
   <td><input v-model="passenger.IdNo" type="text" /></td>
   <td>
    <a href="javascript:;" v-on:click="removePassenger(passenger.ElementId)">删除</a>
   </td>
   </tr>
  </tbody>
  </table>
  <div style="margin-top:10px">
  <a href="javascript:;" v-on:click="addPassenger">添加乘机人</a>
  </div>
  <div style="margin-top:10px">
  <input type="submit" class="btn btn-default" v-on:click="submitForm" />
  </div>
 </div>
 </div>
 <input type="hidden" id="viewModel" name="viewModel" />
</form>

最后在Controller里,我们反序列化即可得到对应的C#强类型模型:

[HttpPost]
public ActionResult NewPost()
{
 var jsonString = Request.Form["viewModel"];
 Models.OrderModel model = Newtonsoft.Json.JsonConvert.DeserializeObject<Models.OrderModel>(jsonString);
 if (model != null) {
 // our code here...
 }
 return RedirectToAction("Index", "Home");
}

这两种方式均可以实现动态数组绑定,方式一使用js进行占位符替换,表单中的元素都以[index].属性名的方式命名,然后由MVC默认的模型绑定器来转化模型;

方式二使用Vue.js来直接进行模型绑定,提交表单时将模型序列化为json字符串,然后后端再反序列化,最终得到强类型模型。

以上就是本文的全部内容,希望对大家的学习有所帮助。

时间: 2016-04-26

ASP.NET中ListView(列表视图)的使用前台绑定附源码

1.A,运行效果图 1.B,源代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropLvw.aspx.cs" Inherits="DropLvw" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

asp.net中ListBox 绑定多个选项为选中及删除实现方法

我们先来看listbox绑定多选项实现 复制代码 代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"

asp.net gridview代码绑定

拖一个gridview控件上去,然后在Page_Load里编写代码,当然我是手动用代码绑定的,这里使用了DataAdapter,它的构造函数接受了一个sql字符串和Connection对象,用它可以不必打开和关闭Connection对象,DataAdapter会自行处理,还用到了DateSet,这里新建了一个空的DateSet对象,并调用DataAdapter的Fill方法填充数据,然后通过设定GridView的数据源,调用它的DataBind方法就实现了数据绑定. 程序代码 复制代码 代码如下

Asp.net中的数据绑定Eval和Bind应用示例

关键字: Eval (单项绑定)单项的数据绑定一般用于数据展示.Eval数据绑定应用的反射原理来返回数据. Bind (双向绑定)双向的数据绑定除了展示数据,还要将界面数据的变动自动写回到绑定的数据源中. Eval 单向数据绑定,将数据源中的数据展现到界面上.当我们提及数据展现时,必然会考虑到数据的格式问题,例如日期格式.当然,这也是Eval关心的内容. 一般数据绑定 <%#Eval("属性名称")%> 带数据格式的数据绑定 <%#Eval("属性名称&qu

asp.net ListView 数据绑定

代码如下: public partial class Form1 : Form { public Form1() { InitializeComponent(); string strsql = @"server=.;uid=sa;pwd=sa;database=Northwind"; SqlConnection my_Conn = new SqlConnection(strsql); my_Conn.Open(); string str_sql ="select * fro

asp.net读取excel中的数据并绑定在gridview

前台label,DropDownList,gridview控件 aspx.cs核心代码: 复制代码 代码如下: using System.Data.OleDb;//需要引入命名 public void Excel_Click(object sender, EventArgs e) { if (this.AttachmentFile.Value == "" && this.Label1.Text == "" && DropDownLis

asp.net中将数据库绑定到DataList控件的实现方法与实例代码

解决方法1: datalist databind() 解决方法2: 查看MSDN上的详细说明资料 解决方法3: 在DataList的模板中用table表格,如: 复制代码 代码如下: <asp:DataList ID="dlDetailedInfo" runat="server" OnItemDataBound="dlDetailedInfo_ItemDataBound" Width="100%"> <Ite

asp.net中绑定TextBox回车事件的解决方法

1.将页面上的回车事件都绑定到按钮上 复制代码 代码如下: function EnterTextBox(e) { var msie = (document.all) ? true : false; var keycode; if(!msie) keycode = window.event ? e.keyCode : e.which; else keycode = e.keyCode; //alert(keycode); if(keycode==13 && document.getEleme

asp.net数据绑定DataBind使用方法

简单介绍 DataBindDataBind包括三大方法,Repeater,DataList和DataGrid,这些控件都位于 System.Web.UI.WebControls 命名空间中,从 WebControl 基类中直接或间接派生出来的.这些方法都是通过HTML来显示数据的内容.建立DataBind所有的DataBind都应该用DataBind() 函数来建立(注意如果你用的是C#,请注意大小写)数据绑定,是整个页面PAGE和所有控件的一个方法,也就是说,他可以被所有的控件使用,你建立数据

ASP.NET数据绑定的记忆碎片实现代码

ASP.NET数据绑定的一般情况 1.<%= C#代码 %> //调用代码隐藏页面的方法.属性.或者字段 这里一般是调用属性和方法比较多,要注意调用的属性.方法或者字段的作用域,必须是可以在ASPX页面可以访问到的. 代码示例(ASPX):<%=Property%> 在(CS)是: public string Property{ get { return "This is a Property";} } 属性是这样使用的,方法和字段的使用类似,也是这样实现的.

ASP.NET数据绑定之GridView控件

GridView 是 DataGrid的后继控件,在.net framework 2 中,虽然还存在DataGrid,但是GridView已经走上了历史的前台,取代DataGrid的趋势已是势不挡.  作用:其功能是在web页面中显示数据源中的数据.GridView和DataGrid功能相似,都是在web页面中显示数据源中的数据,将数据源中的一行数据,也就是一条记录,显示为在web页面上输出表格中的一行.     在此GirdView的详细属性和事件我不再阐述.下面我只是简单介绍一下GirdVi

ASP.NET数据绑定GridView控件使用技巧

不得不说GridView控件的功能确实很强大,一个简简单单的控件就可以把数据管理的很美.在这两天做的任务中碰到的一些GridView控件中遇到的问题进行总结: ①:在GridView控件中随意显示数据库中的信息: GridView控件中有一个AutoGenerateColumns属性,它的作用就是控制GridView控件是否在运行的时候自动生成相关联的列,一般情况下把这个属性设置成为false.因为我们需要的是一个DIY的GridView控件.然后点击右上角的箭头,选择编辑列添加一个BoundF

通用SQL存储过程分页以及asp.net后台调用的方法

创建表格并添加300万数据 use Stored CREATE TABLE UserInfo( --创建表 id int IDENTITY(1,1) PRIMARY KEY not null,--添加主键和标识列 UserName varchar(50) ) declare @i int --添加3百万数据,大概4分钟时间 set @i=1 while @i<3000000 begin insert into UserInfo (UserName) values(@i) set @i=@i+1

ASP.Net MVC_DotNetZip简单使用方法,解决文件压缩的问题

准备工作: 在vs工具栏中找到NuGet 下载DotNetZip 现在就可以使用DotNetZip强大的类库了,在这里我给出一些简单的使用. public ActionResult Export() { using (ZipFile zip = new ZipFile(System.Text.Encoding.Default)) { zip.AddFile(Server.MapPath("~/Img/2.png"), "Images"); zip.AddFile(S

asp.net中CSharpThinking扩展方法分析

本文实例讲述了asp.net中CSharpThinking扩展方法.分享给大家供大家参考.具体分析如下: 一.演变 ① 扩展方法特征 1)必须在一个静态方法中. 2)至少有一个参数. 3)第一个参数必须附加this关键字作为前缀. 4)第一个参数不能有其他任何修饰符(如 out,ref). 5)第一个参数的类型不能是指针. 6) 如果扩展方法名称与类型的方法一样(如都命名为ToString),则只有类型的方法会被调用,而扩展方法的不会,这是一个优先级问题. ② 扩展方法与普通静态方法的比较 C#

ASP.NET读取RSS的方法

RSS对于网站有着很重要的用途,本文即以实例展示了ASP.NET读取RSS的方法,供大家参考借鉴,具体方法如下: 主要功能代码如下: /// <summary> /// 加载RSS /// </summary> /// <param name="RssUrl">RSS地址</param> /// <param name="RssCount">要提取的文章数量</param> /// <re

ASP.NET实现伪静态网页方法小结

本文实例总结了ASP.NET实现伪静态网页方法,分享给大家供大家参考之用.具体方法如下: 方法一:利用Httphandler实现URL重写(伪URL及伪静态) 我们有时候会见到这样的地址:"http://www.XXXX.com/show-12-34.html",你或许认为在站点服务器根目录"/"下存在名为"show-12-34.html"的文件,其实实际它可能是不存在的,而可能你看到的内容是"/aspx/show.aspx?type=

一些Asp技巧和实用解决方法

一些Asp技巧和实用解决方法 随机数: <%randomize%> <%=(int(rnd()*n)+1)%> 查询数据时得到的记录关键字用红色显示: <% =replace(RS("字段X"),searchname,"<font color=#FF0000>" & searchname & "</font>") %> 通过asp的手段来检查来访者是否用了代理 <%