web-dev-qa-db-fra.com

HTML.Checkboxfor to Toggle button HTML?

Est-il possible de convertir @ HTML.Checkboxfor en bouton bascule html? J'ai référé le style du bouton à bascule de https://www.w3schools.com/howto/howto_css_switch.asp

Actuellement, cela fonctionne en utilisant:

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

Changé en:

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

Le bouton à bascule ne fonctionne et ne revient au contrôleur que s'il est VÉRIFIÉ: enter image description here

sinon, il ne sera pas posté sur le contrôleur par défaut NON CONTRÔLÉ:

enter image description here

Toute aide serait appréciée! Merci!

htmlasp.net-mvccssasp.net-mvc-4html-helper
7
Edward.K

Sur la base de certaines expériences et découvertes, j'ai constaté que vous devez inclure un champ caché généré par l'aide (Html.CheckBoxFor) comme illustré ci-dessous:

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

Consultez l'exemple d'utilisation (modifiez simplement <input type="checkbox" /> à @Html.CheckBoxFor):

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

Pour vous assurer que la case est cochée côté client avant de faire une publication, vous pouvez utiliser le code jQuery ci-dessous:

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

Exemple de démonstration: . NET Fiddle

Références:

cases à cocher de style dans MVC 4

Comment puis-je appliquer un style CSS à Html.CheckBoxFor dans MVC 5

@ Html.checkboxfor - Récupère la valeur de la case à cocher en utilisant id

10
Tetsuya Yamamoto

C'est très simple, je l'ai implémenté dans mon projet. Il vous suffit de conserver la valeur de la case à cocher dans un HiddenFor.

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

Affichez ensuite votre bouton bascule dans la page. Par exemple,

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

Alors maintenant, lorsque l'utilisateur coche/décoche la case, appelez une méthode jquery et affectez la valeur à @ Html.HiddenFor (..). C'est tout.

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

Veuillez vérifier une fois ceci si ($ ("ceci"). Est (": vérifié")) à la place si ($ (ce) .val ( vrai)) == et attribuez la valeur en conséquence. Peu occupé, impossible de vérifier mon code :)

C'est tout. Maintenant, lorsque vous publiez votre page, vous définissez déjà la valeur de votre champ IsEnabled.

Dans la méthode Get, vous devez faire de même. Il vous suffit de vérifier la valeur de votre HiddenFor () et de prendre cette valeur et de l'attribuer à votre bouton HTML Toggle dans l'événement pageload de js.

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

C'est tout. Veuillez modifier le HTML en conséquence.

4
Basanta Matia