Saving a series of create forms with one submit button in ASP.Net MVC

Question

To give some background on my issue:

I have 3 tables called Products, Packages, and PackageContents. I can go in my application and add products, and then I can create packages out of them. One of the steps of setting up a package is to create all the package contents. To do this, I've created a view that runs through all of the products and sets up a new package content for each - placing the packageID and productID in hidden fields. Then the user can select a dropdown for each one to indicate if the product is in the package, or not.

Here's my issue:

This renders a separate form for every product, each with it's own save button. I'd like to have one submit button that saves all of the new package contents at once. Can someone give me an example of how to write my POST method to loop over and save all new package contents and how I would make a button in my view that saves all of them at once?

My Model:

public class PackageContentViewModel
{
    //Properties
    public IEnumerable<Product> products { get; set; }
    public Product product { get; set; }
    public Package package { get; set; }
    public PackageContent packageContent { get; set; }

    //Constructor
    public PackageContentViewModel(int id)
    {
        CustomerRepository customerRepository = new CustomerRepository();
        package = customerRepository.GetPackage(id);
        products = customerRepository.FindAllProducts().ToList();

        foreach (var product in products)
        {
            PackageContent packageContent = new PackageContent();
            {
                packageContent.PackageID = id;
                packageContent.ProductID = product.ProductID;

            }
        }
    }

The Controller:

public ActionResult AddContents(int id)
    {
        Package package = customerRepository.GetPackage(id);

        return View(new PackageContentViewModel(id) { });
    }

The View:

<% foreach (var product in Model.products)
   { %>

        <% using (Html.BeginForm())
           {%>

    <fieldset>
        <legend><%= Html.Encode(product.ProductName) %></legend>

            <%= Html.Hidden("PackageContentsID") %>
            <%= Html.ValidationMessage("PackageContentsID", "*") %>

            <%= Html.Hidden("PackageID", Model.package.PackageID) %>
            <%= Html.ValidationMessage("PackageID", "*") %>

            <%= Html.Hidden("ProductID", product.ProductID) %>
            <%= Html.ValidationMessage("ProductID", "*") %>


            <label for="InPackage">InPackage:</label>
            <%= Html.TextBox("InPackage") %>
            <%= Html.ValidationMessage("InPackage", "*") %>

            <label for="Restricted">Restricted:</label>
            <%= Html.TextBox("Restricted") %>
            <%= Html.ValidationMessage("Restricted", "*") %>
            <input type="submit" value="Create" />
    </fieldset>

    <% } %>

<% } %>

EDIT

I decided to post the code that ended up working for me, in case anyone else comes along and needs the same help:

My View:

<% int i = 0; using (Html.BeginForm("CreateContents", "Packages", new { id = Model.package.PackageID }))
    {

        foreach (var product in Model.products)
            { 

                %>
            <fieldset>
                <legend><%= Html.Encode(product.ProductName)%></legend>
                    <%= Html.Hidden("PackageContents[" + i + "].PackageContentsID")%>
                    <%= Html.ValidationMessage("PackageContentsID", "*")%>

                    <%= Html.Hidden("PackageContents[" + i + "].PackageID", Model.package.PackageID)%>
                    <%= Html.ValidationMessage("PackageID", "*")%>

                    <%= Html.Hidden("PackageContents[" + i + "].ProductID", product.ProductID)%>
                    <%= Html.ValidationMessage("ProductID", "*")%>

                    <label for="InPackage">InPackage:</label>
                    <%= Html.TextBox("PackageContents[" + i + "].InPackage", "yes")%>
                    <%= Html.ValidationMessage("InPackage", "*")%>

                    <label for="Restricted">Restricted:</label>
                    <%= Html.TextBox("PackageContents[" + i + "].Restricted", "no")%>
                    <%= Html.ValidationMessage("Restricted", "*")%>
            </fieldset>
            <%

        ++i; } %>

                    <input type="submit" value="Add Contents" />

<% } %>

My Controller:

public RedirectToRouteResult CreateContents(int id, IList<PackageContent> PackageContents)
    {
        Package package = customerRepository.GetPackage(id);

        foreach (var packageContent in PackageContents)
        {

            customerRepository.Add(packageContent);
            customerRepository.Save();

        }
        return RedirectToAction("SetPrice", new { id = package.PackageID });
    }

Answer 1

Here you can read about binding to a list: Model binding to a list

This article is old, in newer MVC version you don't have to define <input type="hidden" name="products.Index" value="0" />, but the rest is valid.

EDIT

Answer to comment:

If only thing that you do is select if product is in the package or not, you can use MultiSelectList.

If you want to specify quantity or other attibutes, you can write:

<% int i = 0; using (Html.BeginForm()) {%>
    <% foreach (var product in Model.products) { %>
        <label for="Restricted"><%= product.Name %></label>
        <%= Html.Hidden("products[" + i + "].ProductId",product.id) %>
        <%= Html.TextBox("products[" + i + "].Quantity",0) %>
        <br/>
   <% ++i; } %>
<% } %>

Post action:

[HttpPost]
public ActionResult Edit(IList<PackageContent> products)

where PackageContent is

class PackageContent
{
    int ProductId{get;set;}
    int Quantity{get;set;}
}