Cで複数の動的フォームを処理する方法＃

Question

ファイルをアップロードできるウェブサイトにページが必要です。各ファイルについて、名前とカテゴリが必要です。

[Required(ErrorMessage = "Please choose a file")] 
    [Display(Name = "File")] 
    public HttpPostedFileBase file { get; set; } 

    [Required(ErrorMessage = "A name is required")] 
    [Display(Name = "Name")] 
    public string name { get; set; } 

    [Display(Name ="Category")] 
    public string cat { get; set; } 

これは私のモデルです。私はいくつかの動的なフォームをしたい、私は、ユーザーがページ上の名前と各ファイルのカテゴリを持つ複数のファイルをアップロードする別のフォームを追加することができますボタンとフォームを意味します。私はこれをSymfony2でやったことがありますが、私はASP.NETでそれをどうやって行うのか分かりません。誰かが私を助けることができますか？

@model fileListModel 
<form> 
    //dynamic html(you can also use partial for this). When button will be clicked append following html using jquery $(form).append() 
    @{var key = [use some random id or guid]} 
    <input type="hidden" name="fileList.Index" value="@key" /> 
    <input type="text" name="fileList[@key].name" value="Name" /> 
    <input type="text" name="fileList[@key].cate" value="Category" /> 
    <input type="file" name="fileList[@key].file" value="Upload"/> 
    // end dynamic html 

    @{ key = [use some random id or guid]} 
    <input type="hidden" name="fileList.Index" value="@key" /> 
    <input type="text" name="fileList[@key].name" value="Name" /> 
    <input type="text" name="fileList[@key].cate" value="Category" /> 
    <input type="file" name="fileList[@key].file" value="Upload"/> 
    // end dynamic html 
</form> 

すぐ、Filelistを受け入れるようにコントローラのアクションメソッドを作成：

は

public class fileListModel{ 
    IList<yourModel> fileList {get;set;} 
} 

そしてかみそりビューで、この方法のようにフォームを作成する：第一次のような別のモデルを作成する時

Answer 1

以下は、this blogpostに基づく最小限の例です。デモのために、私のモデル名はFooです。ですから、これを読んだら、ファイル、名前、猫のプロパティを持つあなたのモデルでなければなりません。

まず、https://www.nuget.org/packages/BeginCollectionItem/をプロジェクトに追加します。

次に、ビューフォルダに部分的なビューを追加します。私は私の「_AddFile.cshtml」と命名しました：

@model WebApplication2.Models.Foo 

@using (Html.BeginCollectionItem("files")) 
{ 
    <div class="form-horizontal"> 
     <fieldset> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) 
       </div> 

       @Html.LabelFor(model => model.Cat, htmlAttributes: new { @class = "control-label col-md-2" }) 
       <div class="col-md-10"> 
        @Html.EditorFor(model => model.Cat, new { htmlAttributes = new { @class = "form-control" } }) 
       </div> 
      </div> 
     </fieldset> 
    </div> 
} 

は注意、Html.BeginCollectionItem("files")、これはコレクションを作成して、それは後にまとめてグループ化し、「ファイル」という名前のモデルにバインドされています。

当社のコントローラは次のようになります。あなたのビューで

public ActionResult Index() 
{ 
    //Initialize the view with an empty default entry 
    var vm = new List<Foo> { 
     new Models.Foo { 
      Cat ="foo", 
      Name =" bar" 
     } 
    }; 
    return View(vm); 
} 

//this calls your partial view and initializes an empty model 
public PartialViewResult AddFile() 
{ 
    return PartialView("_AddFile", new Foo()); 
} 

//note "files" name? The same as our collection name specified earlier 
[HttpPost] 
public ActionResult PostFiles(IEnumerable<Foo> files) 
{ 
    //do whatever you want with your posted model here 
    return View(); 
} 

、このフォームを使用します。

@model IEnumerable<WebApplication2.Models.Foo> 

@using (Html.BeginForm("PostFiles","Home", FormMethod.Post)) 
{ 
    <div id="FileEditor"> 
     @foreach (var item in Model) 
     { 
      Html.RenderPartial("_AddFile", item); 
     } 
    </div> 
    <div> 
     @Html.ActionLink("Add File", "AddFile", null, new { id = "addFile" }) <input type="submit" value="Finished" /> 
    </div> 

} 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
    <script> 
     $(function() { 
      $("#addFile").click(function() { 
       $.ajax({ 
        url: this.href, 
        cache: false, 
        success: function (html) { $("#FileEditor").append(html); } 
       }); 
       return false; 
      }); 
     }) 
    </script> 

} 

foreachループは、私たちの場合とちょうど1に、各モデルのエントリのための部分的なビューをレンダリングデフォルトエントリ。

JavaScriptループはPartialViewを呼び出し、既存のものの下に空のテンプレートをレンダリングします。

提出する呼び出し、その後、あなたが好きな方法であなたのファイルを扱うことができます：

---

---

---

Answer 2

public ActionResult upload(fileListModel fileList){ 
    //save them to db 
}