ASP.NET MVC之表单集合数据自动绑定到对象属性(集合)中

简介:

前言

之前没遇到过这个问题,在项目中遇到这个问题时想法挺好,按照流程走下去,结果事与愿违,于是开始探索着解决方案,接下来我们来看看这个问题,早已经明了的童鞋请绕道,此文仅供未遇到的童鞋提供一种解决方案。

话题

首先我们来看看整个问题的出现,介绍一下问题的背景。

复制代码
     public class Blog
    {
        public string BlogName { get; set; }
        public string BlogAddress { get; set; }
        public List<Article> Article { get; set; }
    }

    public class Article
    {
        public string ArticleIntr { get; set; }
        public string ArticleName { get; set; }
    }
复制代码

上述给出两个类,一个博客包含多篇文章取集合属性。

复制代码
        public ActionResult Test(Blog b)
        {
            var articleList = new List<Article>() { new Article() { ArticleIntr = "asp.net mvc", ArticleName = "mvc" }, new Article { ArticleIntr = "WebAPi", ArticleName = "WebAPi Authentication" } };
            var blog = new Blog() { BlogName = "xpy0928", BlogAddress = "CreateMyself", Article = articleList };           
            return View(blog);
        }
复制代码

利用强类型视图渲染到页面

复制代码
@using FormToObjList.Models
@model Blog
@{
    Layout = null;
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div style="width:700px;margin-left:200px;">
    <form action="test" method="post" enctype="multipart/form-data">
        <div style="float:left;">
            博客地址:<input type="text" class="form-control" value="@Model.BlogAddress" /><br />
            博客名称:<input type="text" class="form-control" value="@Model.BlogName" /><br />
        </div>
        <br />

        <div style="float:right;">
            <table>
                <tr>
                    <th>序号</th>
                    <th>文章介绍</th>
                    <th>文章名称</th>
                </tr>
                @{
                    var i = 0;
                    foreach (var article in Model.Article)
                    {
                        <tr>
                            <td>@(++i)</td>
                            <td><input type="text" class="form-control" value="@article.ArticleIntr" /></td>
                            <td><input type="text" class="form-control" value="@article.ArticleName" /></td>
                        </tr>
                    }
                }
            </table>
        </div>
        <div style="clear:both;float:right;">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </form>
</div>
复制代码

到这里我们需要实现的是点击提交后将页面上所有的数据都添加到后台【Blog b】属性,着重强调的是获取到b中属性Article要有两条我们渲染的数据。 

我们看看演示结果:

我们可以看到居然都为空,别着急,此时都会想到既然要获取到值,则文本的name属性要和类中的属性一一对应才是,说完就开干。

复制代码
  博客地址:<input type="text" name="BlogAddress" class="form-control" value="@Model.BlogAddress" /><br />
  博客名称:<input type="text" name="BlogName"    class="form-control" value="@Model.BlogName" /><br />



 <td><input type="text" name="ArticleIntr" class="form-control" value="@article.ArticleIntr" /></td>
 <td><input type="text" name="ArticleName" class="form-control" value="@article.ArticleName" /></td>
复制代码

进行如上设置后我们再来看看结果:

恩,有点小忧伤,对于Article这个集合属性数据并未添加到其中去,这个就是我们需要解决的问题。到了这里我寻思着是不是不能用html标签,需要用mvc自己来渲染成html标签才行呢?也就是说利用【 @Html.TextBoxFor() 】来进行渲染,此时是个集合,则只能用for循环来进行遍历,于是乎将数据渲染时修改成下面的这个样子。

复制代码
               @{
                    var j = 0;
                    for (var i = 0; i < Model.Article.Count; i++)
                    {
                        <tr>
                            <td>@(++j)</td>
                            <td>@Html.TextBoxFor(a => a.Article[i].ArticleIntr, new { @class="form-control"})</td>
                            <td>@Html.TextBoxFor(a => a.Article[i].ArticleName, new { @class="form-control"})</td>
                        </tr>
                    }
                }
复制代码

我们继续看看结果:

好了,我们终于得到我们想要的结果了,你是不是觉得就这么愉快的结束了呢?

实际需求

在项目中我们需要做的是添加,同时在页面开始时有几个默认的文本框且还需要动态添加行,这个时候我们又该如何做呢?我们一起来看看。

复制代码
               @{
                    if (Model.Article != null)
                    {
                        var j = 0;
                        for (var i = 0; i < Model.Article.Count; i++)
                        {
                            <tr>
                                <td>@(++j)</td>
                                <td>@Html.TextBoxFor(a => a.Article[i].ArticleIntr, new { @class = "form-control" })</td>
                                <td>@Html.TextBoxFor(a => a.Article[i].ArticleName, new { @class = "form-control" })</td>
                            </tr>
                        }
                    }
                    else 
                    {
                        
                    }
                }
复制代码

如果默认没有值时,我们则需要自己添加默认的文本,此时该如何添加,我们想想当直接利用htm文本标签和利用Html.TextBoxFor渲染的效果有何不同?看看如下:

复制代码
//Html标签
<input type="text" name="ArticleIntr" class="form-control" value="WebAPi">


//Html.TextBoxFor()
<input class="form-control" id="Article_1__ArticleIntr" name="Article[1].ArticleIntr" type="text" value="Angular">
复制代码

这个时候我们恍然大悟,既然是集合那么name则是取到对应的索引值,我们照样画葫芦,于是我们修改成如下:

复制代码
                @{
                    if (Model.Article != null)
                    {
                        var j = 0;
                        for (var i = 0; i < Model.Article.Count; i++)
                        {
                            <tr>
                                <td>@(++j)</td>
                                <td>@Html.TextBoxFor(a => a.Article[i].ArticleIntr, new { @class = "form-control" })</td>
                                <td>@Html.TextBoxFor(a => a.Article[i].ArticleName, new { @class = "form-control" })</td>
                            </tr>
                        }
                    }
                    else
                    {
                        var j = 0;
                        for (var i = 0; i < 3; i++)
                        {
                            <tr id="trs">
                                <td>@(++j)</td>
                                <td><input type="text" name="Article[@i].ArticleIntr" class="form-control" /></td>
                                <td><input type="text" name="Article[@i].ArticleName" class="form-control" /></td>
                            </tr>
                        }
                    }
                }
复制代码

动态添加时的操作:

复制代码
        $("#btnAdd").on("click", function () {
            var trLen = $("#tb tr[id='trs']").length;
            var $lastTr = $("#tb tr[id='trs']").last();
            var tr = "<tr id='trs'>";
            tr += "<td>" + (trLen + 1) + "</td>";
            tr += "<td><input type='text' name='Article[" + trLen + "].ArticleIntr' class='form-control' /></td>";
            tr += "<td><input type='text' name='Article[" + trLen + "].ArticleName' class='form-control' /></td>";
            tr += "</tr>";
            $(tr).insertAfter($lastTr);
        });
复制代码

完整效果如下:

至此我们的需求才算结束。

总结

项目中渲染视图都是采用MVC中Razor渲染的方式,所以在做的时候也是跟着项目同样的风格去做,做的时候才发现这个问题并解决了下,学习,学习,可能还有其他解决方案,这也算是其中一种吧。







本文转自Jeffcky博客园博客,原文链接:http://www.cnblogs.com/CreateMyself/p/6031621.html,如需转载请自行联系原作者

目录
相关文章
|
10天前
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
10 0
|
10天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
27 0
|
10天前
|
存储 测试技术 计算机视觉
高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据
高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据
|
10天前
|
SQL 数据库
使用ADO.NET查询和操作数据
使用ADO.NET查询和操作数据
12 0
|
10天前
|
开发框架 前端开发 .NET
进入ASP .net mvc的世界
进入ASP .net mvc的世界
34 0
|
6月前
|
前端开发 Java Spring
Spring MVC拦截器+注解方式实现防止表单重复提交
Spring MVC拦截器+注解方式实现防止表单重复提交
|
10天前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
124 5
|
10天前
|
SQL 开发框架 .NET
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
75 0
|
10月前
|
开发框架 缓存 JSON
ASP.NET Core MVC 从入门到精通之Filter
ASP.NET Core MVC 从入门到精通之Filter
128 0
|
10天前
|
存储 前端开发 Java
Spring Boot中Spring MVC的表单标签库与数据绑定讲解与实战(附源码 超详细必看)
Spring Boot中Spring MVC的表单标签库与数据绑定讲解与实战(附源码 超详细必看)
38 0