ASP.NET MVC将DropDownList和Checkbox绑定到ViewModel

时间:2015-09-26 09:44:34

标签: c# asp.net-mvc html5

我有一份巨大的工作表格,我希望通过点击它们旁边的复选框来提高属性的优先级。

例如:

薪水X

TeamSize O

SomeTechnology X

检查X而O不是。

我遇到了一个问题,我需要在其旁边有一个下拉列表和复选框,然后将其绑定到viewModel。我无法完成最后一步。

的HomeController

public ActionResult CandidateRegister()
{
    CandidateRegisterViewModel viewModel = new CandidateRegisterViewModel();

    viewModel.SelectedEmploymentTypeViewModel = new SelectedEmploymentTypeViewModel()
    {
        EmploymentType =
            new SelectList(
                Enum.GetValues(typeof(Enums.EmploymentType)).Cast<Enums.EmploymentType>().Select(v => new SelectListItem
                {
                    Text = v.ToString(),
                    Value = ((int)v).ToString()
                }).ToList(), "Value", "Text"),
        Selected = false
    };

    return View(viewModel);
}    

的ViewModels

 public class CandidateRegisterViewModel
 {  
       public SelectedEmploymentTypeViewModel SelectedEmploymentTypeViewModel { get; set; }
 }          

 public class SelectedEmploymentTypeViewModel
 {
      public SelectList EmploymentType { get; set; }
      public bool Selected { get; set; }
      public int? SelectedEmployment { get; set; }
 }

EmploymentType enum

 public enum EmploymentType
 {
      [Display(Name = "Full Time")]
      FullTime,
      [Display(Name = "Part Time")]
      PartTime,
      Contract,
      Internship,
      Other
 }

CandidateRegister View

@model SourceTreeITMatchmaking.Models.CandidateRegisterViewModel    

<div class="white-container sign-up-form">
@using (Html.BeginForm("CandidateRegister", "Candidates"))
{ 
    <section>
         <h6 class="bottom-line">Essentials:</h6>

         <div class="row">
              <div class="col-sm-12">
                   <div class="col-sm-7" style="padding-left: 0;">

                        @Html.DropDownList("SelectedEmployment", Model.SelectedEmploymentTypeViewModel.EmploymentType)
                        @Html.CheckBox("Selected", Model.SelectedEmploymentTypeViewModel.Selected)

                   </div>
               </div>
          </div>
    </section>
</div>

     <hr class="mt60">
     <div class="clearfix">
         <input type="submit" class="btn btn-default btn-large pull-right" value="Register candidate!">
     </div>
}                   

这是我到目前为止所尝试的。 再一次,我想要实现的是我有一个我的EmploymentType枚举的下拉列表,旁边的复选框,然后将它绑定到SelectedEmploymentTypeViewModel,所以我可以把它放在CandidateRegisterViewModel(它有许多其他属性,如地址等。)

我希望你能帮我一点:)提前谢谢!

1 个答案:

答案 0 :(得分:0)

您无法将其绑定到视图模型的原因是您的输入名称不正确。要么将它们改为:

@Html.DropDownList("SelectedEmploymentTypeViewModel.SelectedEmployment", Model.SelectedEmploymentTypeViewModel.EmploymentType)

@Html.CheckBox("SelectedEmploymentTypeViewModel.Selected", Model.SelectedEmploymentTypeViewModel.Selected)

或者更好的解决方案是使用强类型助手:

<div class="row">
       <div class="col-sm-12">
          <div class="col-sm-7" style="padding-left: 0;">
              @Html.DropDownListFor(m=>m.SelectedEmploymentTypeViewModel.SelectedEmployment , Model.SelectedEmploymentTypeViewModel.EmploymentType)

              @Html.CheckBoxFor(m=>m.SelectedEmploymentTypeViewModel.Selected)

          </div>
     </div>
</div>

此外,如果您有多个嵌套模型,则可以为它们创建编辑器模板:

@model SourceTreeITMatchmaking.Models.SelectedEmploymentTypeViewModel

<section>
<h6 class="bottom-line">Essentials:</h6>
   <div class="row">
           <div class="col-sm-12">
              <div class="col-sm-7" style="padding-left: 0;">
                  @Html.DropDownListFor(m=>m.SelectedEmployment , Model.EmploymentType)    
                  @Html.CheckBoxFor(m=>m.Selected)

              </div>
         </div>
    </div>
</section>

将其保存在Views / Shared / EditorTemplates / SelectedEmploymentTypeViewModel.cshtml

然后在主视图中,您可以像这样使用它们:

@model SourceTreeITMatchmaking.Models.CandidateRegisterViewModel    

<div class="white-container sign-up-form">
@using (Html.BeginForm("CandidateRegister", "Candidates"))
{ 
      @Html.EditorFor(m=>m.SelectedEmploymentTypeViewModel)

     <hr class="mt60">
     <div class="clearfix">
         <input type="submit" class="btn btn-default btn-large pull-right" value="Register candidate!">
     </div>
}

通过这种方式,您将能够清理主视图,并在任何需要的地方封装和重用编辑器模板。