1
Answer

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

Tridip Bhattacharjee

Tridip Bhattacharjee
7y
3.3k
1

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 selection and checkboxes for hobbies.

i want when user select each student hobbies...may be one or multiple and press submit button then i should be able to know each student's hobbies from student view model.

due to lack of knowledge i am not being able to do it.

this how my UI looks


 
 
This way i am generation checkboxes in each row webgrid.
  1. grid.Column(header: "Hobbies",  
  2. format: @<text>  
  3. @for (var i = 0; i < Model.Hobbies.Count; i++)  
  4. {  
  5. <div class="checkbox">  
  6. @Html.HiddenFor(m => m.Hobbies[i].ID)  
  7. @Html.HiddenFor(m => m.Hobbies[i].Name)  
  8. @Html.CheckBoxFor(m => m.Hobbies[i].Checked)  
  9. @Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)  
  10. </div>  
  11. }  
  12. </text>)  
my full razor code
  1. @model MVCCRUDPageList.Models.StudentListViewModel  
  2. @{  
  3. ViewBag.Title = "Index";  
  4. }  
  5.   
  6. <h2>Student View Model</h2>  
  7.   
  8. @using (Html.BeginForm("Index", "WebGridMoreControls", FormMethod.Post))  
  9. {  
  10. var grid = new WebGrid(Model.Students, canSort: false, canPage: false);  
  11. var rowNum = 0;  
  12. var SelectedHobbies = 0;  
  13.   
  14. <div id="gridContent" style=" padding:20px; ">  
  15. @grid.GetHtml(  
  16. tableStyle: "table",  
  17. alternatingRowStyle: "alternate",  
  18. selectedRowStyle: "selected",  
  19. headerStyle: "header",  
  20. columns: grid.Columns  
  21. (  
  22. grid.Column(null, header: "Row No", format: item => rowNum = rowNum + 1),  
  23. grid.Column("ID", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].ID, new { @class = "edit-mode" })),  
  24. grid.Column("Name", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].Name, new { @class = "edit-mode" })),  
  25.   
  26. grid.Column("Country", format: (item) =>  
  27. @Html.DropDownListFor(x => x.Students[rowNum - 1].CountryID,  
  28. new SelectList(Model.Country, "ID", "Name", item.CountryID),  
  29. "-- Select Countries--", new { id = "cboCountry", @class = "edit-mode" })),  
  30.   
  31. grid.Column(header: "Hobbies",  
  32. format: @<text>  
  33. @for (var i = 0; i < Model.Hobbies.Count; i++)  
  34. {  
  35. <div class="checkbox">  
  36. @Html.HiddenFor(m => m.Hobbies[i].ID)  
  37. @Html.HiddenFor(m => m.Hobbies[i].Name)  
  38. @Html.CheckBoxFor(m => m.Hobbies[i].Checked)  
  39. @Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)  
  40. </div>  
  41. }  
  42. </text>)  
  43. ))  
  44.   
  45. <input type="submit" value="Submit" />  
  46. </div>  
  47.   
  48. }  
My controller and action code
  1. public class WebGridMoreControlsController : Controller  
  2. {  
  3. // GET: WebGridMoreControls  
  4. public ActionResult Index()  
  5. {  
  6. StudentListViewModel osvm = new StudentListViewModel();  
  7. return View(osvm);  
  8. }  
  9.   
  10. [HttpPost]  
  11. public ActionResult Index(StudentListViewModel oStudentListViewModel)  
  12. {  
  13. return View(oStudentListViewModel);  
  14. }  
  15. }  
My ViewModel code
  1. public class StudentListViewModel  
  2. {  
  3. public IList<Student> Students { get; set; }  
  4. public List<Country> Country { get; set; }  
  5.   
  6. public IList<Hobby> Hobbies { get; set; }  
  7.   
  8. public StudentListViewModel()  
  9. {  
  10. Students = new List<Student>  
  11. {  
  12. new Student{ID=1,Name="Keith",CountryID=0},  
  13. new Student{ID=2,Name="Paul",CountryID=2},  
  14. new Student{ID=3,Name="Sam",CountryID=3}  
  15. };  
  16.   
  17. Country = new List<Country>  
  18. {  
  19. new Country{ID=1,Name="India"},  
  20. new Country{ID=2,Name="UK"},  
  21. new Country{ID=3,Name="USA"}  
  22. };  
  23.   
  24. Hobbies = new List<Hobby>  
  25. {  
  26. new Hobby{ID=1,Name="Football",Checked=false},  
  27. new Hobby{ID=2,Name="Hocky",Checked=false},  
  28. new Hobby{ID=3,Name="Cricket",Checked=false}  
  29. };  
  30.   
  31. }  
  32. }  
My Model code
  1. public class Student  
  2. {  
  3. public int ID { get; set; }  
  4. [Required(ErrorMessage = "First Name Required")]  
  5. public string Name { get; set; }  
  6. //[Required(ErrorMessage = "Last Name Required")]  
  7. //public string LastName { get; set; }  
  8.   
  9. public int CountryID { get; set; }  
  10.   
  11. }  
  12.   
  13. public class Country  
  14. {  
  15. public int ID { get; set; }  
  16. public string Name { get; set; }  
  17. }  
  18.   
  19. public class Hobby  
  20. {  
  21. public int ID { get; set; }  
  22. public string Name { get; set; }  
  23. public bool Checked { get; set; }  
  24. }  
please help me what i am trying to achieve. thanks
 
Answers (1)
Next Recommended Forum