ASP.net MVC 3 handling multiple checkboxes in each row of my table

Question

I'm building an admin interface for a word guessing game so admin users are allowed to setup the game by selecting the words that will appear in the game and then select which letters in the words will be encoded.

MainGameTable Edit page.....

@model GameServer.ViewModels.GameTableModel

@section Javascript
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"    type="text/javascript"></script>
}



@{
    ViewBag.Title = "GameTableEdit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>GameTableEdit</h2>

@using (Html.BeginForm("GameTableEdit", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>GameTable</legend>
        @Html.HiddenFor(model => model.GameTableId)
        @Html.HiddenFor(model => model.GameTableNumber)

        <div class="editor-label">
            Table #: @Html.DisplayFor(model => model.GameTableNumber)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.SubjectId)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.SubjectId, new SelectList(Model.Subjects, "Key", "Value"))
            @Html.ValidationMessageFor(model => model.SubjectId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ComplexityId)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.ComplexityId, new SelectList(Model.Complexities, "Key", "Value"))
            @Html.ValidationMessageFor(model => model.ComplexityId)
        </div>

        <button type="submit" name="button" value="GetWords">Get Words</button>

                @Html.Partial("GameMatrix/_LineWordsTable", Model)

         <p>
           <button type="submit" name="button" value="Save">Save</button>
         </p>

    </fieldset>
}



<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Partial Page_for each of the words in the table

@model GameServer.ViewModels.GameTableModel
@if (Model.SelectedLinewords.Count != null && Model.SelectedLinewords.Count > 0)
{ 

    <table>
        <tr>
            <th>
                Select Word
            </th>
            <th>
                LineWord
            </th>
            <th>
                Characters to Display
            </th>
        </tr>


                    @Html.EditorFor(x => x.SelectedLinewords)


    </table>

}

The Editor Template for each row:

@model GameServer.ViewModels.SelectedLineWord
  <tr>   
<td>
    @Html.CheckBoxFor(x => x.isSelected)
</td> 
<td>
    @Html.DisplayFor(x => x.LineWord)
</td>     
<td>

    @Html.HiddenFor(x=>x.LineWordId)
    @Html.HiddenFor(x=>x.LineWord)
    @{ char[] lineword = Model.LineWord.ToCharArray(); }

    @for (int i = 0; i < Model.LineWord.Length; i++) 
    {

        <input type="checkbox" name="DisplayCharPosition"  value="@i" /> @lineword[i]
    }



</td>
</tr>

Here is my ViewModel

public class SelectedLineWord 
    {
        [Required]
        public Guid LineWordId { get; set; }

        [Required]
        public String LineWord { get; set; }


        public int[] DisplayCharPosition { get; set; }

        [Required]
        public bool isSelected { get; set; }

        public SelectedLineWord()
        {

        }

        public SelectedLineWord(Guid linewordid, String word, String displaycharposition)
        {
            LineWordId = linewordid;
            LineWord = word;
            String[] pos = displaycharposition.Split(',');

            DisplayCharPosition = new int[word.Length];

            for (int i = 0; i < word.Length; i++)
            {
                DisplayCharPosition[i] = 0;
            }

            for (int i = 0; i < pos.Length; i++)
            {
                DisplayCharPosition[Int32.Parse(pos[i])] = 1;
            }
        }

        public SelectedLineWord(Guid linewordid, String word, bool issel)
        {
            LineWordId = linewordid;
            LineWord = word;
            isSelected = issel;
        }

    } 

    public class GameTableModel
    {

        [Required]
        public Guid GameTableId { get; set; }

        [Required]
        public Guid GameMatrixId { get; set; }


        [Required]
        [Display(Name = "Table Subject")]
        public int SubjectId { get; set; }

        [Required]
        [Display(Name = "Minimum Complexity")]
        public int ComplexityId { get; set; }


        [Required]
        public int GameTableNumber { get; set; }

        [Required]
        [Display(Name = "Include a Bonus table")]
        public bool IsBonus { get; set; }

        [Display(Name = "Table Subject")]
        public Dictionary<int, string> Subjects;

        [Display(Name = "Minimum Complexity")]
        public Dictionary<int, int> Complexities;

        public List<GameTableLine> GameTableLines { get; set; }
        public List<SelectedLineWord> SelectedLinewords { get; set; }


        public GameTableModel ()
        {
            try
            {

                //get a connection to the database
                var data = new GameServerDataModelDataContext();

                //Fetch the subjects reference data
                var subjects = from c in data.Subjects orderby c.Subject1 select new { c.SubjectId, c.Subject1};

                Subjects = new Dictionary<int, string>();

                foreach (var subject in subjects)
                {
                    Subjects.Add(subject.SubjectId, subject.Subject1);
                }

                //Fetch the complexities questions
                Table<Complexity> dComplexities = data.GetTable<Complexity>();

                Complexities = new Dictionary<int, int> { { 0, 0 } };
                foreach (var complexity in dComplexities)
                {
                    if (complexity.Complexity1 != null)
                        Complexities.Add(complexity.ComplexityId, (int)complexity.Complexity1);
                }

            }
            catch (Exception ex)
            {
                //[TODO: Complete the exception handeling code.]
            }
        }
    }

My problem is when I hit the save button the model passed to the controller has everything populated correctly but returns null for the check boxes that where selected for the DisplayCharPosition. What i was expecting was an int[] populated with the index of the character selected for display.

Could someone please help me understand what I'm doing wrong?

Answer 1

I've manage to solve this (but i'm still open to suggestions for a better way to do it).

What I did was I changed the following line <input type="checkbox" name="DisplayCharPosition" value="@i" /> @lineword[i] to @Html.CheckBoxFor(x => x.DisplayCharPosition[i]) @lineword[i] and my model type to public bool[] DisplayCharPosition { get; set; } so that i store an array of bools. Now the bool array has a true/false value for each char that the user wants to display in the game table. I then store this in the database as a comma delimited string (e.g. 1,4,6 - which i later split so i know that char in pos 1, 4 and 6 must be displayed and the rest encoded).

I also changed my model as follows:

public class SelectedLineWord 
    {
        [Required]
        public Guid LineWordId { get; set; }

        [Required]
        public String LineWord { get; set; }


        public bool[] DisplayCharPosition { get; set; }

        [Required]
        public bool isSelected { get; set; }

        public SelectedLineWord()
        {

        }

        public SelectedLineWord(Guid linewordid, String word, String displaycharposition)
        {
            LineWordId = linewordid;
            LineWord = word;
            String[] pos = displaycharposition.Split(',');

            DisplayCharPosition = new bool[word.Length];

            //set all to false
            for (int i = 0; i < word.Length; i++)
            {
                DisplayCharPosition[i] = false;
            }

            //now only set the ones that were already in the db.
            for (int i = 0; i < pos.Length; i++)
            {
                DisplayCharPosition[Int32.Parse(pos[i])] = true;
            }
        }