如何在ASP.Net中使用多個複選框mvc3 Razor

Question

在我的ASP.Net MVC3 Razor項目我必須執行一個客戶註冊表單（Screen Shot Attached）。在該表單中，單個實體（說：目的是做DMIt）包含多個答案。因此我使用複選框來選擇多個或單個答案。我有視圖頁面，也有一個Model.How編碼View頁面來選擇多個複選框，也在Controller中。

控制器代碼

public ActionResult CustomerRegistration() 
     { 
      return View(); 
     } 

型號代碼

namespace Elixir.Models 
{ 
    [Table("tbl_ElixirCustomer")] 
    public class Customer 
    { 
     [Key] 
     public int CusId { get; set; } 
     public string Name { get; set; } 
     public int age { get; set; } 
     public int Gender { get; set; } 
     public string FathName { get; set; } 
     public string MothName { get; set; } 
     public string OrgSchooName { get; set; } 
     public string Address { get; set; } 
     public string city { get; set; } 
     public string State { get; set; } 
     public string PIN { get; set; } 
     public string tele { get; set; } 
     public string Mob { get; set; } 
     public string Email { get; set; } 
     public string Web { get; set; } 
     public string Purpose { get; set; } 
     public string brief { get; set; } 

    } 

    public class CustomerViewModel 
    { 
     public string Purpose { get; set; } 
     public int Id { get; set; } 
     public bool IsChecked { get; set; } 

    } 
} 

查看代碼

<div class="col-lg-10">@Html.TextBoxFor(Model => Model.Mob, new { @class = "form-control" })</div> 
         <label class="col-lg-2 control-label"> 
          Email</label> 
         <div class="col-lg-10">@Html.TextBoxFor(Model => Model.Email, new { @class = "form-control" })</div> 
         <label class="col-lg-2 control-label"> 
          Web Site</label> 
         <div class="col-lg-10">@Html.TextBoxFor(Model => Model.Web, new { @class = "form-control" })</div> 

         <label class="col-lg-2 control-label"> 
          Purpose of doing DMIT</label> 
         <div class="col-lg-10"> 
          <div class="styled-chekbox"> 
           <input type="checkbox" checked class="icheck-box-flat"> 
          </div> 
          <span class="checkbox-label">Career Planning</span> 
          <div class="styled-chekbox"> 
           <input type="checkbox" checked class="icheck-box-flat"> 
          </div> 
          <span class="checkbox-label">Personel</span> 
          <div class="styled-chekbox"> 
           <input type="checkbox" checked class="icheck-box-flat"> 
          </div> 
          <span class="checkbox-label">Relationship</span> 
          <div class="styled-chekbox"> 
           <input type="checkbox" checked class="icheck-box-flat"> 
          </div> 
          <span class="checkbox-label">Parenting</span> 
          <div class="styled-chekbox"> 
           <input type="checkbox" checked class="icheck-box-flat"> 
          </div> 
          <span class="checkbox-label">Activity Plan for children</span> 
          <div class="styled-chekbox"> 
           <input type="checkbox" checked class="icheck-box-flat"> 
          </div> 
          <span class="checkbox-label">Stress Management</span> 
         </div> 
         <label class="col-lg-2 control-label"> 
          Any Challenges</label> 
         <div class="col-lg-10">@Html.TextAreaFor(model => model.brief, new { @class = "tinymce-simple span12", @row = "170", @cols = "45", @width = "40%" })</div> 

         <div class="col-lg-2 control-label"></div> 
<div class="col-lg-10"> 

          @*<input type="button" class="" />*@ @* <button type="submit" class = "btn btn-success">@Html.ActionLink("Save", "EmployeeRegistration", "Home")</button>*@ 
          @* <button type="submit" >@Html.ActionLink("Save", "EmployeeRegistration", "Home", new { @class = "btn btn-success" })</button>*@ 
          <input type="submit" class="btn btn-success" value="Save" /> 
          <button class="btn btn-success"> 
           Clear</button> 
          <button class="btn btn-success"> 
           Cancel</button> 
           </div> 

Answer 1

在CustomerViewModel你可以有不同的properties對每個選項

 public bool CareerPlanning { get; set; } 
     public bool Personal{ get; set; } 
     public bool RelationShip{ get; set; } 
     and So on..... 

然後在視圖中，您可以現場爲這些屬性

 @Html.CheckBoxFor(Model => Model.CareerPlanning)<span> Career Planning </span> 
    @Html.CheckBoxFor(Model => Model.Personal)<span> Personal </span> 
    @Html.CheckBoxFor(Model => Model.RelationShip) <span> RelationShip</span> 
    and So on..... 

現在控制器，你需要修改Purpose根據對所有複選框值

StringBuilder sb=new StringBuilder(); 
    if(model.CareerPlanning) 
    sb.Append("Carrer Planning"); 
    if(model.Personal) 
    sb.Append("-Personal"); 
and so on.... 

，並在年底

model.Purpose=sb.ToString(); 

Answer 2

模型創建布爾型屬性

型號：

public String Question{ get; set; } 
public Boolean Options{ get; set; } 
public String OptionContent{ get; set; } 
...so on 

通過這個模型到視圖，然後使用EditorFor HTML幫手。

@using (Html.BeginForm("actionname", "Home", FormMethod.Post, null)){ 
<div> 
    @Html.LabelFor(model => model.Question) 
</div> 
<div> 
    @Html.EditorFor(model => model.Option) 
    @Html.LabelFor(model => model.OptionContent) 
</div> 
}