動的フォームでのMVCモデル検証？

Question

は、私は次のモデルがあります：あなたが見ることができるように、私たちは、1つまたは複数のファイルをアップロードするためのフォームを持っている

@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> 
} 

：

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; } 
} 

次
が私の見解です。だから、ユーザーに+ボタンを追加して、フォームにファイルフィールドを追加できるようにしました。

ユーザーはファイルの名前を入力し、アップロードするファイルを選択する必要があります。しかし、MVCクライアントバリデーターは、Razorで追加された最初の入力を検証するだけです。

MVCバリデータを強制的にクライアント側とサーバー側のすべてのフィールドを検証する方法はありますか。

もう一つの問題は、我々はMVCコントローラでのフィールド値を取得して処理することができますどのように
。

おかげ

Answer 1

This great blogは、デフォルトのモデルバインダーは、リストと配列をバインドする方法を理解するのに役立ちます。 （生成された入力名がlFileModels.[0].Titleのようなものであることを確認してください、あなたの「+」jQueryの機能で次に

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

またはそれだけでそのリンクをクリックして、lFileModels[0].Titleかもしれません。ただ、このように多少見えますあなたのページのためのViewModelを作ります

コントローラでその情報を取得するには、他の形式と同じです！

[HttpPost] 
public ActionResult Index(FileUploadViewModel viewModel) 
{ 

} 

編集

Another link MVCファイルのため、もう一度あなたのコードを読んだ後

編集2

をアップロードし、私は今、検証問題は控えめ追加によるものであることを実感ライブラリがロードされた後の検証。バリデータを再解析する必要があります。

このバインディングは、サーバー側の検証と質問の第2部に適用されます。

編集3

フィールドを追加し、代わりにストレートJSでそれを行うために、あなたは、Ajaxはファイルのフィールドを持つフォームのセクションをロードする必要があります。追加ボタンをクリックすると、それは、ポストデータに現在のアイテムのリストを含むファイルフィールドの部分的な表示を要求します。部分ビューは、追加のフィールドを含むレンダリングビューを返します。それは単なるアイデアです。私はそのアイデアを試したり、見たことがありません。私はちょうどそれについては、それを共有することができたと思った。