如何使用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。 有人能幫助我嗎 ？

Answer 1

首先，創建另一個模型，如下所示：

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

然后在razor視圖中以這種方式創建表單：

@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 ActionResult upload(fileListModel fileList){
    //save them to db
}

Answer 2

以下是基於此博客文章的最低限度的示例。 出於演示目的，我將模型命名為Foo 。 因此，每當您閱讀本文時，它都應該是具有文件，名稱和cat屬性的模型。

首先，將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")會創建一個集合，該集合隨后會組合在一起並綁定到名為“ 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循環為每個模型條目渲染一個局部視圖，在我們的示例中，只有一個帶有默認條目的視圖。

然后，javascript循環調用我們的PartialView，並在現有模板下方呈現一個空模板。

調用提交，然后讓您以所需的任何方式處理文件：

---

---

---