如何使用适当的技能显示剃刀复选框并在 post 方法上获取选中的复选框值？

Question

我正在创建一份注册表，其中包含如下详细信息：

FullName:Textbox
Email:Textbox
Skills:checkbox playing 
       checkbox dancing
       checkbox programming

我想像 this.but 一样显示我的视图，我遇到的唯一问题是我的复选框。

我的模特：

public class EmployeeModel
    {
        public int Id { get; set; }
        public string Fullname { get; set; }
        public List<SelectedSkillsModel> Skills { get; set; }
    } 

public class SelectedSkillsModel
    {
        public bool Selected { get; set; }
        public int Id { get; set; }
        public string Name { get; set; }
    }

我的控制器：

 public ActionResult Index()
        {
            var employeeModel = new EmployeeModel();
            employeeModel.Skills = GetSkills();
            return View(employeeModel);
        }


        private List<SelectedSkillsModel> GetSkills()
        {
            var Skills = new List<SelectedSkillsModel>();
            Skills.Add(new SelectedSkillsModel { Name = "Playing", Id = 1, Selected = false });
            Skills.Add(new SelectedSkillsModel { Name = "Dancing", Id = 2, Selected = false });
            Skills.Add(new SelectedSkillsModel { Name = "Music", Id = 3, Selected = false });
            Skills.Add(new SelectedSkillsModel { Name = "Programming", Id = 4, Selected = false });
            return Skills;
        }

这是我的观点：

<fieldset>
            <legend>EmployeeModel</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.Fullname)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Fullname)
                @Html.ValidationMessageFor(model => model.Fullname)
            </div>

            <div class="editor-field">
                @Html.TextBoxFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>

//What should i do here to display checkbox with appropraite skills???

            <div class="editor-label">
                @Html.LabelFor(model => model.Skills)
            </div>
            <div class="editor-field">
                @foreach (var item in Model.Skills)
              {
                  @Html.CheckBox();
              }
            </div>

当我提交注册表时，我应该在我的 EmployeeModel 模型中获得具有 Id、Selected 和 Name 值的适当技能。

注意：我想使用 Only Razor 复选框

我该怎么做？？？

Answer 1

您必须使用 Html.CheckBoxFor() 在 SelectedSkillsModel 中使用 bool 参数 Selected 属性并使用 Html.HiddenFor() 到 post 这样技能的id:

@for (int i = 0; i < Model.Skills.Count; i++)
{
    @Html.CheckBoxFor(m => m.Skills[i].Selected , new { id = "sikll_" + i })
    @Html.HiddenFor(m => m.Skills[i].Id)
    @Html.HiddenFor(m => m.Skills[i].Name)
    @Html.DisplayFor(m => m.Skills[i].Name)
}

Answer 2

您需要一个 for 循环或自定义 EditorTemplate for typeof SelectedSkillsModel

使用循环

for (int i = 0; i < Model.Skills.Count; i++)
{
  @Html.LabelFor(m => m.Skills[i].Selected)
  @Html.CheckBoxFor(m => m.Skills[i].Selected)
  @Html.HiddenFor(m => m.Skills[i].Id)
  ....
}

使用编辑器模板(/Views/Shared/EditorTemplates/SelectedSkillsModel.cshtml)

@model SelectedSkillsModel
@Html.LabelFor(m => m.Selected)
@Html.CheckBoxFor(m => m.Selected)
@Html.HiddenFor(m => m.Id)

并在主视图中

@model EmployeeModel
....
@Html.EditorFor(m => m.Skills)

如何使用适当的技能显示剃刀复选框并在 post 方法上获取选中的复选框值？

How to display razor checkbox with appropriate skills and get selected checkbox value on post method?

c#

checkbox

asp.net-mvc

razor