如何用c＃处理多个动态表单 [英] How to handle multiple dynamic form with c#

问题描述

我想在我的网站上可以上传文件的页面。对于每个文件我想要一个名称和一个类别。

  [必填项（ErrorMessage =请选择一个文件）] 
 [Display（Name =File） ] 
 public HttpPostedFileBase file {get;组; } 
 $ b $必需（ErrorMessage =需要名称）] 
 [显示（名称=姓名）] 
公共字符串名称{get;组; } 
 $ b $ [Display（Name =Category）] 
 public string cat {get;组; } 
  

这是我的模型。我想要一些动态表单，我的意思是一个带有按钮的表单，它允许用户在页面上添加另一个表单，以便为每个文件上载多个文件，并为其命名和分类。我已经用Symfony2完成了这一点，但我不知道如何用ASP.NET做到这一点。有人能帮助我吗 ？

解决方案

以下是基于

---

---

I want to have a page on my website where I can upload files. For each file I want to have a name and a category.

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

This is my model. I want to have some dynamic form, what I mean is a form with a button that allows the user to add another form on the page to upload multiple files with a name and a category for each file. I've done this with Symfony2, but I have no idea how to do it with ASP.NET. Can someone help me please ?

解决方案

The following is a bare minimum example based on this blogpost. For demo purposes, I've named my model Foo. So whenever you read this, this should be your model with file, name and cat properties.

First, add https://www.nuget.org/packages/BeginCollectionItem/ to your project.

Then, add a partial view to your Views folder. I've named mine "_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>
}

Note, the Html.BeginCollectionItem("files"), this is creating a collection, that is later grouped together and bound to your model named "files".

Our controller looks like this:

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

In your view, use this form:

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

}

The foreach loop renders a partial View for each model entry, in our case just one with a default entry.

The javascript loop then calls our PartialView and renders an empty template below the existing ones.

A call to submit, then lets you deal with your files in any way you want:

---

---

---

这篇关于如何用c＃处理多个动态表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！