動態表單上的MVC模型驗證？

Question

我有以下型號：

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;">&nbsp;</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 控制器上獲取字段值。

謝謝

Answer 1

這篇很棒的博客將幫助您了解默認模型綁定器將如何綁定列表和數組。 只需為您的頁面創建一個看起來像這樣的 ViewModel：

public class FileUploadViewModel
{
    public List<FileModel> lFileModels { get; set; }
}

然后在你的 "+" jQuery 函數中，確保生成的輸入名稱類似於lFileModels.[0].Title （或者它可能是lFileModels[0].Title ，只需單擊該鏈接，你就會弄清楚）

然后在控制器中獲取該信息，就像任何其他形式一樣！

[HttpPost]
public ActionResult Index(FileUploadViewModel viewModel)
{

}

編輯

MVC文件上傳的另一個鏈接

編輯 2

再次閱讀您的代碼后，我現在意識到驗證問題是由於在加載庫后添加了不顯眼的驗證。 您必須重新解析驗證器。

$("form").data("validator", null);
$.validator.unobtrusive.parse($("form"));

綁定適用於服務器端驗證和問題的第二部分。

編輯 3

要添加字段，而不是直接在 JS 中進行，您應該 Ajax 加載包含文件字段的表單部分。 當您單擊添加按鈕時，它會請求文件字段的部分視圖，在其發布數據中包含當前項目的列表。 局部視圖然后返回帶有額外字段的渲染視圖。 這只是一個想法。 我還沒有嘗試過，甚至沒有看到這個想法。 我只是想了一下，並認為我可以分享它。