MVC 4 Passing a list from a view to a controller

Question

I'm new to MVC ASP and would need your assistance. I would like to pass a list from a view to controller but each time I submit my form, the list is empty (null) in the controller.

Here is my model:

namespace ArcheryComp.Models
   {
    [MetadataType(typeof(Participe))]
    public class Participe
    {

        [Required]
        [Display(Name = "Id Archer")]
        public int idArcher { get; set; }
        [Required]
        [Display(Name = "Id Tournoi")]
        public int IdTournament { get; set; }
        [Required]
        [Display(Name = "Division")]
        public int division { get; set; }
        [Required]
        [Display(Name = "Categorie")]
        public string categorie { get; set; }
        [Required]
        [Display(Name = "Score 1")]
        public int ArchScore1 { get; set; }

        [Display(Name = "X")]
        public int ArchScore1_X_6 { get; set; }

        [Display(Name = "10")]
        public int ArchScore1_10_5 { get; set; }
        [Required]
        [Display(Name = "Score 2")]
        public int ArchScore2 { get; set; }

        [Display(Name = "X")]
        public int ArchScore2_X_6 { get; set; }

        [Display(Name = "10")]
        public int ArchScore2_10_5 { get; set; }
        [Required]
        [Display(Name = "Total")]
        public int ArchTotalScore { get; set; }

        [Display(Name = "Total X")]
        public int ArchTotalScore_X_6 { get; set; }

        [Display(Name = "Total 10")]
        public int ArchTotalScore_10_5 { get; set; }

        public List<Participe> liste { get; set; }
    }
   }

Here is my controller:

namespace ArcheryComp.Controllers
   {
    public class ParticipeController : Controller
    {
        private ArcheryCompEntities db = new ArcheryCompEntities();
       ......
       [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult EncodeResult(IList<Participe> parti)

        {

            foreach (Participe item in parti)
            {


                var data = from part in db.Participe
                           where part.IdArcher == item.IdArcher &&  part.IdTournament == item.IdTournament
                           select part;                    

                item.ArchScore1 = item.ArchScore1;
                item.ArchScore2 = item.ArchScore2;
                item.ArchTotalScore = item.ArchTotalScore;
            }

And here is my view :

    @model List<ArcheryComp.Participe>

   @{
    ViewBag.Title = "EncodeResult";
   }


    <h2>Encoder Resultats</h2>


    @using (Html.BeginForm("EncodeResult","Participe",FormMethod.Post)) 
   {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false)
    <table>
        <tr>
            <th>
                @Html.LabelFor(model => Model[0].Archers.Nom)
            </th>
            <th>
                @Html.LabelFor(model => Model[0].Archers.Prenom)
            </th>
            <th>
                @Html.LabelFor(model => Model[0].Divisions.DivDescription)
            </th>
            <th>
                @Html.LabelFor(model => Model[0].Categorie)
            </th>
            <th>
                @Html.LabelFor(model => Model[0].ArchScore1, new {style =  "width: 10px;"})
            </th>
            <th>
                @Html.LabelFor(model => Model[0].ArchScore2, new {style = "width: 10px;"})
            </th>
            <th>
                @Html.LabelFor(model => Model[0].ArchTotalScore, new {style = "width: 10px;"})
            </th>
        </tr>
        @for(int i = 0; i < Model.Count() ; i++)
        {
            <tr>
                <td>                                        
                    @Html.TextBox("archers["+@i+"].IdArcher",  Model[i].Archers.Nom)
                    @Html.ValidationMessageFor(x => x[i].IdArcher)
                </td>
                <td> 
                    @Html.TextBox("archers["+@i+"].Prenom", Model[i].Archers.Prenom)
                </td> 
                 <td>
                     @Html.TextBox("archers["+@i+"].Division", Model[i].Divisions.DivDescription)
                     @Html.ValidationMessageFor(x => x[i].Divisions.Id)

                </td> 
                <td>
                     @Html.TextBox("archers["+@i+"].Categorie", Model[i].Categorie)
                    @Html.ValidationMessageFor(x => x[i].Categorie)
                </td>
                 <td> 
                    @Html.TextBox("suma["+@i+"]", Model[i].ArchScore1,  new{  @onchange = "updatesum()"})
                    @Html.ValidationMessageFor(x => x[i].ArchScore1)
                </td> 
                <td>>
                    @Html.TextBox("sumb["+@i+"]", Model[i].ArchScore2, new { @onchange = "updatesum()" })
                    @Html.ValidationMessageFor(x => x[i].ArchScore2)
                </td>
                <td> 
                    @Html.TextBox("sumt["+@i+"]", Model[i].ArchTotalScore, new { @onchange = "updatesum()" })
                    @Html.ValidationMessageFor(x => x[i].ArchTotalScore)
                </td> 
            </tr>
        }

    </table>
    <p>
        <input type="submit" value="Save" />
    </p>
   }

Can you please help sort this out ? Many thanks in advance !!!

Answer 1

I got it and it works thanks :) Nevertheless I still have a small question, I use the following (updatesum()) javascript to dynamically calculate in the field the sum of the archer's score in my view:

<td> 
                    @Html.TextBox("suma["+@i+"]", Model[i].ArchScore1,  new{ @onchange = "updatesum()"})
                    @Html.ValidationMessageFor(x => x[i].ArchScore1)
                </td> 
                <td>>
                    @Html.TextBox("sumb["+@i+"]", Model[i].ArchScore2, new { @onchange = "updatesum()" })
                    @Html.ValidationMessageFor(x => x[i].ArchScore2)
                </td>
                <td> 
                    @Html.TextBox("sumt["+@i+"]", Model[i].ArchTot`enter code here`alScore, new { @onchange = "updatesum()" })
                    @Html.TextBoxFor(x=>x[i].ArchTotalScore)
                    @Html.ValidationMessageFor(x => x[i].ArchTotalScore)
                </td> 

<script type="text/javascript">
        function updatesum() {
            for (i = 0; i < 15; i++) {
                var sua = "suma_" + i + "_";
                var sub = "sumb_" + i + "_";
                var sut = "sumt_" + i + "_";
                suma = document.getElementById(sua).value;
                sumb = document.getElementById(sub).value;
                sum = (suma - 0) + (sumb - 0);
                document.getElementById(sut).value = sum;
            }

        }

    </script>

Do you know if it is feasible to add the result of this javascript function into the TextBoxFor?

Answer 2

Your use of @Html.TextBox() where you give the input a name that has no relationship whatsoever to your model properties and means that you cannot bind to a collection when you submit.

For example you have a property string categorie which means that the name of the input would need to be name="[0].categorie, yet you create the input with name="archers[0].Categorie". Always use the strongly typed html helper (as you have done with ValidationMessageFor()

@Html.TextBoxFor(x => x[i].Categorie)
@Html.ValidationMessageFor(x => x[i].Categorie)

Side note: In your table headers it should be

<td>@Html.DisplayNameFor(m => m.Categorie)</td>

not @Html.LabelFor(). A <label> is a html accessibility element - clicking on it sets focus to the associated control, which in this case makes no sense since you have a table containing multiple controls for each property.