How do I pass a list from a view to a controller?

Question

I have a view and inside I'm generating a list but I'm not being able to successfully pass it to the controller without the fields being null:

code on my view:

@using (Html.BeginForm("AddFOP", "Revenue", null,  FormMethod.Post, new { enctype = "multipart/form-data" }))
           {
              <table class="grid" style="margin-top: 15px">
                    <thead>
                        <tr>
                            <th>FOP</th>
                            <th>ORGN</th>
                            <th>PROGRAM</th>
                            <th>PERCENTAGE</th>
                            <th></th>

                        </tr>
                    </thead>
                    <tbody>               
                        @for (int i = 0; i < Model.editBillingFOPList.Count;i++ )
                        { 

                         <tr>
                            <td>@Html.TextBox("FOPList[" + @i + "].Fund", 
                                                Model.editBillingFOPList[i].Fund)</td>
                            <td>@Html.TextBox("FOPList[" + @i + "].ORGN", 
                                                Model.editBillingFOPList[i].ORGN)</td>
                            <td>@Html.TextBox("FOPList[" + @i + "].Program", 
                                                Model.editBillingFOPList[i].Program)</td>
                            <td>@Html.TextBox("FOPList[" + @i + "].Percentage", 
                                                Model.editBillingFOPList[i].Percentage)</td>
                        </tr>

this is the controller:

[HttpPost]
        public ActionResult AddFOP(List<BillingFOPModel> FOPList)
        {


            return View();
        }

my FOPList shows a count of 1 and if I expand it on debug mode it shows the list of the model but with null values - any thoughts?

My Model:

 public class BillingFOPModel
    {
        public string BillingArea;
        public string BillingAreaName;
        public string Fund;
        public string ORGN;
        public string Program;
        public string Percentage;
    }

This my ViewModel:

  public class EditBillingViewModel
        {   //declare attributes

            public List<BillingFOPModel> editBillingFOPList { get; set; }
            public string newBillingArea { get; set; }
            public string newBillingAreaName { get; set; }
            public string newFund { get; set; }
            public string newORGN { get; set; }
            public string newProgram { get; set; }
            public string newPercentage { get; set; }

            public EditBillingViewModel()
            {

            }

            //constructor that passes a list and 2 strings
            public EditBillingViewModel(List<BillingFOPModel> editBillingFOPList, string newBillingArea, string newBillingAreaName)
            {
                this.editBillingFOPList = editBillingFOPList;
                this.newBillingArea = newBillingArea;
                this.newBillingAreaName = newBillingAreaName;
            }

Answer 1

You are doing same mistake that new developers of mvc do mostly, your model has fields not properties so thats why you are not getting data posted.

Change fields to properties in your Model class:

public class BillingFOPModel
{
    public string BillingArea {get; set; }
    public string BillingAreaName { get; set;}
    public string Fund { get; set;}
    public string ORGN { get; set;}
    public string Program {get; set;}
    public string Percentage {get; set;}
}

SideNote:

Always use strongly typed helpers like TextBoxFor(), DropDownListFor() whenever possible.

Answer 2

Have a look at this: http://www.codeguru.com/csharp/.net/net_asp/mvc/using-display-templates-and-editor-templates-in-asp.net-mvc.htm

Using EditorTemplates means you don't need to have a for loop in your mark up therefore not having to worry so much about setting the correct name and id's on controls.