How to post data from partial view in ASP.NET MVC3?

Question

I have a view using a viewmodel. In this view, I am using a partial view inside the @using (Html.BeginForm()) block code as given below

 @foreach (var party in Model.Participants)
                {
                    Html.RenderPartial("BlankEditorRow", party);
                }

Partial view has some text box fields, user can enter data in these fields. Now submit button is not placed inside partial view instead it in main view.

In my view when i click on submit button, i get null values in the viewmodel

[HttpPost]
    public ActionResult ActionName(ViewModel model)
    {

    }

I'm not sure about how to get the post data from partial views. Can anyone please help me understand how to post data from partial view? example would be a big help

Edit: Partial View given below :

@model ASPNETMVCApplication.Models.Administration.Account.PartyModel

@using HtmlHelpers.BeginCollectionItem

<tr class="editorRow">        
    @using (Html.BeginCollectionItem("party"))
    {

        <td>@Html.TextBoxFor(m => m.FirstName, new { @style = "width: 100px;" })
        </td>
        <td>@Html.TextBoxFor(m => m.LastName, new { @style = "width: 100px;" })
        </td>
        <td>
            @Html.DropDownListFor(model => model.PartyPersonalDetail.Gender, new SelectList(Model.Gender, "Id", "Name"), new { @style = "width: 100px;" })
        </td>
        <td>@Html.TextBoxFor(m => m.PartyPersonalDetail.MobilePhone, new { @style = "width: 100px;" })
        </td>
        <td>
            @Html.DropDownListFor(model => model.PartyPersonalDetail.GothraId, new SelectList(Model.Gothras, "Id", "GothraName"), "--Don't Know--", new { @style = "width: 122px;" })
        </td>
        <td>
            @Html.DropDownListFor(model => model.PartyPersonalDetail.NakshtraId, new SelectList(Model.Nakshtras, "Id", "NakshtraName"), "--Don't Know--", new { @style = "width: 122px;" })
        </td>
        <td>@Html.TextBoxFor(m => m.PartyPersonalDetail.EMail1, new { @style = "width: 135px;" })
        </td>
        <td>
            <a href="#" class="deleteRow">Delete</a>
        </td>

    }
</tr>

Answer 1

In order to post collections in MVC, they have to be indexed, so instead of that foreach, you need a for loop.

Try this:

@for(int i = 0; i < Model.Participants.Count; i++)
{
    Html.RenderPartial("BlankEditorRow", Model.Participants[i]);
}

Answer 2

Use editor template.

Let's assume your Viewmodel is like this

public EventViewModel
{
  public int ID { set;get;}
  public string EventName { set;get;}
  public List<Participant> Participants {set;get;}
  public EventViewModel()
  {
    Participants=new List<Participant>();
  }
}

public class Participant
{
  public string FirstName { set;get;}
  public string LastName { set;get;}
}

Create a Folder Called "EditorTemplates" under ~/Views/yourControllerNameFolder/ and create a view (the editor template) with the name Participant.cshtml.

Now add the code for your editor template

@model Participant
<p>
  @Html.TextBoxFor(x=>x.FirstName)
</p>
<p>
  @Html.TextBoxFor(x=>x.LastName)
</p>

Now in your Main View, Use the Html.EditorFor HTML helper method to call this editor template.

@model EventViewModel

@using (Html.BeginForm())
{
    <p>Event Name</p>
    @Html.TextBoxFor(x => x.EventName) 
    @Html.EditorFor(x=>x.Participants)
    <input type="submit" value="Save" />
}

Now when you post the form, you will get the Participant information in the Participants collection of your viewmodel.