深圳网站建设 利科技有限公司,上海十大室内设计公司排名,个人网站官网,google浏览器官方功能需求描述 Q:在实际的开发中#xff0c;经常会遇到一个模型中包含有多个条目的表单。如何将数据提交到后台#xff1f; A: 以数组的形式提交到后台就Ok了(真的那么简单么#xff0c;如果再嵌套一层呢#xff1f;) A2#xff1a;拆分多个模型#xff0c;映射就没啥问题…功能需求描述 Q:在实际的开发中经常会遇到一个模型中包含有多个条目的表单。如何将数据提交到后台 A: 以数组的形式提交到后台就Ok了(真的那么简单么如果再嵌套一层呢) A2拆分多个模型映射就没啥问题了。但......有点麻烦啊~~ 接下来说说如何将下面的模型提交到后台 /// summary/// 计划模型/// /summarypublic class PlanModel{public int Id{ get; set; }/// summary/// 计划名称/// /summarypublic string PlanName { get; set; }/// summary/// 描述/// /summarypublic string Remark { get; set; }/// summary/// 方案集合/// /summarypublic ListCaseModel Cases { get; set; }}/// summary/// 方案模型/// /summarypublic class CaseModel{public int Id{ get; set; }/// summary/// 标题/// /summarypublic string Title { get; set; }/// summary/// 描述/// /summarypublic string Description { get; set; }/// summary/// 作者/// /summarypublic string Author { get; set; }} 根据此模型编辑的页面会如下图所示一些基本信息加上可增可减的条目 实现效果 如何实现这个功能(asp.net mvc) 新建视图页面(略)条目的显示增加删除 控制器代码 public class HomeController : Controller{[HttpGet]public ActionResult Index(){var model new PlanModel() {};return View(model);}public ActionResult CaseRow(){return View(_CaseRow, new CaseModel());}[HttpPost]public ActionResult Form(PlanModel model){return Json(model);}} 编辑页条目显示代码 div classform-grouplabel classcol-sm-3 control-label计划方案/labeldiv classcol-sm-7 table classtable table-bordered table-condensedtheadtr classtext-centerth classtext-center方案名称/thth classtext-center方案作者/thth classtext-left方案描述/thth classtext-center width100span操作/spanspan title添加方案 idadd_case classglyphicon glyphicon-plus/span/th/tr/theadtbody idcase_listif (Model.Cases ! null){foreach (var item in Model.Cases){Html.RenderPartial(_CaseRow, item);}}/tbody/table/div/div 页面增加/删按钮js代码 验证 script src~/Scripts/jquery.validate.min.js/script
script src~/Scripts/jquery.validate.unobtrusive.min.js/script
script typetext/javascript$(function () {$(#case_list).delegate(.del_tr, click, function () {$(this).closest(tr).remove();});$(#add_case).click(function () {//ajax请求返回新增方案视图代码$.get(Url.Action(CaseRow), function (data) {$(#case_list).append(data);//重置验证模型$(form).removeData(validator).removeData(unobtrusiveValidation);$.validator.unobtrusive.parse($(form));});});});
/script _CaseRow.cshtml分部视图代码 若要以集合/数组的形式提交到后台须以name[]的格式提交所以我能想到的就是这样去写(这种方案不可取!!) 但是这样写的话且不说太麻烦验证也不行一不小心也就写错了。所以这种方案并不可取 { Layout null;KeyValuePairstring, string keyValuePair new KeyValuePairstring, string(Cases, Guid.NewGuid().ToString(N));var prefix keyValuePair.Key[keyValuePair.Value].;
}
model MvcDemo.Models.CaseModel
trtdinput typehidden name(keyValuePair.Key.index) valuekeyValuePair.Value/input typehidden classform-control name(prefix)Id valueModel.Id /input typetext classform-control name(prefix)Title valueModel.Title //tdtdHtml.TextBox(prefixnameof(Model.Author),Model.Author, new { class form-control })/tdtdHtml.TextBox(prefix nameof(Model.Description), Model.Description, new { class form-control })/tdtd classtext-centerspan classdel_tr glyphicon glyphicon-remove-circle/span/td
/tr 而后发现大神写的一个HtmlPrefixScopeExtensions扩展类可自动生成的表单前缀标识使用方便也能够使用验证 只需将表单包裹在using (Html.BeginCollectionItem(子集合的属性名称)){}中即可文末分享 { Layout null;
}
model MvcDemo.Models.CaseModel
using MvcDemo.Extensions
trusing (Html.BeginCollectionItem(Cases)){tdHtml.HiddenFor(e e.Id)Html.TextBoxFor(e e.Title, new { class form-control })Html.ValidationMessageFor(e e.Title)/tdtdHtml.TextBoxFor(e e.Author, new { class form-control })/tdtdHtml.TextBoxFor(e e.Description, new { class form-control })/tdtd classtext-centerspan classdel_tr glyphicon glyphicon-remove-circle/span/td}
/tr 然后提交表单可以发现格式如下并能取到数据 MvcDemo.Extensions命名空间下的HtmlPrefixScopeExtensions扩展类 命名空间自行引用 asp.net mvc版本 public static class HtmlPrefixScopeExtensions{private const string IdsToReuseKey __htmlPrefixScopeExtensions_IdsToReuse_;/// summary/// /// /summary/// param namehtml/param/// param namecollectionName/param/// param namecreateDummyForm是否使用虚拟表单,为了解决上下文中不存在表单,无法生成验证信息/param/// returns/returnspublic static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName,bool createDummyForm false, bool clientValidationEnabled false){if (clientValidationEnabled true)html.ViewContext.ClientValidationEnabled true;if (createDummyForm true){if (html.ViewContext ! null html.ViewContext.FormContext null){var dummyFormContext new FormContext();html.ViewContext.FormContext dummyFormContext;}}return BeginCollectionItem(html, collectionName, html.ViewContext.Writer);}private static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName, TextWriter writer){var idsToReuse GetIdsToReuse(html.ViewContext.HttpContext, collectionName);var itemIndex idsToReuse.Count 0 ? idsToReuse.Dequeue() : Guid.NewGuid().GetHashCode().ToString(x);writer.WriteLine(input type\hidden\ name\{0}.index\ autocomplete\off\ value\{1}\ /,collectionName, html.Encode(itemIndex));return BeginHtmlFieldPrefixScope(html, string.Format({0}[{1}], collectionName, itemIndex));}private static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix){return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);}private static Queuestring GetIdsToReuse(HttpContextBase httpContext, string collectionName){var key IdsToReuseKey collectionName;var queue (Queuestring)httpContext.Items[key];if (queue null){httpContext.Items[key] queue new Queuestring();var previouslyUsedIds httpContext.Request[collectionName .index];if (!string.IsNullOrEmpty(previouslyUsedIds))foreach (var previouslyUsedId in previouslyUsedIds.Split(,))queue.Enqueue(previouslyUsedId);}return queue;}internal class HtmlFieldPrefixScope : IDisposable{internal readonly TemplateInfo TemplateInfo;internal readonly string PreviousHtmlFieldPrefix;public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix){TemplateInfo templateInfo;PreviousHtmlFieldPrefix TemplateInfo.HtmlFieldPrefix;TemplateInfo.HtmlFieldPrefix htmlFieldPrefix;}public void Dispose(){TemplateInfo.HtmlFieldPrefix PreviousHtmlFieldPrefix;}}} asp.net core版本 public static class HtmlPrefixScopeExtensions{private const string IdsToReuseKey __htmlPrefixScopeExtensions_IdsToReuse_;public static IDisposable BeginCollectionItem(this IHtmlHelper html, string collectionName){return BeginCollectionItem(html, collectionName, html.ViewContext.Writer);}private static IDisposable BeginCollectionItem(this IHtmlHelper html, string collectionName, TextWriter writer){if (html.ViewData[ContainerPrefix] ! null)collectionName string.Concat(html.ViewData[ContainerPrefix], ., collectionName);var idsToReuse GetIdsToReuse(html.ViewContext.HttpContext, collectionName);var itemIndex idsToReuse.Count 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();string htmlFieldPrefix ${collectionName}[{itemIndex}];html.ViewData[ContainerPrefix] htmlFieldPrefix;/* * html.Name(); has been removed* because of incorrect naming of collection items* e.g.* let collectionName Collection* the first items name was Collection[0].Collection[GUID]* instead of Collection[GUID]*/string indexInputName ${collectionName}.index;// autocompleteoff is needed to work around a very annoying Chrome behaviour// whereby it reuses old values after the user clicks Back, which causes the// xyz.index and xyz[...] values to get out of sync.writer.WriteLine($input typehidden name{indexInputName} autocompleteoff value{html.Encode(itemIndex)} /);return BeginHtmlFieldPrefixScope(html, htmlFieldPrefix);}private static IDisposable BeginHtmlFieldPrefixScope(this IHtmlHelper html, string htmlFieldPrefix){return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);}private static Queuestring GetIdsToReuse(HttpContext httpContext, string collectionName){// We need to use the same sequence of IDs following a server-side validation failure,// otherwise the framework wont render the validation error messages next to each item.var key IdsToReuseKey collectionName;var queue (Queuestring)httpContext.Items[key];if (queue null){httpContext.Items[key] queue new Queuestring();if (httpContext.Request.Method POST httpContext.Request.HasFormContentType){StringValues previouslyUsedIds httpContext.Request.Form[collectionName .index];if (!string.IsNullOrEmpty(previouslyUsedIds))foreach (var previouslyUsedId in previouslyUsedIds)queue.Enqueue(previouslyUsedId);}}return queue;}internal class HtmlFieldPrefixScope : IDisposable{internal readonly TemplateInfo TemplateInfo;internal readonly string PreviousHtmlFieldPrefix;public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix){TemplateInfo templateInfo;PreviousHtmlFieldPrefix TemplateInfo.HtmlFieldPrefix;TemplateInfo.HtmlFieldPrefix htmlFieldPrefix;}public void Dispose(){TemplateInfo.HtmlFieldPrefix PreviousHtmlFieldPrefix;}}} 命名空间自行引用~~ End 完整源码https://coding.net/u/yimocoding/p/WeDemo/git/tree/MvcFormExt/MvcFormExt/MvcDemo 转载于:https://www.cnblogs.com/morang/p/7593215.html
