Como lidar com caixas de seleção em formulários ASP.NET MVC?

Cuidado: Esta pergunta tem mais de nove anos!

Sua melhor opção é procurar por perguntas mais recentes ou procurar as respostas abaixo procurando sua versão específica do MVC, pois muitas respostas aqui estão obsoletas agora.

Se você encontrar uma resposta que funcione para sua versão, verifique se a resposta contém a versão do MVC que você está usando.
_{(A pergunta original começa abaixo)}

Isso me parece um pouco bizarro, mas até onde eu sei, é assim que você faz.

Eu tenho uma coleção de objetos e quero que os usuários selecionem um ou mais deles. Isso me diz "formulário com caixas de seleção". Meus objetos não têm nenhum conceito de "selecionado" (são POCOs rudimentares formados pela desserialização de uma chamada wcf). Então, eu faço o seguinte:

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

Na visualização:

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

E, no controlador, é a única maneira que posso ver para descobrir quais objetos o usuário verificou:

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

É esquisito em primeiro lugar e, em segundo lugar, para os itens que o usuário verificou, o FormCollection lista seu valor como "verdadeiro falso" e não apenas verdadeiro.

Obviamente, estou perdendo alguma coisa. Eu acho que isso é construído com a idéia de que os objetos na coleção que são UpdateModel()acionados no formulário html são atualizados usando ou através de um ModelBinder.

Mas meus objetos não estão configurados para isso; isso significa que este é o único caminho? tem outro jeito de fazer isto?

Html.CheckBox está fazendo algo estranho - se você visualizar a fonte na página resultante, verá que está <input type="hidden" />sendo gerado ao lado de cada caixa de seleção, o que explica os valores "true false" que você está vendo para cada elemento do formulário.

Tente isso, que definitivamente funciona no ASP.NET MVC Beta, porque eu apenas tentei.

Coloque isso na exibição em vez de usar Html.CheckBox ():

<% 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" />
<%}%>

Suas caixas de seleção são todas chamadas selectedObjectse asvalue de cada caixa de seleção é o GUID do objeto correspondente.

Poste na ação do controlador a seguir (ou algo semelhante que faça algo útil em vez de Response.Write ())

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

Este exemplo escreverá apenas os GUIDs das caixas marcadas; O ASP.NET MVC mapeia os valores GUID das caixas de seleção selecionadas no Guid[] selectedObjectsparâmetro para você e até analisa as seqüências de caracteres da coleção Request.Form em objetos GUID instantâneos, o que eu acho bastante agradável.

O HtmlHelper adiciona uma entrada oculta para notificar o controlador sobre o status Não verificado. Portanto, para ter o status verificado correto:

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

Caso você esteja se perguntando POR QUE eles colocam um campo oculto com o mesmo nome da caixa de seleção, o motivo é o seguinte:

Comentário do código-fonte MVCBetaSource \ MVC \ src \ MvcFutures \ Mvc \ ButtonsAndLinkExtensions.cs

Renderize um adicional <input type="hidden".../>para caixas de seleção. Isso aborda cenários em que caixas de seleção desmarcadas não são enviadas na solicitação. O envio de uma entrada oculta torna possível saber que a caixa de seleção estava presente na página quando a solicitação foi enviada.

Eu acho que nos bastidores eles precisam saber disso para vincular parâmetros nos métodos de ação do controlador. Suponho que você possa ter um booleano de três estados (vinculado a um parâmetro bool anulável). Eu não tentei, mas espero que seja o que eles fizeram.

Você também deve usar, <label for="checkbox1">Checkbox 1</label>pois as pessoas podem clicar no texto do rótulo e na própria caixa de seleção. Também é mais fácil de estilizar e, pelo menos no IE, será destacado quando você guia os controles da página.

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

Isso não é apenas uma coisa do tipo 'oh, eu poderia fazer'. É uma melhoria significativa na experiência do usuário. Mesmo que nem todos os usuários saibam que podem clicar no rótulo, muitos o farão.

Estou surpreso que nenhuma dessas respostas tenha usado os recursos MVC integrados para isso.

Escrevi um post sobre isso aqui , que até vincula os rótulos à caixa de seleção. Usei a pasta EditorTemplate para fazer isso de maneira limpa e modular.

Você simplesmente terminará com um novo arquivo na pasta EditorTemplate que se parece com isso:

@model SampleObject

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

na sua visão atual, não haverá necessidade de fazer um loop, simplesmente uma linha de código:

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

Visite meu blog para obter mais detalhes.

Aqui está o que eu tenho feito.

Visão:

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

Controlador:

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

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

Eu achei os métodos auxiliares Html. * Não tão úteis em alguns casos, e era melhor fazê-lo em HTML simples e antigo. Sendo um deles, o outro que vem à mente são os botões de opção.

Edit: isso está na visualização 5, obviamente YMMV entre as versões.

Eles parecem optar por ler apenas o primeiro valor, portanto, isso é "verdadeiro" quando a caixa de seleção está marcada e "falso" quando apenas o valor oculto é incluído. Isso é facilmente buscado com código como este:

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

@Dylan Beattie Great Find !!! Eu agradeço muito. Para expandir ainda mais, essa técnica também funciona perfeitamente com a abordagem Exibir modelo. O MVC é tão legal que é inteligente o suficiente vincular uma matriz de Guids a uma propriedade com o mesmo nome do objeto Model vinculado à View. Exemplo:

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

Visão:

<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" />
<%}%>                    

Controlador:

    [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();
    }

Qualquer pessoa familiarizada com a filosofia do View Model se alegra, isso funciona como um campeão!

Gostaria também de ressaltar que você pode nomear cada caixa de seleção com um nome diferente e fazer com que esse nome faça parte dos parâmetros de resultados da ação.

Exemplo,

Visão:

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

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

Controlador:

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

Os valores da visualização são transmitidos para a ação, pois os nomes são os mesmos.

Sei que essa solução não é ideal para o seu projeto, mas pensei em lançar a idéia lá fora.

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

Do controlador:

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

         var s = fc["checkbox1"];

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

Esse problema também está acontecendo no release 1.0. Html.Checkbox () faz com que outro campo oculto seja adicionado com o mesmo nome / ID da sua caixa de seleção original. E enquanto eu tentava carregar uma matriz de caixas de seleção usando document.GetElemtentsByName (), você pode adivinhar como as coisas estavam ficando complicadas. Isso é bizarro.

Pelo que pude entender, o modelo não quer adivinhar se marcado = verdadeiro ou falso, resolvi isso definindo um atributo de valor no elemento checkbox com o jQuery antes de enviar o formulário da seguinte maneira:

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

Dessa forma, você não precisa de um elemento oculto apenas para armazenar o valor da caixa de seleção.

Sei que essa pergunta foi escrita quando o MVC3 não estava disponível, mas para quem chega a essa pergunta e está usando o MVC3, convém a maneira "correta" de fazer isso.

Enquanto eu acho que fazer o todo

Contains("true");

Se tudo é ótimo e limpo, e funciona em todas as versões do MVC, o problema é que não leva em consideração a cultura (como se realmente importasse no caso de um bool).

A maneira "correta" de descobrir o valor de um bool, pelo menos no MVC3, é usar o ValueProvider.

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

Faço isso em um dos sites do meu cliente quando edito as permissões:

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));
}

Agora, a beleza disso é que você pode usá-lo com praticamente qualquer tipo simples, e até estará correto com base na Cultura (pense em dinheiro, decimais, etc.).

O ValueProvider é o que é usado quando você forma suas ações assim:

public ActionResult UpdatePermissions(bool permission_1, bool permission_2)

mas quando você estiver tentando criar dinamicamente essas listas e verificar os valores, nunca conhecerá o ID em tempo de compilação; portanto, é necessário processá-los rapidamente.

A maneira mais fácil de fazer é ...

Você define o nome e o valor.

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

Em seguida, ao enviar, pegue os valores das caixas de seleção e salve em uma matriz int. então a função LinQ apropriada. É isso aí..

[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);
        }

Igual à resposta de nautic20, basta usar a lista de caixas de seleção de ligação de modelo padrão do MVC com o mesmo nome que uma propriedade de coleção de string / int / enum no ViewModel. É isso.

Mas uma questão precisa apontar. Em cada componente da caixa de seleção, você não deve colocar "Id" nele, o que afetará a ligação do modelo MVC.

O código a seguir funcionará para a ligação de modelo:

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

Os códigos a seguir não serão vinculativos ao modelo (diferença aqui é o ID atribuído para cada caixa de seleção)

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

isto é o que eu fiz para perder os valores duplos ao usar o Html.CheckBox (...

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

com 4 caixas marcadas, desmarcada, desmarcada, marcada, torna-se verdadeiro, falso, falso, falso, falso, verdadeiro, falso em verdadeiro, falso, falso, verdadeiro. exatamente o que eu precisava

Que tal algo como isso?

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

Ao usar a caixa de seleção HtmlHelper, prefiro trabalhar com os dados do formulário da caixa de seleção postada como uma matriz. Eu realmente não sei por que, sei que os outros métodos funcionam, mas acho que prefiro tratar as seqüências separadas por vírgula como uma matriz, tanto quanto possível.

Portanto, fazer um teste 'marcado' ou verdadeiro seria:

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

Fazer uma verificação falsa seria:

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

A principal diferença é usar, GetValuespois isso retorna como uma matriz.

Basta fazer isso em $(document).ready:

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

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

    }
});

Minha solução é:

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

Você pode encontrar mais aqui: http://www.blog.mieten.pl/2010/12/asp-net-mvc-custom-checkbox-as-solution-of-string-was-not-recognized-as-a- valid-boolean /

Eu tive quase o mesmo problema, mas o valor de retorno do meu controlador foi bloqueado com outros valores.

Encontrei uma solução simples, mas parece um pouco difícil.

Tente digitar o Viewbag.seu Controller e agora dê um nome comoViewbag.Checkbool

Agora mude para o modo de exibição e tente isso @Viewbag.Checkbool com isso, você obterá o valor do controlador.

Meus parâmetros de controlador são assim:

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

e minha caixa de seleção será atualizada assim:

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

Usando @mmacaulay, eu vim com isso para bool:

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

Se marcado ativo = verdadeiro

Se desmarcado, ativo = falso