How to handle multiple dynamic form with c#

Question

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 ?

Answer 1

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:

---

---

---

Answer 2

At first create another model like following:

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

Then in the razor view create form like this way:

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

Now create a controller action method to accept the fileList:

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