Es de todos modos hay que convertir el @HTML.Checkboxfor en alternar botón de html?
He de referir el botón de alternar el estilo de https://www.w3schools.com/howto/howto_css_switch.asp

Actualmente su trabajo mediante :

@Html.CheckBoxFor(model => model.IsEnabled, new { @checked = "checked", @Name = "DelegateChkBox" })

Cambiado a:

    <td class="slider-td">
         <label class="switch">
            <input name="DelegateChkBox" id="IsEnabled" type="checkbox" value="true" data-val-required="The IsEnabled field is required." data-val="true" data-bind="checked: IsEnabled">
          <div class="slider round"></div>
          </label>
   </td>

El botón sólo funciona y devolución para controlador si está ACTIVADA:
HTML.Checkboxfor para cambiar el botón de HTML?

otra cosa no devolución al controlador por defecto DESACTIVADA :

HTML.Checkboxfor para cambiar el botón de HTML?

Cualquier ayuda será apreciada!
Gracias!

  • Posiblemente no relacionados, pero usted tiene una propiedad denominada IsEnabled pero, a continuación, cambiar el name atributo DelegateChkBox que nunca se unen a su modelo (nunca se debe cambiar la name atributo). Y no establecer la checked atributo – que es hecho correctamente por el CheckBoxFor() método basado en el valor de IsEnabled.
  • Y desmarcar las casillas de verificación no presentar un valor, que es la razón por la CheckBoxFor() método genera 2 entradas – una <input type="checkbox" .. value="true" /> y un <input type="hidden" value="false" />
  • Y usted puede utilizar @Html.CheckBox() en lugar de la creación manual de html – sólo tienes que modificar el css selectores
  • Trate de Switchery plugin
InformationsquelleAutor Edward.K | 2017-03-23

2 Comentarios

  1. 8

    A partir de algunos experimentos y resultados, he encontrado que usted necesita incluir oculto campo generado por el ayudante ( Html.CheckBoxFor ), como se muestra por el estilo a continuación:

    <style type="text/css">
    .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    }
    .switch input {display:none;}
    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    }
    .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    }
    /* include generated hidden field here */
    input[type="checkbox"]:checked + input[type="hidden"] + .slider,
    input[type="checkbox"]:checked + .slider {
    background-color: #2196F3;
    }
    /* include generated hidden field here */
    input[type="checkbox"]:focus + input[type="hidden"] + .slider,
    input[type="checkbox"]:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
    }
    /* include generated hidden field here */
    input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
    input[type="checkbox"]:checked + .slider:before {
    transform: translateX(26px);
    }
    /* Rounded sliders */
    .slider.round {
    border-radius: 34px;
    }
    .slider.round:before {
    border-radius: 50%;
    }
    </style>

    Ver ejemplo de uso (sólo cambian <input type="checkbox" /> a @Html.CheckBoxFor):

    <label class="switch">
    @Html.CheckBoxFor(model => model.IsEnabled)
    <div class="slider round">
    </div>
    </label>

    Para garantizar la casilla de verificación está activada en el lado del cliente antes de hacer una devolución de datos, puede utilizar jQuery código de abajo:

    //change event may modified to other events
    $("#IsEnabled").change(function () {
    //check if checkbox is being checked
    //taken from /a/23007488 by Alexandru Chichinete
    if ($("#IsEnabled").is(":checked"))
    {
    //enable form submit
    }
    });

    Demo de ejemplo: .NET Violín

    Referencias:

    Estilo casillas de verificación en MVC 4

    ¿Cómo puedo aplicar un estilo CSS a formato Html.CheckBoxFor en MVC 5

    @Html.checkboxfor – Get casilla el valor usando la id

    • Todo lo que necesita es cambiar la + (adyacente) selector para un ~ (hermanos) selector en la 3 clases pertinentes (y no es necesario javascript)
    • AFAIK, adyacente selectores sólo un mínimo aquí (por supuesto, los hermanos selectores también trabajar demasiado), y el JS parte sólo se utiliza si el OP quiere presentar el formulario basado en el valor activado.
    • gracias mucho @tetsuya yamamoto para esta solución! que las rocas!
  2. 4

    Esto es muy simple, lo he implementado en mi proyecto.
    Sólo tiene que mantener el valor de la casilla de verificación en un HiddenFor.

    @Html.HiddenFor(model => model.IsEnabled, new{@id = "DelegateChkBox"})

    A continuación, mostrar su botón de Alternar en la página. Por ejemplo,

     <td class="slider-td">
    <label class="switch">
    <input name="DelegateChkBox" id="IsEnabled" type="checkbox" value="true" 
    data-val-required="The IsEnabled field is required." data-val="true" 
    data-bind="checked: IsEnabled">
    <div class="slider round"></div>
    </label>
    </td>

    Así que ahora cuando el usuario marque/desmarque la casilla de verificación, llamar a un método jquery y asignar el valor a @Html.HiddenFor(..). Eso es todo.

    $('#IsEnabled').change(function(){
    if($(this).val()==true)
    {
    $('#DelegateChkBox').val(true);
    }
    else
    {
    $('#DelegateChkBox').val(false);
    }
    })

    Por favor, compruebe una vez que este if ($(«este»).es(«:checked»)) lugar if($(this).val()==true) y asignar el valor en consecuencia. Poco ocupado, no podía revisar mi código 🙂

    Que es. Ahora, cuando después de volver la página, que ya establece el valor de su IsEnabled campo.

    De Obtener el método que tiene que hacer como el mismo. Sólo tiene que comprobar el valor de su HiddenFor() y tomar ese valor y asignar el código HTML del botón de Alternar en pageload caso de js.

    $(function() {
    if($('#DelegateChkBox').val()== true)
    {
    $('#IsEnabled').prop("disabled", false);
    }
    else
    {
    $('#IsEnabled').prop("disabled", true);
    }
    });

    Que es. Por favor, cambie el código HTML en consecuencia.

    • gracias por la respuesta, he intentado hacer con HiddenFor (), pero el regulador no funciona ( no se puede deslizar a la izquierda o a la derecha ) . Eso es lo que estoy luchando después de añadido HiddenFor(). De todos modos voy a seguir intentando, gracias mucho!
    • Es por eso que he mencionado «por Favor, cambie el código HTML en consecuencia». Yo no comprobar el código HTML del botón de Alternar. U sólo tiene que comprobar ur botón de Alternar y seguir mis pasos. Esta es una manera muy fácil. Déjame saber después de trabajar.
    • Gracias chicos por su contribución, problema resuelto mediante el uso de tetsuya yamamoto solución.
    • Feliz de que hayas resuelto que 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here