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: @
@for (var i = 0; i < Model.Students.FirstOrDefault().Hobbies.Count; i++)
{
    

        @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)
    
}
)

view model and model class code

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



    public StudentListViewModel()
    {
        Students = new List
        {
            new Student
            {
                ID=1,Name="Keith",CountryID=0,
                Hobbies= new List
                {
                    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
                {
                    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
                {
                    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
        {
            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 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";
}

CREATE TABULAR UI WITH HTML TABLE

@using (Html.BeginForm("Index", "HtmlTable", FormMethod.Post))
{
    

        

            
                }
                @for (int x=0; x<=Model.Students.Count-1;x++)
                {

                    
                }
            

                

                    

                        Row No
                    
                    

                        ID
                    
                    

                        Name
                    
                    

                        Country
                    
                    

                        Hobbies
                    
                    

                        Sex
                    
                

                        

                            @(x+1)
                        
                        

                            @Html.TextBoxFor(m => m.Students[x].ID)
                        
                        

                            @Html.TextBoxFor(m => m.Students[x].Name)
                        
                        

                            @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" })
                        
                        

                            @for (var i = 0; i < Model.Students.FirstOrDefault().Hobbies.Count; i++)
                            {
                                

                                    @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)
                                
                            }

                        
                        

                            @for (var i = 0; i < Model.Sex.Count; i++)
                            {
                                

                                    @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)
                                
                            }
                        
                    
        

        
    
}
  [1]: https://stackoverflow.com/users/3559349/stephen-muecke