如何在ASP.NET MVC中实现提交若干个某模型的数据（某Model的List或ICollection，大小不定）

背景说明

在ASP.NET MVC中，有一个我们经常使用且十分好用的功能——模型绑定。

即在页面中指定该页面将会使用到的数据模型Model，然后在“显示数据”或“提交数据”时，就可以很方便的获取数据内容。

通常情况下这两种场景都比较容易实现，特别是“显示数据”时，不管绑定的模型如何复杂都可以轻松的显示所有你想要的数据。

但是，“提交数据”时，就不一定那么简单了。特别是当模型中包含一个List或者ICollection数据（即实现集合类型接口的数据），且该数据中包含的item数量不确定时，情况就变的有些棘手了。

问题描述

下面举一个这种情况的例子

假如要给一个系统录入一个某业务的操作说明页面，页面包含如下内容：1）. 标题 2）. 业务介绍 3）. 操作步骤（录入前不确定多少步）

解决方案

因此，这个页面对应着如下模型 BusinessHelp

public class BusinessHelp
{
public string BusinessTitle{ get; set; }

public string BusinessDescription{ get; set; }

public virtual ICollection<StepDetail> StepDetails { get; set; }

}

在录入页面AddBusinessHelp.cshtml中，主要内容如下：

@model HospitalProject.Models.AdminModel.BusinessHelp

@using (Html.BeginForm("ActionName","ControllerName", FormMethod.Post))
{
@Html.TextBoxFor(m => m.BusinessTitle)
@Html.TextAreaFor(m => m.BusinessDescription)
<div id="movieEditor">
@foreach (StepDetail step in Model.StepDetails)
{
Html.RenderPartial("StepDetailItem", step);
}
</div>
<button id="#addAnother">添加步骤</button>
}

其中StepDetailItem的PartialView如下：

@model HospitalProject.Models.StepDetail

@using (Html.BeginCollectionItem("StepDetails"))
{
@Html.TextBoxFor(m => m.Title)
@Html.TextAreaFor(m => m.Content）
}

对应这个视图的Action中的代码如下：

private static BusinessHelp _currentBusiness;

private static BusinessHelp CurrentBusiness
{
get
{
if (_currentBusiness == null)
_currentBusiness = GetBusiness();
return _currentBusiness;
}
set
{
_currentBusiness = value;
}
}

private static BusinessHelp GetBusiness()
{
return new BusinessHelp
{
BusinessTitle = "",
BusinessDescription = "",

StepDetails = new List<StepDetail>() {
new StepDetail() { Title = "", Content = "", PageName = ""},
}
};
}

public ActionResult AddBusinessHelp()
{
return View(CurrentBusiness);
}

每次给视图传递一个“空内容”的Model。（只是实际字符串等内容为空，数据模型对象并不为null）

这样每次进行业务帮助页面的录入时，都会初始化第一步。后续再想添加第二部、第三部 ......都可以通过js添加，并绑定到模型（稍后提到~）

在AddBusinessHelp.cshtml中 添加如下js代码：

$(function () {
$("#addAnother").click(function () {
$.get('/Help/StepEntryRow?count='+(++count), function (template) {
$("#movieEditor").append(template);
});
});
}

其中StepEntryRow Action代码如下：

public ActionResult StepEntryRow(int count = -1)
{
if (count != -1)
{
ViewBag.StepNumber = count;
StepDetail sd = new StepDetail() { Title = "", Content = "", Type = Models.EnumModel.StepType.Detail };
return PartialView("StepDetailItem", sd);
}
else
return View("Error");
}

这样就基本完成了该功能的实现了。

下面贴出上述代码中的核心部分—— Html.BeginCollectionItem("StepDetails")

public static class CollectionEditingHtmlExtensions
{
/// <summary>
/// Begins a collection item by inserting either a previously used .Index hidden field value for it or a new one.
/// </summary>
/// <typeparam name="TModel"></typeparam>
/// <param name="html"></param>
/// <param name="collectionName">The name of the collection property from the Model that owns this item.</param>
/// <returns></returns>
public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName)
{
if (String.IsNullOrEmpty(collectionName))
throw new ArgumentException("collectionName is null or empty.", "collectionName");

string collectionIndexFieldName = String.Format("{0}.Index", collectionName);

string itemIndex = null;
if (html.ViewData.ContainsKey(JQueryTemplatingEnabledKey))
{
itemIndex = "${index}";
}
else
{
itemIndex = GetCollectionItemIndex(collectionIndexFieldName);
}

string collectionItemName = String.Format("{0}[{1}]", collectionName, itemIndex);

TagBuilder indexField = new TagBuilder("input");
indexField.MergeAttributes(new Dictionary<string, string>() {
{ "name", collectionIndexFieldName },
{ "value", itemIndex },
{ "type", "hidden" },
{ "autocomplete", "off" }
});

html.ViewContext.Writer.WriteLine(indexField.ToString(TagRenderMode.SelfClosing));
return new CollectionItemNamePrefixScope(html.ViewData.TemplateInfo, collectionItemName);
}

private const string JQueryTemplatingEnabledKey = "__BeginCollectionItem_jQuery";

public static MvcHtmlString CollectionItemJQueryTemplate<TModel, TCollectionItem>(this HtmlHelper<TModel> html,
string partialViewName,
TCollectionItem modelDefaultValues)
{
ViewDataDictionary<TCollectionItem> viewData = new ViewDataDictionary<TCollectionItem>(modelDefaultValues);
viewData.Add(JQueryTemplatingEnabledKey, true);
return html.Partial(partialViewName, modelDefaultValues, viewData);
}

/// <summary>
/// Tries to reuse old .Index values from the HttpRequest in order to keep the ModelState consistent
/// across requests. If none are left returns a new one.
/// </summary>
/// <param name="collectionIndexFieldName"></param>
/// <returns>a GUID string</returns>
private static string GetCollectionItemIndex(string collectionIndexFieldName)
{
Queue<string> previousIndices = (Queue<string>)HttpContext.Current.Items[collectionIndexFieldName];
if (previousIndices == null)
{
HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue<string>();

string previousIndicesValues = HttpContext.Current.Request[collectionIndexFieldName];
if (!String.IsNullOrWhiteSpace(previousIndicesValues))
{
foreach (string index in previousIndicesValues.Split(','))
previousIndices.Enqueue(index);
}
}

return previousIndices.Count > 0 ? previousIndices.Dequeue() : Guid.NewGuid().ToString();
}

private class CollectionItemNamePrefixScope : IDisposable
{
private readonly TemplateInfo _templateInfo;
private readonly string _previousPrefix;

public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName)
{
this._templateInfo = templateInfo;

_previousPrefix = templateInfo.HtmlFieldPrefix;
templateInfo.HtmlFieldPrefix = collectionItemName;
}

public void Dispose()
{
_templateInfo.HtmlFieldPrefix = _previousPrefix;
}
}
}

这样就能很方便的解决ASP.NET MVC提交包含集合类型且数量不定的数据时存在的问题。

希望这边博客对大家使用ASP.NET MVC编写web项目有所帮助，欢迎大家一起讨论和指正。