Multiple forms on mvc4 page, submit one form

Question

I'm facing an issue with listing multiple forms, incl submit buttons. When clicking the first button it posts correctly, but when I click the second submit button it submits an empty collection... Below is my code:

Index.cshtml

@model MVCFormsSubmitting.Models.FormsRepository
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
@for (int i = 0; i < Model.UserInfo.Count; i++)
{
    using (Html.BeginForm("Index", "Forms", FormMethod.Post, new {name = "Form" + @i}))
    {
         <b>@Html.EditorFor(m => m.UserInfo[i].Name)</b>
         <input name="button @i" type="submit" class="left btn btn-primary" value="Ret navne">
         <br/>
    }
}

Formsrepository.cs

namespace MVCFormsSubmitting.Models
{
  public class Info
  {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Age { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
  }

  public class FormsRepository
  {
    public FormsRepository ()
    {
      this.UserInfo = new List<Info>();
    }

    public List<Info> UserInfo { get; private set; }

    public async Task Load()
    {
      this.UserInfo.Clear();
      UserInfo = await LoadUsers();

    }

    public async static Task<List<Info>> LoadUsers()
    {
      List<Info> info = new List<Info>();

      info.Add(new Info(){
        Age = "32,",
        Email = "mail@mail.com",
        Name = "John Doe",
        Phone = "123456749",
        Id = 0

      });

      info.Add(new Info()
        {
          Age = "36",
          Email = "exmaple@example.com",
          Name = "Jane Doe",
          Phone = "987654321",
          Id = 1
        });

      return info;
    }
  }
}

FormsController.cs

public class FormsController : Controller
{
  //
  // GET: /Forms/
  public ActionResult Index()
  {
    FormsRepository.Load();

    return View(FormsRepository);
  }

  [HttpPost]
  public ActionResult Index(FormsRepository text)
  {
    return RedirectToAction("Index");
  }

  private static FormsRepository _repository;

  public static FormsRepository FormsRepository
  {
    get
    {
      if (_repository == null)
      {
        _repository = new FormsRepository();
      }

      return _repository;
    }
  }
}

When setting a breakpoint at the HttpPost action in the Formscontroller you will see when clicking the submit button on the first will send 1 item, but when clicking the second button the item is null ...

please help :)

Answer 1

I did some changes to make this code work!

1) Change the controller/view to Render each UserInfo as a strongly typed partial view:

// This method will receive an info to process, so the model binder will build the model    back in the server correctly
[HttpPost]
public ActionResult Index(Info userInfo)
{
  return RedirectToAction("Index");
}

// This method will render a partial view for a user info
[ChildActionOnly]
public ActionResult GetUserInfo(Info userInfo)
{
  return PartialView("_UserInfo", userInfo);
}

2) Change the view to render a partial view for each user info in the repository:

@model MVCFormsSubmitting.Models.FormsRepository
@{
   ViewBag.Title = "Index";
   Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
@for (int i = 0; i < Model.UserInfo.Count; i++)
{
  {Html.RenderAction("GetUserInfo", Model.UserInfo[i]);}
}

3) Create a Partial view to render an user info "_UserInfo":

@model MVCFormsSubmitting.Models.Info

@using (Html.BeginForm("Index", "Forms", FormMethod.Post, new { id = "Form" + @Model.Id, name = "Form" + @Model.Id }))
{
  <b>@Html.EditorFor(m => m.Name)</b>
  <input id="button_@Model.Id" name="button_@Model.Id" type="submit" class="left btn btn- primary" value="Ret navne">
  <br/>
}

Answer 2

Try this:

.... using (Html.BeginForm("Index", "Forms", FormMethod.Post, new {name = "Form" + i.ToString()})) ....

---