asp.net mvc - tutorial - CheckboxList en MVC3 Ver y obtener los elementos marcados pasados al controlador

mvc c# (3)

Tengo una clase para MoreInfo:

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

Quiero saber cómo crear una lista de casillas de verificación en la vista y pasar los elementos marcados a mi controlador cuando lo envíe.

¿Cómo podría crear la lista de casillas de verificación y cómo pasar todos los elementos marcados y procesarlos?

Modifiquemos un poco su modelo:

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

entonces podrías tener un controlador:

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 ... } }

entonces tendría una vista correspondiente ( ~/Views/Home/Index.cshtml ) que contendría el formulario que permite al usuario verificar / desmarcar valores:

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

y finalmente la plantilla del editor ( ~/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>

es fácil:
1. crea la clase de casilla de verificación con id. De cadena y valor bool.
2. Ponga la lista de casillas de verificación en el método del controlador con algún nombre.
3. Cree 2 campos dinámicamente en su vista, pero asegúrese de cumplir con el sistema de nombres de la máquina de afeitar.

Para crear una lista dinámica de casillas de verificación, debe comprender la forma en que funciona el motor de afeitar, digamos que tiene este código.
en el encabezado de la vista incluye un modelo como ese:

@model MyProject.Site.Models.MyWebModel

ese modelo tiene una clase de configuración que tiene un bool adentro así:

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

y en la vista tienes:

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

En resumen, esto crea el siguiente código 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" />

hasta ahora, tan bueno para el CheckBoxFor, que es parte de la estructura, ¿cómo trabajamos con las matrices?

entonces ahora todo lo que tenemos que hacer es entender cómo trabajar con la lista en un método de controlador, digamos que tiene esta clase:

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

y en el controlador tienes esto:

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

y la vista se verá así:

@{ 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>

no olvidemos el formulario en la vista:

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

ahora la página renderizada se verá así en el aspecto de la casilla de verificación:

lo que necesita notar son los nombres dados a la casilla de verificación de entrada y la entrada oculta que usamos de manera similar a como el motor crea el nombre y por lo tanto después de enviar el motor lo renderizará como una matriz y así puede crear cualquier casilla de verificación dinámica enumera donde quieras igual a como lo harías en cualquier otro idioma (digamos php y así ...).

es así de fácil: es así de fácil:
1. crea la clase de casilla de verificación con id. De cadena y valor bool.
2. Ponga la lista de casillas de verificación en el método del controlador con algún nombre.
3. Cree 2 campos dinámicamente en su vista, pero asegúrese de cumplir con el sistema de nombres de la máquina de afeitar.

Esperaba que ayudara.

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

Acción del controlador:

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 View:

@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>

Más información here