Wie gehe ich mit Kontrollkästchen in ASP.NET MVC-Formularen um?

Achtung: Diese Frage ist über neun Jahre alt!

Am besten suchen Sie nach neueren Fragen oder nach den Antworten unten, um nach Ihrer spezifischen Version von MVC zu suchen, da viele Antworten hier jetzt veraltet sind.

Wenn Sie eine Antwort finden, die für Ihre Version funktioniert, stellen Sie sicher, dass die Antwort die von Ihnen verwendete MVC-Version enthält.
_{(Die ursprüngliche Frage beginnt unten)}

Das scheint mir ein bisschen bizarr zu sein, aber soweit ich das beurteilen kann, machst du es so.

Ich habe eine Sammlung von Objekten und möchte, dass Benutzer eines oder mehrere davon auswählen. Das sagt mir "Formular mit Kontrollkästchen". Meine Objekte haben kein Konzept von "ausgewählt" (sie sind rudimentäre POCOs, die durch Deserialisieren eines wcf-Aufrufs gebildet werden). Also mache ich folgendes:

public class SampleObject{
  public Guid Id {get;set;}
  public string Name {get;set;}
}

In der Ansicht:

<%
    using (Html.BeginForm())
    {
%>
  <%foreach (var o in ViewData.Model) {%>
    <%=Html.CheckBox(o.Id)%>&nbsp;<%= o.Name %>
  <%}%>
  <input type="submit" value="Submit" />
<%}%>

Und in der Steuerung ist dies die einzige Möglichkeit, um herauszufinden, welche Objekte der Benutzer überprüft hat:

public ActionResult ThisLooksWeird(FormCollection result)
{
  var winnars = from x in result.AllKeys
          where result[x] != "false"
          select x;
  // yadda
}

Es ist in erster Linie verrückt, und zweitens listet die FormCollection für die vom Benutzer überprüften Elemente ihren Wert als "wahr falsch" und nicht nur als wahr auf.

Offensichtlich fehlt mir etwas. Ich denke, dies basiert auf der Idee, dass die Objekte in der Sammlung, auf die im HTML-Formular reagiert wird, mit aktualisiert werdenUpdateModel() reagiert wird, oder über einen ModelBinder .

Aber meine Objekte sind nicht dafür eingerichtet; Bedeutet das, dass dies der einzige Weg ist? Gibt es einen anderen Weg, es zu tun?

Html.CheckBox macht etwas Seltsames - wenn Sie die Quelle auf der resultierenden Seite anzeigen, werden Sie sehen, dass es eine gibt <input type="hidden" /> , wird neben jedem Kontrollkästchen ein Wert generiert, der die "wahr falsch" -Werte erklärt, die für jedes Formularelement angezeigt werden.

Versuchen Sie dies, was definitiv unter ASP.NET MVC Beta funktioniert, da ich es gerade ausprobiert habe.

Fügen Sie dies in die Ansicht ein, anstatt Html.CheckBox () zu verwenden:

<% using (Html.BeginForm("ShowData", "Home")) {  %>
  <% foreach (var o in ViewData.Model) { %>
    <input type="checkbox" name="selectedObjects" value="<%=o.Id%>">
    <%= o.Name %>
  <%}%>
  <input type="submit" value="Submit" />
<%}%>

Ihre Kontrollkästchen werden alle aufgerufen selectedObjects, und dievalue jedes Kontrollkästchen ist die GUID des entsprechenden Objekts.

Posten Sie dann in der folgenden Controller-Aktion (oder in einer ähnlichen Aktion, die anstelle von Response.Write () etwas Nützliches bewirkt).

public ActionResult ShowData(Guid[] selectedObjects) {
    foreach (Guid guid in selectedObjects) {
        Response.Write(guid.ToString());
    }
    Response.End();
    return (new EmptyResult());
}

In diesem Beispiel werden nur die GUIDs der von Ihnen aktivierten Kontrollkästchen geschrieben. ASP.NET MVC ordnet die GUID-Werte der ausgewählten Kontrollkästchen dem Guid[] selectedObjectsParameter für Sie zu und analysiert sogar die Zeichenfolgen aus der Request.Form-Auflistung in instanziierte GUID-Objekte, was ich ziemlich nett finde.

HtmlHelper fügt eine versteckte Eingabe hinzu, um den Controller über den Status "Nicht aktiviert" zu informieren. So haben Sie den korrekten Status überprüft:

bool bChecked = form[key].Contains("true");

Falls Sie sich fragen, WARUM sie ein verstecktes Feld mit demselben Namen wie das Kontrollkästchen einfügen, lautet der Grund wie folgt:

Kommentar aus dem Quellcode MVCBetaSource \ MVC \ src \ MvcFutures \ Mvc \ ButtonsAndLinkExtensions.cs

Rendern Sie ein zusätzliches <input type="hidden".../>Kontrollkästchen für Kontrollkästchen. Dies behebt Szenarien, in denen nicht aktivierte Kontrollkästchen in der Anforderung nicht gesendet werden. Durch das Senden einer versteckten Eingabe können Sie feststellen, dass das Kontrollkästchen auf der Seite vorhanden war, als die Anforderung gesendet wurde.

Ich denke, hinter den Kulissen müssen sie dies wissen, um an Parameter der Controller-Aktionsmethoden zu binden. Sie könnten dann einen Booleschen Wert mit drei Zuständen haben (an einen nullfähigen Bool-Parameter gebunden). Ich habe es nicht versucht, aber ich hoffe, dass sie es getan haben.

Sie sollten auch verwenden, <label for="checkbox1">Checkbox 1</label>da die Benutzer dann sowohl auf den Beschriftungstext als auch auf das Kontrollkästchen selbst klicken können. Es ist auch einfacher zu gestalten und wird zumindest im IE hervorgehoben, wenn Sie durch die Steuerelemente der Seite blättern.

<%= Html.CheckBox("cbNewColors", true) %><label for="cbNewColors">New colors</label>

Dies ist nicht nur eine "Oh, ich könnte es tun" -Sache. Es ist eine bedeutende Verbesserung der Benutzererfahrung. Auch wenn nicht alle Benutzer wissen, dass sie auf das Etikett klicken können, werden es viele tun.

Ich bin überrascht, dass keine dieser Antworten die integrierten MVC-Funktionen verwendet hat.

Ich schrieb einen Blog - Post über diese hier , die auch Links tatsächlich die Etiketten auf die Checkbox. Ich habe die EditorTemplate verwendet Ordner verwendet, um dies auf saubere und modulare Weise zu erreichen.

Sie erhalten einfach eine neue Datei im EditorTemplate-Ordner, die folgendermaßen aussieht:

@model SampleObject

@Html.CheckBoxFor(m => m.IsChecked)
@Html.HiddenFor(m => m.Id)
@Html.LabelFor(m => m.IsChecked, Model.Id)

In Ihrer tatsächlichen Ansicht besteht keine Notwendigkeit, dies zu wiederholen, lediglich 1 Codezeile:

@Html.EditorFor(x => ViewData.Model)

Besuchen Sie meinen Blog-Beitrag für weitere Details.

Folgendes habe ich getan.

Aussicht:

<input type="checkbox" name="applyChanges" />

Regler:

var checkBox = Request.Form["applyChanges"];

if (checkBox == "on")
{
...
}

Ich fand die Html. * -Hilfemethoden in einigen Fällen nicht so nützlich, und ich war besser dran, es in einfachem altem HTML zu tun. Dies ist einer von ihnen, der andere, der mir in den Sinn kommt, sind Optionsfelder.

Bearbeiten: Dies ist in Vorschau 5, offensichtlich YMMV zwischen den Versionen.

Sie scheinen sich dafür zu entscheiden, nur den ersten Wert zu lesen. Dies ist also "wahr", wenn das Kontrollkästchen aktiviert ist, und "falsch", wenn nur der versteckte Wert enthalten ist. Dies lässt sich mit folgendem Code leicht abrufen:

model.Property = collection["ElementId"].ToLower().StartsWith("true");

@ Dylan Beattie Großartiger Fund !!! Ich danke Ihnen vielmals. Um noch weiter zu expandieren, funktioniert diese Technik auch perfekt mit dem View Model-Ansatz. MVC ist so cool, dass es intelligent genug ist, um ein Array von Guids an eine Eigenschaft mit demselben Namen wie das an die Ansicht gebundene Model-Objekt zu binden. Beispiel:

ViewModel:

public class SampleViewModel
{
    public IList<SampleObject> SampleObjectList { get; set; }
    public Guid[] SelectedObjectIds { get; set; }

    public class SampleObject
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
    }
}

Aussicht:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Sample View</h2>
<table>
    <thead> 
        <tr>
            <th>Checked</th>
            <th>Object Name</th>
        </tr>
    </thead> 
<% using (Html.BeginForm()) %>
<%{%>                    
    <tbody>
        <% foreach (var item in Model.SampleObjectList)
           { %>
            <tr>
                <td><input type="checkbox" name="SelectedObjectIds" value="<%= item.Id%>" /></td>
                <td><%= Html.Encode(item.Name)%></td>
            </tr>
        <% } %>
    </tbody>
</table>
<input type="submit" value="Submit" />
<%}%>                    

Regler:

    [AcceptVerbs(HttpVerbs.Get)]
    public ActionResult SampleView(Guid id)
    {
        //Object to pass any input objects to the View Model Builder 
        BuilderIO viewModelBuilderInput = new BuilderIO();

        //The View Model Builder is a conglomerate of repositories and methods used to Construct a View Model out of Business Objects
        SampleViewModel viewModel = sampleViewModelBuilder.Build(viewModelBuilderInput);

        return View("SampleView", viewModel);
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SampleView(SampleViewModel viewModel)
    {
        // The array of Guids successfully bound to the SelectedObjectIds property of the View Model!
        return View();
    }

Jeder, der mit der View Model-Philosophie vertraut ist, wird sich freuen, das funktioniert wie ein Champ!

Ich möchte auch darauf hinweisen, dass Sie jedem Kontrollkästchen einen anderen Namen geben können und diesen Namen Teil der Aktionsergebnisparameter haben.

Beispiel,

Aussicht:

 <%= Html.CheckBox("Rs232CheckBox", false, new { @id = "rs232" })%>RS-232

 <%= Html.CheckBox("Rs422CheckBox", false, new { @id = "rs422" })%>RS-422

Regler:

public ActionResults MyAction(bool Rs232CheckBox, bool Rs422CheckBox) {
    ...
}

Die Werte aus der Ansicht werden an die Aktion übergeben, da die Namen identisch sind.

Ich weiß, dass diese Lösung nicht ideal für Ihr Projekt ist, aber ich dachte, ich würde die Idee da rauswerfen.

<input type = "checkbox" name = "checkbox1" /> <label> Check to say hi.</label>

Vom Controller:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(FormCollection fc)
    {

         var s = fc["checkbox1"];

         if (s == "on")
         {
             string x = "Hi";
         }
    }

Dieses Problem tritt auch in Version 1.0 auf. Html.Checkbox () bewirkt, dass ein weiteres verstecktes Feld mit demselben Namen / derselben ID wie Ihr ursprüngliches Kontrollkästchen hinzugefügt wird. Und als ich versuchte, ein Kontrollkästchen-Array mit document.GetElemtentsByName () zu laden, können Sie erraten, wie die Dinge durcheinander gebracht wurden. Es ist bizarr.

Soweit ich das beurteilen kann, möchte das Modell nicht erraten, ob aktiviert = wahr oder falsch. Ich habe dies umgangen, indem ich mit jQuery ein Wertattribut für das Kontrollkästchenelement festgelegt habe, bevor ich das Formular wie folgt gesendet habe:

 $('input[type="checkbox"]').each(function () {
       $(this).attr('value', $(this).is(':checked'));
 }); 

Auf diese Weise benötigen Sie kein verstecktes Element, um nur den Wert des Kontrollkästchens zu speichern.

Ich weiß, dass diese Frage geschrieben wurde, als MVC3 nicht veröffentlicht wurde, aber für alle, die zu dieser Frage kommen und MVC3 verwenden, möchten Sie möglicherweise den "richtigen" Weg, dies zu tun.

Während ich denke, dass das Ganze macht

Contains("true");

Die Sache ist großartig und sauber und funktioniert auf allen MVC-Versionen. Das Problem ist, dass die Kultur nicht berücksichtigt wird (als ob es im Fall eines Bools wirklich wichtig wäre).

Der "richtige" Weg, um den Wert eines Bools zumindest in MVC3 herauszufinden, ist die Verwendung des ValueProviders.

var value = (bool)ValueProvider.GetValue("key").ConvertTo(typeof(bool));

Ich mache dies auf einer der Websites meines Kunden, wenn ich Berechtigungen bearbeite:

var allPermissionsBase = Request.Params.AllKeys.Where(x => x.Contains("permission_")).ToList();
var allPermissions = new List<KeyValuePair<int, bool>>();

foreach (var key in allPermissionsBase)
{
     // Try to parse the key as int
     int keyAsInt;
     int.TryParse(key.Replace("permission_", ""), out keyAsInt);

     // Try to get the value as bool
     var value = (bool)ValueProvider.GetValue(key).ConvertTo(typeof(bool));
}

Das Schöne daran ist, dass Sie dies mit nahezu jedem einfachen Typ verwenden können, und es wird sogar basierend auf der Kultur korrekt sein (denken Sie an Geld, Dezimalstellen usw.).

Der ValueProvider wird verwendet, wenn Sie Ihre Aktionen wie folgt erstellen:

public ActionResult UpdatePermissions(bool permission_1, bool permission_2)

Wenn Sie jedoch versuchen, diese Listen dynamisch zu erstellen und die Werte zu überprüfen, werden Sie die ID beim Kompilieren nie kennen, sodass Sie sie im laufenden Betrieb verarbeiten müssen.

Der einfachste Weg ist so ...

Sie legen den Namen und den Wert fest.

<input type="checkbox" name="selectedProducts" value="@item.ProductId" />@item.Name

Nehmen Sie dann beim Senden die Werte der Kontrollkästchen und speichern Sie sie in einem int-Array. dann die entsprechende LinQ-Funktion. Das ist es..

[HttpPost]
        public ActionResult Checkbox(int[] selectedObjects)
        {
            var selected = from x in selectedObjects
                           from y in db
                           where y.ObjectId == x
                           select y;                   

            return View(selected);
        }

Verwenden Sie wie in der Antwort von nautic20 einfach die Kontrollkästchenliste für die MVC-Standardmodellbindung mit demselben Namen wie eine Sammlungseigenschaft von string / int / enum in ViewModel. Das ist es.

Aber ein Problem muss hervorgehoben werden. In jeder Kontrollkästchenkomponente sollten Sie keine "ID" einfügen, die sich auf die MVC-Modellbindung auswirkt.

Der folgende Code funktioniert für die Modellbindung:

 <% foreach (var item in Model.SampleObjectList)
       { %>
        <tr>
            <td><input type="checkbox" name="SelectedObjectIds" value="<%= item.Id%>" /></td>
            <td><%= Html.Encode(item.Name)%></td>
        </tr>
 <% } %>

Die folgenden Codes sind nicht an das Modell gebunden (der Unterschied besteht darin, dass jedem Kontrollkästchen eine ID zugewiesen wurde).

<% foreach (var item in Model.SampleObjectList)
       { %>
        <tr>
            <td><input type="checkbox" name="SelectedObjectIds" id="[some unique key]" value="<%= item.Id%>" /></td>
            <td><%= Html.Encode(item.Name)%></td>
        </tr>
<% } %>

Dies ist, was ich getan habe, um die doppelten Werte zu verlieren, wenn ich die Html.CheckBox (...

Replace("true,false","true").Split(',')

Wenn 4 Kontrollkästchen aktiviert, deaktiviert, deaktiviert oder aktiviert sind, wird es wahr, falsch, falsch, falsch, wahr, falsch in wahr, falsch, falsch, wahr. genau das, was ich brauchte

Wie wäre es mit so etwas?

bool isChecked = false;
if (Boolean.TryParse(Request.Form.GetValues(”chkHuman”)[0], out isChecked) == false)
    ModelState.AddModelError(”chkHuman”, “Nice try.”);

Wenn ich das Kontrollkästchen HtmlHelper verwende, arbeite ich lieber mit den veröffentlichten Kontrollkästchen-Formulardaten als Array. Ich weiß nicht genau warum, ich weiß, dass die anderen Methoden funktionieren, aber ich denke, ich bevorzuge es einfach, durch Kommas getrennte Zeichenfolgen so weit wie möglich als Array zu behandeln.

Ein "überprüfter" oder echter Test wäre also:

//looking for [true],[false]
bool isChecked = form.GetValues(key).Contains("true"); 

Eine falsche Prüfung wäre:

//looking for [false],[false] or [false]
bool isNotChecked = !form.GetValues(key).Contains("true"); 

Der Hauptunterschied besteht in der Verwendung, GetValuesda dies als Array zurückgegeben wird.

Mach das einfach auf $(document).ready:

$('input:hidden').each(function(el) {
    var that = $(this)[0];
    if(that.id.length < 1 ) {

        console.log(that.id);
        that.parentElement.removeChild(that);

    }
});

Meine Lösung ist:

<input type="checkbox"  id="IsNew-checkbox"  checked="checked" />     
<input type="hidden"  id="IsNew" name="IsNew" value="true"  />      
<script language="javascript" type="text/javascript" >     
  $('#IsNew-checkbox').click(function () {    
      if ($('#IsNew-checkbox').is(':checked')) {    
          $('#IsNew').val('true');    
      } else {    
          $('#IsNew').val('false');    
       }    
  });   
</script>  

Weitere finden Sie hier: http://www.blog.mieten.pl/2010/12/asp-net-mvc-custom-checkbox-as-solution-of-string-was-not-recognized-as-a- valid-boolean /

Ich hatte fast das gleiche Problem, aber der Rückgabewert meines Controllers wurde mit anderen Werten blockiert.

Ich habe eine einfache Lösung gefunden, aber sie scheint etwas rau zu sein.

Versuchen Sie, Viewbag.Ihren Controller einzugeben, und geben Sie ihm jetzt einen Namen wieViewbag.Checkbool

Wechseln Sie nun zur Ansicht und versuchen Sie dies @Viewbag.Checkbooldamit. Sie erhalten den Wert aus dem Controller.

Meine Controller-Parameter sehen folgendermaßen aus:

public ActionResult Anzeigen(int productid = 90, bool islive = true)

und mein Kontrollkästchen wird folgendermaßen aktualisiert:

<input id="isLive" type="checkbox" checked="@ViewBag.Value" ONCLICK="window.location.href = '/MixCategory/Anzeigen?isLive=' + isLive.checked.toString()" />

Mit @mmacaulay habe ich mir das für bool ausgedacht:

// MVC Work around for checkboxes.
bool active = (Request.Form["active"] == "on");

Wenn aktiviert aktiviert = wahr

Wenn nicht markiert, aktiv = falsch