我们常常有这样的需求：控制器Save方法接收一个复杂的类型，例如：
public class VisitDetailViewModel
{
public WordViewModel Word { get; set; }
public IEnumerable<PhotoViewModel> Photos { get; set; }
}
public class WordViewModel
{
public Guid Id { get; set; }
[Required]
[Display(Name = "姓名")]
[MaxLength(10)]
public string Name { get; set; }
[Required]
[Display(Name = "留言")]
[MaxLength(100)]
public string Filepath { get; set; }
[Display(Name = "时间")]
public DateTime CreateTime { get; set; }
[Display(Name = "置顶")]
public bool IsTop { get; set; }
}
public class PhotoViewModel
{
public Guid Id { get; set; }
public Guid PhotoId { get; set; }
[Required]
[MaxLength(100)]
public string FilePath { get; set; }
public string AccessFilePath
{
get { return MediaService.GetFileAccessUrl(FilePath); }
}
[MaxLength(200)]
public string Description { get; set; }
}
对于单个属性，前端页面表单控件的name属性为XX.XX，对于数组属性，其控件name属性设置为XX[N].XX
代码如下：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>编辑会议</title> @Styles.Render("~/bundles/global/css") @Styles.Render("~/bundles/bootstrap-datetimepicker/css") <style type="text/css"> body { overflow-x: hidden; } </style> </head> <body> <section id="container"> <div class="panel"> <div class="panel-body"> <div class="col-xs-12"> <form class="form-horizontal" role="form"> @Html.HiddenFor(x => x.Word.Id) @Html.HiddenFor(x => x.Word.Filepath) <div class="form-group"> @Html.LabelFor(model => model.Word.Name, new { @class = "control-label col-xs-2" }) <div class="col-xs-5"> @Html.EditorFor(model => model.Word.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Word.Name, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Word.AccessPath, new { @class = "control-label col-xs-2" }) <div class="col-xs-10"> <img src="@Model.Word.AccessPath" /> </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Word.CreateTime, new { @class = "control-label col-xs-2" }) <div class="col-xs-5"> @Html.EditorFor(model => model.Word.CreateTime, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } }) @Html.ValidationMessageFor(model => model.Word.CreateTime, "", new { @class = "text-danger" }) </div> @Html.LabelFor(model => model.Word.IsTop, new { @class = "control-label col-xs-2" }) <div class="col-xs-3"> @Html.CheckBoxFor(x => x.Word.IsTop) </div> </div> <div class="form-group"> <label class="control-label col-xs-2">留影</label> <div class="col-xs-10"> <div class="col-xs-11"> <table id="table"></table> </div> <div class="col-xs-1"> <button class="btn btn-sm" id="btn-add"><i class="fa fa-plus"></i></button> </div> </div> </div> <div class="form-group"> <div class="col-xs-offset-5 col-xs-6"> <button type="submit" class="btn btn-primary"> <i class="fa fa-check"></i> 保存 </button> </div> </div> </form> </div> </div> </div> </section> </body> </html> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/global/js") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrap-datetimepicker/js") <script src="~/Scripts/jquery.form.min.js"></script> <script> var updateRowIndex; $(function() { var i = dialog.getFrameIndex(); // 提交表单 $("form").submit(function() { // 将table中的数据写到form中 var data = $('#table').bootstrapTable('getData'); var ok = true; $(data).each(function(index, item) { if (!item.FilePath || item.FilePath == '') { dialog.alert('请上传照片，点击【照片单元格】上传，点击【描述单元格】添加描述。', 2); ok = false; return false; } $('input[name="Photos[' + index + '].Id"]').remove(); $('input[name="Photos[' + index + '].PhotoId"]').remove(); $('input[name="Photos[' + index + '].FilePath"]').remove(); $('input[name="Photos[' + index + '].Description"]').remove(); $('form').append('<input type="hidden" name="Photos[' + index + '].Id" value="@Model.Word.Id"/>'); $('form').append('<input type="hidden" name="Photos[' + index + '].PhotoId" value="' + item.PhotoId + '"/>'); $('form').append('<input type="hidden" name="Photos[' + index + '].FilePath" value="' + item.FilePath + '"/>'); $('form').append('<input type="hidden" name="Photos[' + index + '].Description" value="' + item.Description + '"/>'); }); if (!ok) return false; $(this).ajaxSubmit({ type: "post", url: "@Url.Action("Save")", beforeSubmit: function (formData, jqForm) { return jqForm.validate().form(); }, success: function (responseText, statusText) { if (responseText.errCode == 0) { dialog.msg(responseText.errMsg); top.frames['ifr'].window.Visitor.refresh(); dialog.close(i); return; } dialog.alert(responseText.errMsg, 2); } }); return false; }); }); </script>