ASP.Net MVC:如何将兴趣爱好与每个学生联系起来 [英] ASP.Net MVC: How to associate hobbies with each student
本文介绍了ASP.Net MVC:如何将兴趣爱好与每个学生联系起来的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在建立学生与爱好之间的联系方面遇到了麻烦.我通过可编辑的webgrid显示我的数据. webgrid有用于名称的文本框，用于选择国家的下拉列表和用于兴趣爱好的复选框.
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.
这是我的UI外观
这样，我可以在每一行网络网格中生成复选框.
grid.Column(header: "Hobbies",
format: @<text>
@for (var i = 0; i < Model.Hobbies.Count; i++)
{
<div class="checkbox">
@Html.HiddenFor(m => m.Hobbies[i].ID)
@Html.HiddenFor(m => m.Hobbies[i].Name)
@Html.CheckBoxFor(m => m.Hobbies[i].Checked)
@Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)
</div>
}
</text>)
我的完整剃须刀代码
@model MVCCRUDPageList.Models.StudentListViewModel
@{
ViewBag.Title = "Index";
}
<h2>Student View Model</h2>
@using (Html.BeginForm("Index", "WebGridMoreControls", FormMethod.Post))
{
var grid = new WebGrid(Model.Students, canSort: false, canPage: false);
var rowNum = 0;
var SelectedHobbies = 0;
<div id="gridContent" style=" padding:20px; ">
@grid.GetHtml(
tableStyle: "table",
alternatingRowStyle: "alternate",
selectedRowStyle: "selected",
headerStyle: "header",
columns: grid.Columns
(
grid.Column(null, header: "Row No", format: item => rowNum = rowNum + 1),
grid.Column("ID", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].ID, new { @class = "edit-mode" })),
grid.Column("Name", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].Name, new { @class = "edit-mode" })),
grid.Column("Country", format: (item) =>
@Html.DropDownListFor(x => x.Students[rowNum - 1].CountryID,
new SelectList(Model.Country, "ID", "Name", item.CountryID),
"-- Select Countries--", new { id = "cboCountry", @class = "edit-mode" })),
grid.Column(header: "Hobbies",
format: @<text>
@for (var i = 0; i < Model.Hobbies.Count; i++)
{
<div class="checkbox">
@Html.HiddenFor(m => m.Hobbies[i].ID)
@Html.HiddenFor(m => m.Hobbies[i].Name)
@Html.CheckBoxFor(m => m.Hobbies[i].Checked)
@Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)
</div>
}
</text>)
))
<input type="submit" value="Submit" />
</div>
}
我的控制器和操作代码
public class WebGridMoreControlsController : Controller
{
// GET: WebGridMoreControls
public ActionResult Index()
{
StudentListViewModel osvm = new StudentListViewModel();
return View(osvm);
}
[HttpPost]
public ActionResult Index(StudentListViewModel oStudentListViewModel)
{
return View(oStudentListViewModel);
}
}
我的ViewModel代码
public class StudentListViewModel
{
public IList<Student> Students { get; set; }
public List<Country> Country { get; set; }
public IList<Hobby> Hobbies { get; set; }
public StudentListViewModel()
{
Students = new List<Student>
{
new Student{ID=1,Name="Keith",CountryID=0},
new Student{ID=2,Name="Paul",CountryID=2},
new Student{ID=3,Name="Sam",CountryID=3}
};
Country = new List<Country>
{
new Country{ID=1,Name="India"},
new Country{ID=2,Name="UK"},
new Country{ID=3,Name="USA"}
};
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}
};
}
}
我的模型代码
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 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; }
}
请帮助我我要实现的目标.谢谢
please help me what i am trying to achieve. thanks
@for (var i = 0; i < Model.Hobbies.Count; i++)
{
<div class="checkbox">
@Html.HiddenFor(m => m.Hobbies[i].ID)
@Html.HiddenFor(m => m.Hobbies[i].Name)
@Html.HiddenFor(m => m.Students[rowNum - 1].Hobbies[i].ID)
@Html.CheckBoxFor(m => m.Students[rowNum - 1].Hobbies[i].Checked)
@*@Html.CheckBoxFor(m => m.Hobbies[i].Checked)*@
@Html.LabelFor(m =>m.Hobbies[i].ID, Model.Hobbies[i].Name)
</div>
}
推荐答案
我可以重构视图模型，模型和剃刀视图代码.在这里，我想给我更新的代码，它工作正常.
I could restructure my view model,model and razor view code. here i like to give my updated code which is working fine.
这样，我就可以在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>)
查看模型和模型类代码
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"}
};
}
}
型号代码
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; }
}
再次以不同的方式完成
我也使用html表开发了相同的UI.在这里，我共享剃刀代码，其余模型和模型视图代码与以前相同.
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
这篇关于ASP.Net MVC:如何将兴趣爱好与每个学生联系起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
