ASP.Net MVC:如何使用editorfor和editor模板生成html表 [英] ASP.Net MVC: How to generate html table using editorfor and editor template
问题描述
现在我仍然像下面的代码示例一样生成html表，但是想知道如何使用editor来使用编辑器模板来生成html表
still now i generate html table like below code example but interested to know how could i generate html table using editorfor using editor template
查看我的完整剃须刀并查看模型代码，并指导我如何实现目标.
see my full razor and view model code and guide me how to achieve my goal.
@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>
}
查看模型代码
public class StudentListViewModel
{
public IList<Student> Students { get; set; }
public List<Country> Country { get; set; }
public List<Sex> Sex { get; set; }
public StudentListViewModel()
{
Students = new List<Student>
{
new Student
{
ID=1,Name="Keith",CountryID=0,SexID="F",
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"}
};
Sex = new List<Sex>
{
new Sex{ID="M",SexName="Male"},
new Sex{ID="F",SexName="Female"}
};
}
}
请指导我如何重组我的剃刀代码，以使用editorfor和editor模板获取干净的代码.编辑器模板的名称是什么?
please guide me how to restructure my razor code to use editorfor and editor template for clean code. what will be name of editor template ?
谢谢
推荐答案
要使用@Html.EditorFor(m => m.SomeProperty)(其中SomeProperty是复杂对象或复杂对象的集合)使用EditorTemplate，则必须放置模板在/Views/Shared/EditorTemplates或/Views/YourControllerName/EditorTempates文件夹中，并命名为与SomeProperty的类名相同.
To use an EditorTemplate using @Html.EditorFor(m => m.SomeProperty) (where SomeProperty is a complex object, or collection of complex objects), then the template must be located in the /Views/Shared/EditorTemplates or /Views/YourControllerName/EditorTempates folder, and be named the same as the class name for SomeProperty.
在您的情况下，如果要为typeof Student使用EditorTemplate，则该模板(局部视图)将被命名为Student.cshtml.
In your case, if you want an EditorTemplate for typeof Student, then the template (a partial view) will be named Student.cshtml.
@model yourAssembly.Student
<tr>
<td>@Html.TextBoxFor(m => m.ID)</td>
<td>@Html.TextBoxFor(m => m.Name)<td>
....
<tr>
在主视图中，您将使用
<table>
<thead> .... </thead>
<tbody>
@Html.EditorFor(m => m.Students)
</tbody>
</table>
这将为您的收藏夹中的每个项目生成正确的html.
which will generate the correct html for each item in your collection.
但是，由于您还具有CountryID的下拉列表，因此您需要使用additionalViewData将SelectList传递给模板(该模板不了解父模型)，因此代码必须为修改为
However, since you also have a dropdownlist for CountryID, then you need to pass the SelectList to the template (the template has no knowledge of the parent model) using additionalViewData, so the code needs to be modified to
@Html.EditorFor(m => m.Students, new { Countries = Model.Countries})
StudentListViewModel中的Countries属性应位于的位置
where the Countries property in StudentListViewModel should be
public IEnumerable<SelectListItem> Countries { get; set; }
并删除您当前的List<Country> Country属性.然后在视图中使用
and delete you current List<Country> Country property. Then in the view generate the dropdownlist using
<td>@Html.DropDownListFor(m => m.CountryID, (IEnumerable<SelectListItem>)ViewData["Countries "], "-- Select Country--", new { ... })<td>
请注意，您不应添加new { id = "cboCountry" }，因为它会创建无效的html(重复的id属性).
Note you should not be adding new { id = "cboCountry" } because its creating invalid html (duplicate id attribute).
现在，您可以通过为Hobby创建一个EditorTemplate(将其命名为Hobby.cshtml
Now you can extend this further by creating an EditorTemplate for Hobby (which will be named Hobby.cshtml
@model yourAssembly.Hobby
<div class="checkbox">
@Html.HiddenFor(m => m.ID)
@Html.HiddenFor(m => m.Name)
@Html.CheckBoxFor(m => m.Checked)
@Html.LabelFor(m => m.Checked, Model.Name)
</div>
请注意，LabelFor()应该用于Checked属性，而不是当前使用的Name属性.
Note the LabelFor() should be for the Checked property, not the Name property as you currently have it.
然后在您的Student.cshtml模板中，使用
Then in your Student.cshtml template, use
<td>@Html.EditorFor(m => m.Hobbies)<td>
为每个Hobby生成正确的html.
to generate the correct html for each Hobby.
这篇关于ASP.Net MVC:如何使用editorfor和editor模板生成html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
