konvertiert CheckBoxFor auf jQuery UI-Taste

Question

ich einige Kontrollkästchen in einem MVC-app, ich auf die Phantasie JQuery UI-Tasten hier so detailliert konvertieren möchte: https://jqueryui.com/button/#checkbox

Mein Code:

<td align="center">@Html.CheckBoxFor(model => model.rJanVal)</td> 

Beispielcode:

<input type="checkbox" id="check"><label for="check">Toggle</label> 

Wie mache ich das? Ich verstehe nicht genug darüber, was hier passiert "(model => model.rJanVal)", damit ich den Code konvertieren kann. Neu bei C# und MVC, darum kämpfe ich.

Bitte helfen :)

Answer 1

(model => model.rJanVal) bei der Erzeugung der Attribute name und id relativ zum Grundstück führt Sie (nur für die HTML-Helfer Erzeugung von Eingaben, wählt Textfelder, ...) gab.

Für labels wird das Attribut for generiert.

Ihr Kontrollkästchen sollte also name="rJanVal" und id="rJanVal" haben.

Und die label wird for="rJanVal" haben.

So können Sie Ihr CSHTML Code wie folgt schreiben:

<td align="center"> 
    <div id="buttons> 
     @Html.CheckBoxFor(model => model.rJanVal) 
     @Html.LabelFor(model => model.rJanVal) 
    </div> 
</td> 

Und die JS:

$(function() { 
    $("#rJanVal").button(); 
    $("#buttons").buttonset(); 
}); 

Answer 2

Warum würden Sie es konvertieren? Fügen Sie einfach eine Klasse zu der Rasierer-Checkbox wie folgt hinzu:

@Html.CheckBoxFor(model => model.rJanVal, new { @class = "jqueryChkbox" }) 

und rufen Sie dann einfach die jquery-Funktion darüber.

<script> 
$(document).ready(function(){ 
    $(".jqueryChkbox").button(); 
}); 
</script> 

Wenn Sie eine Tastengruppe:

<div id="jqueryChkboxGroup"> 
    @Html.CheckBoxFor(model => model.foo) 
    @Html.CheckBoxFor(model => model.bar) 

<div> 

<script> 
$(document).ready(function(){ 
    $("#jqueryChkboxGroup").buttonset(); 
}); 
</script>