我有以下型号:
public class FileModel
{
public int Id { get; set; }
[Required(ErrorMessage = "Required")]
[StringLength(100, ErrorMessage = "Max is 100, Min is 3", MinimumLength = 3)]
public string Name { get; set; }
public string Path { get; set; }
[Required(ErrorMessage = "Required")]
public string FileTypeId { get; set; }
public DateTime RegistrationDate { get; set; }
}
以下是我的看法:
@using (Html.BeginForm("Index", "FileManagement", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table class="content-table" style="min-width: 600px; border-spacing: 15px;">
<tr>
<td colspan="4" class="table-header">New File
<div class="add-icon">+</div>
</td>
</tr>
<tr>
<td>Name: </td>
<td>@Html.TextBoxFor(q => q.NewFile.Name, new { maxlength = "100", id = "NewFile_Name1", name = "NewFile.Name1" })
<br />@Html.ValidationMessageFor(q => q.NewFile.Name)
</td>
<td>
<input type="file" id="FileUploadField1" /></td>
<td style="width: 16px; text-align: center;"> </td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
<script type="text/javascript">
$('.content-table .add-icon').click(function () {
var lastFileField = $('.content-table input[type="file"]').last();
var lastId = lastFileField.attr('id').replace(/\D*/g, '');
lastId = parseInt(lastId) + 1;
var newFields = '<tr>' +
'<td>Name : </td>' +
'<td><input data-val="true" data-val-length="Max chars is 100, Min chars is 3" data-val-length-max="100" data-val-length-min="3" data-val-required="Required" id="NewFile_Name' + lastId + '" name="NewFile.Name' + lastId + '" type="text" value="" /><br /><span class="field-validation-valid" data-valmsg-for="NewFile.Name' + lastId + '" data-valmsg-replace="true"></span></td>' +
'<td><input type="file" id="FileUploadField' + lastId + '"/></td>' +
'<td style="text-align:right;"><div class="delete-icon"></div></td>' +
'</tr>';
var lastTr = $(lastFileField).parents('tr:first')[0];
$(lastTr).after(newFields);
});
$('.content-table .delete-icon').live('click', function () {
$(this).parents('tr:first').remove();
});
</script>
}
如您所见,我们有一个用于上传一个或多个文件的表单。因此,我为用户添加了一个 + 按钮,他们可以在表单中添加一个文件字段。
用户必须输入文件名并选择要上传的文件。但是 MVC 客户端验证器只验证使用 Razor
添加的第一个输入。
如何强制 MVC 验证器验证客户端和服务器端的所有字段。
另一个问题是:
我们如何处理在 MVC Controller 中获取字段值。
谢谢
最佳答案
This great blog将帮助您了解默认模型绑定(bind)器将如何绑定(bind)列表和数组。只需为您的页面制作一个看起来像这样的 ViewModel:
public class FileUploadViewModel
{
public List<FileModel> lFileModels { get; set; }
}
然后在您的“+”jQuery 函数中,确保生成的输入名称类似于 lFileModels.[0].Title
(或者它可能是 lFileModels[0].Title
,只需单击该链接,您就会明白)
然后要在 Controller 中获取该信息,就像任何其他形式一样!
[HttpPost]
public ActionResult Index(FileUploadViewModel viewModel)
{
}
编辑
Another link用于MVC文件上传
编辑2
再次阅读您的代码后,我现在意识到验证问题是由于在加载库后添加了不显眼的验证。您必须重新解析验证器。
$("form").data("validator", null);
$.validator.unobtrusive.parse($("form"));
绑定(bind)适用于服务器端验证和问题的第二部分。
编辑3
要添加字段,而不是直接在 JS 中执行,您应该使用 Ajax 加载表单的文件字段部分。当您单击添加按钮时,它会请求文件字段的部分 View ,并在其发布数据中包含当前项目的列表。然后分部 View 返回带有额外字段的渲染 View 。这只是一个想法。我没有尝试过,甚至没有看到过这个想法。我只是想了一下,觉得我可以分享它。
关于c# - 动态表单上的 MVC 模型验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13049529/