ASP.Net MVC: How to associate hobbies with each student

Question

I am facing trouble to create association between student and hobbies. i am showing my data though editable webgrid. webgrid has textboxes for name, dropdown for country sel

Answer 1

I could restructure my view model,model and razor view code. here i like to give my updated code which is working fine.

This way i generate checkboxes in forloop.

grid.Column(header: "Hobbies",
format: @<text>
@for (var i = 0; i < Model.Students.FirstOrDefault().Hobbies.Count; i++)
{
    <div class="checkbox">
        @Html.HiddenFor(m => m.Students[rowNum - 1].Hobbies[i].ID)
        @Html.HiddenFor(m => m.Students[rowNum - 1].Hobbies[i].Name)
        @Html.CheckBoxFor(m => m.Students[rowNum - 1].Hobbies[i].Checked)
        @Html.LabelFor(m => m.Students[rowNum - 1].Hobbies[i].Name, Model.Students.FirstOrDefault().Hobbies[i].Name)
    </div>
}
</text>)

view model and model class code

public class StudentListViewModel
{
    public IList<Student> Students { get; set; }
    public List<Country> Country { get; set; }



    public StudentListViewModel()
    {
        Students = new List<Student>
        {
            new Student
            {
                ID=1,Name="Keith",CountryID=0,
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }

            },

            new Student
            {
                ID=2,Name="Paul",CountryID=2,
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }
            },

            new Student
            {
                ID=3,Name="Sam",CountryID=3,
                Hobbies= new List<Hobby>
                {
                    new Hobby{ID=1,Name="Football",Checked=false},
                    new Hobby{ID=2,Name="Hocky",Checked=false},
                    new Hobby{ID=3,Name="Cricket",Checked=false}
                }
            }
        };

        Country = new List<Country>
        {
            new Country{ID=1,Name="India"},
            new Country{ID=2,Name="UK"},
            new Country{ID=3,Name="USA"}
        };

    }
}

Model code

public class Student
{
    public int ID { get; set; }
    [Required(ErrorMessage = "First Name Required")]
    public string Name { get; set; }
    //[Required(ErrorMessage = "Last Name Required")]
    //public string LastName { get; set; }

    public int CountryID { get; set; }
    public IList<Hobby> Hobbies { get; set; }

}


public class Country
{
    public int ID { get; set; }
    public string Name { get; set; }
}

public class Hobby
{
    public int ID { get; set; }
    public string Name { get; set; }
    public bool Checked { get; set; }
}

Bit Different way done again

The same UI i also developed with html table. here i am sharing the razor code and rest of the model and model view code is same as before.

@model MVCCRUDPageList.Models.StudentListViewModel
@{
    ViewBag.Title = "Index";
}

<h2>CREATE TABULAR UI WITH HTML TABLE</h2>

@using (Html.BeginForm("Index", "HtmlTable", FormMethod.Post))
{
    <div class="form-group">
        <div class="col-md-12 table-responsive">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>
                        Row No
                    </th>
                    <th>
                        ID
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        Hobbies
                    </th>
                    <th>
                        Sex
                    </th>
                </tr>
                }
                @for (int x=0; x<=Model.Students.Count-1;x++)
                {

                    <tr>
                        <td>
                            <label>@(x+1)</label>
                        </td>
                        <td>
                            @Html.TextBoxFor(m => m.Students[x].ID)
                        </td>
                        <td>
                            @Html.TextBoxFor(m => m.Students[x].Name)
                        </td>
                        <td>
                            @Html.DropDownListFor(m => m.Students[x].CountryID,
                              new SelectList(Model.Country, "ID", "Name",  Model.Students[x].CountryID),
                             "-- Select Countries--", new { id = "cboCountry", @class = "edit-mode" })
                        </td>
                        <td>
                            @for (var i = 0; i < Model.Students.FirstOrDefault().Hobbies.Count; i++)
                            {
                                <div class="checkbox">
                                    @Html.HiddenFor(m => m.Students[x].Hobbies[i].ID)
                                    @Html.HiddenFor(m => m.Students[x].Hobbies[i].Name)
                                    @Html.CheckBoxFor(m => m.Students[x].Hobbies[i].Checked)
                                    @Html.LabelFor(m => m.Students[x].Hobbies[i].Name, Model.Students[x].Hobbies[i].Name)
                                </div>
                            }

                        </td>
                        <td>
                            @for (var i = 0; i < Model.Sex.Count; i++)
                            {
                                <div class="checkbox">
                                    @Html.HiddenFor(m => Model.Sex[i].ID)
                                    @Html.HiddenFor(m => Model.Sex[i].SexName)
                                    @Html.RadioButtonFor(m => m.Students[x].SexID, Model.Sex[i].ID)
                                    @Html.LabelFor(m => m.Students[x].SexID, Model.Sex[i].SexName)
                                </div>
                            }
                        </td>
                    </tr>
                }
            </table>
        </div>

        <input type="submit" value="Submit" />
    </div>
}
  [1]: https://stackoverflow.com/users/3559349/stephen-muecke