如何在cshtml頁面中創建CheckBoxList

Question

我已經在模型類中創建了4列作爲布爾類型，所以我想在cshtml頁面中顯示它們相對於那些值（如果在db列a中爲true，那麼設置該列屬性如表（DB）中的ui所示）。我想顯示多行每行包含4個複選框，我需要在如下圖所示我每個row.as的互斥：

![enter image description here][1] 


    [1]: http://i.stack.imgur.com/A2cl0.png 

下面是模型和CSHTML的代碼。任何人的幫助表示讚賞感謝你在

namespace Cerebro.ViewModels 
{ 
    public class AttendanceViewModel 
    { 
     public AttendanceViewModel() 
     { 
      //this.Attendances = new [] List<Attendance>(); 
      this.Students = new List<StudentList>(); 
     } 
     private StudentContext db = new StudentContext(); 
     public DateTime currentdate { get; set; } 
     public DateTime weekStartDate { get; set; } 
     public virtual List<StudentList> Students { get; set; } 
     public virtual List<Attendance> [] Attendances { get; set; } 


    } 
} 

    public partial class Attendance 
    { 
     public int AttendanceID { get; set; } 
     public int StudentID { get; set; } 
     public string StudentName { get; set; } 
     public int ProviderID { get; set; } 
     public int CourseID { get; set; } 
     public int InstitutionID { get; set; } 
     public int BatchID { get; set; } 
     public string Teacher { get; set; } 
     public Nullable<System.DateTime> AttendanceDate { get; set; } 
     public bool Present { get; set; } 
     public bool Leave { get; set; } 
     public bool Absent { get; set; } 
     public bool Holiday { get; set; } 
     public bool Status { get; set; } 
     public virtual StudentList StudentList { get; set; } 

    } 


@model Cerebro.ViewModels.AttendanceViewModel 
@using Cerebro.ViewModels; 

@{ 
    ViewBag.Title = "StudentAttendance"; 
} 


@using (Html.BeginForm("Index","Attendance", FormMethod.Post)) 
{ 
    <p style="font-weight:bold; font-size:medium;color:Red"> 
    @TempData["errorMessage"].ToString() 
    </p> 
    <fieldset> 
     <legend>Attendance</legend> 

     <table style="border: 2px solid #000"> 
     <tr style="text-align:left"> 
     <th><b style="color:Blue" >@ViewData["coachName"].ToString() &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</b></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="submit" name="buttn" value="Weekly" /></td> 
     </tr> 
     <tr>   
     <th>Center: &nbsp&nbsp&nbsp&nbsp</th> 
     <td>@Html.DropDownList("InstitutionID")</td> 
     <th>Batch:</th> 
     <td>@Html.DropDownList("BatchID")</td> 
     <th>Date:</th> 
     <td>@Html.EditorFor(Model => Model.currentdate)</td> 
     </tr> 
     <tr> 
     <th>Total:&nbsp @ViewData["Total"]</th> 
     <th>Present:&nbsp @ViewData["Present"]</th> 
     <th>Leave:&nbsp @ViewData["Leave"]</th> 
     <th>Absent:&nbsp @ViewData["Absent"] &nbsp&nbsp&nbsp&nbsp</th> 

     <th><input type="submit" name="buttn" value="Save" /></th> 

     <th><input type="submit" name="buttn" value="Submit" />&nbsp&nbsp&nbsp&nbsp</th> 

     </tr> 
     @*<tr> 
     <th>&nbsp</th><th>&nbsp</th><th>&nbsp</th><th>&nbsp</th><th>&nbsp</th><th>&nbsp</th> 
     </tr>*@ 
     </table> 
     <table> 
     <thead> 

     <tr style="background-color:InfoText; text-align:left"> 
     <th style="color:Orange">Student Name &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp </th> 
     <th style="color:Orange">Board </th> 
     <th style="color:Orange">Class</th> 
     <th></th> 

     <th style="color:Orange; padding-left:10">Present &nbsp&nbsp </th> 
     <th style="color:Orange; padding-left:10">Leave &nbsp&nbsp </th> 
     <th style="color:Orange; padding-left:10">Absent &nbsp&nbsp </th> 
     <th style="color:Orange; padding-left:10">Holiday &nbsp&nbsp </th> 
     </tr> 
     </thead> 

     @for (int i = 0; i < Model.Attendances.Length; i++) 
     { 
      if (Model.Attendances[i].Count != 0) 
      { 
       int j = 0; 
      <tr> 
       <td> 
        @Model.Attendances[i][0].StudentName 
       </td> 
       <td>@Model.Attendances[i][0].StudentList.CourseList.ProviderList.ProviderName</td> 
       <td>@Model.Attendances[i][0].StudentList.CourseList.CourseName</td> 
       <td></td> 


       <td>&nbsp<input type="checkbox" id="Present" name="@i" checked ="@Model.Attendances[i][0].Present" value="@Model.Attendances[i][0].Present" /> &nbsp&nbsp&nbsp</td> 
       <td>&nbsp<input type="checkbox" id="Leave" name="@i" checked ="@Model.Attendances[i][0].Leave" value="@Model.Attendances[i][0].Leave" /> &nbsp&nbsp&nbsp</td> 
       <td>&nbsp<input type="checkbox" id="Absent" name="@i" checked ="@Model.Attendances[i][0].Absent" value="@Model.Attendances[i][0].Absent" /> &nbsp&nbsp&nbsp</td> 
       <td>&nbsp <input type="checkbox" id="Holiday" name="@i" checked ="@Model.Attendances[i][0].Holiday" value="@Model.Attendances[i][0].Holiday" /> &nbsp&nbsp&nbsp</td> 


        <td>@Html.ActionLink("ChapterTestUI", "Index", "Leaves", new { sid = @Model.Attendances[i][0].StudentID }, new { @class = "chapterTest", Title = "View chapter test" })</td> 

       @Html.HiddenFor(model => model.Attendances[i][0].Status) 
       @Html.HiddenFor(model => model.Attendances[i][0].AttendanceDate) 
       @Html.HiddenFor(model => model.Attendances[i][0].StudentID) 
       @Html.HiddenFor(model => model.Attendances[i][0].StudentName) 
       @Html.HiddenFor(model => model.Attendances[i][0].ProviderID) 
       @Html.HiddenFor(model => model.Attendances[i][0].CourseID) 
       @Html.HiddenFor(model => model.Attendances[i][0].BatchID) 
       @Html.HiddenFor(model => model.Attendances[i][0].InstitutionID) 
       @Html.HiddenFor(model => model.Attendances[i][0].AttendanceID) 


      </tr> 

      } 
     }   
     </table> 

    </fieldset> 
} 
@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

    @Scripts.Render("~/bundles/jqueryui") 
    @Styles.Render("~/Content/themes/base/css") 

    <script type="text/javascript"> 
     $(document).ready(function() { 

       function MutExChkList(chk) 
       { 
        var chkList = chk.parentNode.parentNode.parentNode; 
        var chks = chk.getElementsByTagName("0"); 
        for(var i=0;i<chks.length;i++) 
        { 
         if(chks[i] != chk && chk.checked) 
         { 
          chks[i].checked=false; 
         } 
        } 
       } 


      var serverDate = '@ViewBag.ServerDate'; 

      $("#currentdate").datepicker({ 
       showButtonPanel: true, 
       buttonImage: "/images/datepicker.png", 
       changeMonth: true, 
       changeYear: true, 
       showOn: "focus", 
       yearRange: '1900:2100', 
       minDate: new Date(1900, 1 - 1, 1), 
       maxDate: '+100Y', 
       dateFormat: 'dd-M-yy', 
       inline: true 
      }).datepicker("setDate", serverDate); 


      $("#InstitutionID").change(function() { 
       var Institution = $(this).val(); 
       window.location.href = "../../Attendance/Index?InsId=" + Institution + "&batid=0&date="+serverDate; 
      }); 

      $("#BatchID").change(function() { 
       var Institution = $("#InstitutionID").val(); 
       var batchid = $(this).val(); 
       window.location.href = "../../Attendance/Index?InsId=" + Institution + "&batid=" + batchid + "&date="+serverDate; 
      }); 

      $("#currentdate").change(function() { 
       var Institution = $("#InstitutionID").val(); 
       var batchid = $("#BatchID").val(); 
       var date = $(this).val(); 
       window.location.href = "../../Attendance/Index?InsId=" + Institution + "&batid=" + batchid + "&date=" + date; 
      }); 


     }); 


    </script> 
} 

Answer 1

嘗試這樣，

這只是一個例子，

添加nueget Install-Package MvcCheckBoxList

型號

public class City { 
    public int Id { get; set; }   // Integer value of a checkbox 
    public string Name { get; set; }  // String name of a checkbox 
    public object Tags { get; set; }  // Object of html tags to be applied to checkbox, e.g.: 'new { tagName = "tagValue" }' 
    public bool IsSelected { get; set; } // Boolean value to select a checkbox on the list 
} 

public class CitiesViewModel { 
    public IList<City> AvailableCities { get; set; } 
    public IList<City> SelectedCities { get; set; } 
    public PostedCities PostedCities { get; set; } 
} 

// Helper class to make posting back selected values easier 
public class PostedCities { 
    public string[] CityIDs { get; set; } 
} 

層查看

@Html.CheckBoxListFor(x => x.PostedCities.CityIDs, // checkbox list name, 'PostedCities.CityIDs' in this case 
         x => x.AvailableCities,  // List<City>() 
         x => x.Id,     // City.Id 
         x => x.Name,     // City.Name 
         x => x.SelectedCities)  // List<City>() - should contain only cities to be selected 

檢查的例子在這裏：MvcCheckBoxList

http://www.codeproject.com/Tips/613785/How-to-Use-CheckBoxListFor-With-ASP-NET-MVC-4