的CheckBoxList在MVC3查看並得到檢查項目傳遞給控制器​​

Question

我有MoreInfo類：

public class MoreInfo 
{ 
     public string Name { get; set; } 
     public string selectedCheckboxItems {get; set;} 
} 

我想知道如何在視圖中創建一個複選框列表並通過覈對項目我的控制器提交。

我將如何去創建複選框列表以及如何通過所有選中的項目並處理它們？

Answer 1

讓我們修改了模型一點：

public class ItemViewModel 
{ 
    public string Id { get; set; } 
    public string Name { get; set; } 
    public bool Checked { get; set; } 
} 

，那麼你可以有一個控制器：

public class HomeController: Controller 
{ 
    public ActionResult Index() 
    { 
     // This action is used to render the form => 
     // we should populate our model with some values 
     // which could obviously come from some data source 
     var model = new[] 
     { 
      new ItemViewModel { Id = "1", Checked = true, Name = "item 1" }, 
      new ItemViewModel { Id = "2", Checked = false, Name = "item 2" }, 
      new ItemViewModel { Id = "3", Checked = true, Name = "item 3" }, 
     }; 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(IEnumerable<ItemViewModel> items) 
    { 
     // This action will be invoked when the form is submitted 
     // and here the view model will be properly bound and 
     // you will get a collection of all items with their 
     // corresponding id, name and whether they were checked or not 
     ... 
    } 
} 

，那麼你將有一個相應的視圖（~/Views/Home/Index.cshtml），這將包含的形式允許用戶檢查/取消檢查值：

@model IEnumerable<AppName.Models.ItemViewModel> 
@using (Html.BeginForm()) 
{ 
    @Html.EditorForModel() 
    <input type="submit" value="OK" /> 
} 

最後edito [R模板（~/Views/Home/EditorTemplates/ItemViewModel.cshtml）：

@model AppName.Models.ItemViewModel 
// Those two hidden fields are just to persist the id and name 
@Html.HiddenFor(x => x.Id) 
@Html.HiddenFor(x => x.Name) 
<div> 
    @Html.CheckBoxFor(x => x.Checked) 
    @Html.LabelFor(x => x.Checked, Model.Name) 
</div> 

Answer 2

public class MoreInfo 
{ 
     public Int64 Id {get; set;} 
     public string Name { get; set; } 
     public bool Checkbox {get; set;} 
} 

控制器動作：

public ActionResult Index(){ 
    var list = new List<MoreInfo>{ 
     new MoreInfo{Id = 1, Name = "Name1", Checkbox = false}, 
     new MoreInfo{Id = 2, Name = "Name2", Checkbox = false}, 
     new MoreInfo{Id = 3, Name = "Name3", Checkbox = true}, 
    }; 
    return View(list); 
} 

[HttpPost] 
public ActionResult Index(List<MoreInfo> lists){ 

    return View(lists); 
} 

Razor視圖：

@model List<MoreInfo> 

<form action="" method="POST"> 
@for (var i = 0; i < Model.Count();i++) 
{ 
    @Html.HiddenFor(it => it[i].Id) 
    @Html.TextBoxFor(it => it[i].Name) 
    @Html.CheckBoxFor(it => it[i].Checkbox) 
} 
<input type="submit" /> 
</form> 

更多信息 here

Answer 3

我很容易：
1.創建帶有字符串id和布爾值的複選框類。
2.將控制器方法中的複選框列表放在一些名稱中。
3.在視圖中動態創建2個字段，但要確保符合剃鬚刀引擎命名系統。

創建你需要了解剃刀引擎的工作方式一個動態的複選框列表， 說你在視圖中的頭部這段代碼
你有一個模型，如下所示：

@model MyProject.Site.Models.MyWebModel 

那模型具有布爾內像這樣的設置類：

public class MyWebModel 
{ 
    public HighchartsSettingModel Settings { get; set; } 
} 
public class HighchartsSettingModel 
{ 
    public bool JoinSameType{ get; set; } 
} 

，並在視圖中，您有：

@Html.CheckBoxFor(x => x.Settings.JoinSameType) 

總之

這會在以下HTML代碼：

<input data-val="true" data-val-required="The JoinSameType field is required." id="Settings_JoinSameType" name="Settings.JoinSameType" type="checkbox" value="true" /> 
<input name="Settings.JoinSameType" type="hidden" value="false" /> 

到目前爲止好了CheckBoxFor，即framwork的一部分，我們如何使用數組？

---

所以現在我們需要做的是瞭解如何與清單中的控制器方法工作， 說你有這個類：

public class Checkbox{ 
    public string Id { get; set; } 
    public bool Value { get; set; } 
} 

，並在控制器中你有這樣的：

public ActionResult SensorSearch(List<Checkbox> selectedSensors, string search, string subSearch, string page, string back) 

和視圖看起來像這樣：

@{ 
     int counter = 0; 
     string id_name, id_id, value_id, value_name; 
    } 
    @foreach (var item in Model.SensorList) 
    { 
     id_id = "selectedSensors_" + counter + "__Value"; 
     id_name = "selectedSensors[" + counter + "].Value"; 
     value_id = "selectedSensors_" + counter + "__Id"; 
     value_name = "selectedSensors[" + counter + "].Id"; 
     counter++; 


    <li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;"> 
     <label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false"> 
      <fieldset data-role="controlgroup" > 
       <input id="@id_id" name="@id_name" type="checkbox" value="true" /> 
       <input id="@value_id" name="@value_name" type="hidden" value="@item.Key" />         
       <label for="@id_id" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;"> 
        <label style="padding:10px 0px 0px 10px;"> 
         <h3>@item.Key</h3> 
         <p>User Name: @item.Value</p> 
        </label> 
       </label> 
      </fieldset> 
     </label> 
     </a><a href="#" rel="external"></a> 
    </li> 
} 
</ul> 

讓我們不要忘記在視圖形式：

@using (Html.BeginForm("SensorSearch", "Home", Model.PageNav.StayRouteValues, FormMethod.Post, new Dictionary<string, object>() { { "data-ajax", "false" }, { "id", "sensor_search_form" } })) 

現在所呈現的頁面看起來像這樣的複選框方面：

<li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;"> 
<label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false"> 
    <fieldset data-role="controlgroup" > 
     <input id="selectedSensors_16__Value" name="selectedSensors[16].Value" type="checkbox" value="true" /> 
     <input id="selectedSensors_16__Id" name="selectedSensors[16].Id" type="hidden" value="10141" />         
     <label for="selectedSensors_16__Value" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;"> 
      <label style="padding:10px 0px 0px 10px;"> 
       <h3>10141</h3> 
       <p>User Name: 10141_TEN-2MP</p> 
      </label> 
     </label> 
    </fieldset> 
</label> 
</a><a href="#" rel="external"></a> 
</li> 

你需要注意的是給予的名字輸入複選框和輸入隱藏我們使用它類似於剃鬚刀引擎創建名稱的方式，因此在提交引擎後會將其渲染爲數組，因此您可以創建任何動態複選框列表，您可以像任何時候一樣創建任何相同的動態複選框列表其他語言（比如php等等）。

那麼簡單： 那麼簡單：
1.創建帶有字符串id和bool值的複選框類。
2.將控制器方法中的複選框列表放在一些名稱中。
3.在視圖中動態創建2個字段，但要確保符合剃鬚刀引擎命名系統。

我希望它有幫助。