Question

现在仍然生成html表，如下面的代码示例，但有兴趣知道如何使用editorfor使用编辑器模板生成html表

查看我的完整剃须刀并查看模型代码并指导我如何实现我的目标。

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

    }
}

请指导我如何重构我的剃刀代码以使用编辑器和编辑器模板来清理代码。什么是编辑模板的名称？

感谢

Answer 1

要使用EditorTemplate使用@Html.EditorFor(m => m.SomeProperty)（其中SomeProperty是复杂对象或复杂对象集合），则模板必须位于/Views/Shared/EditorTemplates或/Views/YourControllerName/EditorTempates文件夹，名称与SomeProperty的类名称相同。

在您的情况下，如果您希望EditorTemplate类型为Student，则模板（部分视图）将被命名为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。

但是，由于您还有CountryID的下拉列表，因此您需要使用SelectList将additionalViewData传递给模板（模板不了解父模型），所以代码需要修改为

@Html.EditorFor(m => m.Students, new { Countries = Model.Countries})

Countries中的StudentListViewModel属性应为

public IEnumerable<SelectListItem> Countries { get; set; }

并删除您当前的List<Country> Country媒体资源。然后在视图中使用

生成下拉列表

<td>@Html.DropDownListFor(m => m.CountryID, (IEnumerable<SelectListItem>)ViewData["Countries "], "-- Select Country--", new { ... })<td>

请注意，您不应添加new { id = "cboCountry" }，因为它会创建无效的html（重复的id属性）。

现在，您可以通过为EditorTemplate创建Hobby来进一步扩展这一点（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属性。

然后在您的Student.cshtml模板中，使用

<td>@Html.EditorFor(m => m.Hobbies)<td>

为每个Hobby生成正确的html。

ASP.Net MVC：如何使用editorfor和编辑器模板生成html表

查看型号代码

1 个答案: