CheckboxList dans MVC3 View et obtenez les éléments cochés transmis au contrôleur
J'ai une classe pour MoreInfo:
public class MoreInfo
{
public string Name { get; set; }
public string selectedCheckboxItems {get; set;}
}
Je veux savoir comment créer une liste de cases à cocher dans la vue et transmettre les éléments cochés à mon contrôleur lors de la soumission.
Comment pourrais-je créer la liste des cases à cocher et comment passer tous les éléments cochés et les traiter?
Modifions un peu votre modèle:
public class ItemViewModel
{
public string Id { get; set; }
public string Name { get; set; }
public bool Checked { get; set; }
}
alors vous pourriez avoir un contrôleur:
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
...
}
}
alors vous auriez une vue correspondante (~/Views/Home/Index.cshtml) qui contiendrait le formulaire permettant à l'utilisateur de vérifier/décocher les valeurs:
@model IEnumerable<AppName.Models.ItemViewModel>
@using (Html.BeginForm())
{
@Html.EditorForModel()
<input type="submit" value="OK" />
}
et enfin le modèle d'éditeur (~/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>
public class MoreInfo
{
public Int64 Id {get; set;}
public string Name { get; set; }
public bool Checkbox {get; set;}
}
Action du contrôleur:
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);
}
Vue rasoir:
@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>
Plus d'informations ici
c'est si facile:
1. créez la classe de case à cocher avec l'ID de chaîne et la valeur booléenne.
2. mettre la liste des cases à cocher dans la méthode du contrôleur avec un nom.
3. créez 2 champs dynamiquement dans votre vue mais assurez-vous de vous conformer au système de dénomination du moteur de rasoir.
pour créer une liste de cases à cocher dynamique, vous devez comprendre le fonctionnement du moteur de rasoir, disons que vous avez ce code
dans la tête de la vue, vous incluez un modèle comme ceci:
@model MyProject.Site.Models.MyWebModel
ce modèle a une classe de réglage qui contient un bool comme ceci:
public class MyWebModel
{
public HighchartsSettingModel Settings { get; set; }
}
public class HighchartsSettingModel
{
public bool JoinSameType{ get; set; }
}
et dans la vue que vous avez:
@Html.CheckBoxFor(x => x.Settings.JoinSameType)
en bref, cela crée le code html suivant:
<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" />
jusqu'ici tout va bien pour le CheckBoxFor, qui fait partie du cadre, comment travaillons-nous avec les tableaux?
alors maintenant tout ce que nous devons faire est de comprendre comment travailler avec list dans une méthode de contrôleur, disons que vous avez cette classe:
public class Checkbox{
public string Id { get; set; }
public bool Value { get; set; }
}
et dans le contrôleur vous avez ceci:
public ActionResult SensorSearch(List<Checkbox> selectedSensors, string search, string subSearch, string page, string back)
et la vue ressemblera à ceci:
@{
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>
n'oublions pas le formulaire dans la vue:
@using (Html.BeginForm("SensorSearch", "Home", Model.PageNav.StayRouteValues, FormMethod.Post, new Dictionary<string, object>() { { "data-ajax", "false" }, { "id", "sensor_search_form" } }))
maintenant, la page rendue ressemblera à l'aspect case à cocher:
<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>
ce que vous devez remarquer, ce sont les noms donnés à la case à cocher d'entrée et à l'entrée cachée, nous l'avons utilisé de la même manière que le moteur de rasoir crée le nom et donc après la soumission, le moteur le rendra sous forme de tableau et vous pourrez donc créer n'importe quelle case dynamique liste où vous voulez comme vous le feriez dans n'importe quelle autre langue (par exemple php et ainsi de suite ...).
c'est aussi simple que ça: c'est aussi simple que ça:
1. créez la classe de case à cocher avec l'ID de chaîne et la valeur booléenne.
2. mettre la liste des cases à cocher dans la méthode du contrôleur avec un nom.
3. créez 2 champs dynamiquement dans votre vue mais assurez-vous de vous conformer au système de dénomination du moteur de rasoir.
j'espérais que cela a aidé.