Die Komponente ejs-switch hat die Eigenart, das sie in einem Formular nicht mit übertragen wird, im Gegensatz zu klassischen Checkboxen

Um die Formulardaten die dann erfolgreich an den Server zu übertragen, müssen als erstes ein hidden-field angelegt werden und dann per JavaScript die Werte aus dem Formularfeld welches ejs-switch benutzt in das hidden-field übertragen werden. Der folgende Source Code zeigt die Verwendung des ejs-switch Elementes

<p>Manuelle Zeiterfassung <ejs-switch id="NVZeit" onlabel="ON" offlabel="OFF" checked="false" ></ejs-switch></p>

Der folgende Sourcecode muss in der cshtml Datei im Formular eingebettet werden

<input type="hidden" id="hiddenNVZeit" name="NVZeit" />

Um dieses hidden-field zu füllen benötigen wir noch zwei Änderungen:

Zum einen, eine Javascript Funktion die den Wert des switch Elementes in das hidden field transportiert.

<script>
    function transferSwitchValues() {
        document.getElementById('hiddenNVZeit').value = document.getElementById('NVZeit').ej2_instances[0].checked;
    }
</script>

Dafür ist es wichtig, das hinter der Klammer(‚hiddenNVZeit‘) ein Fragezeichen eingefügt wird. Wenn das der Fall ist, kann die Funktion auch arbeiten wenn der Switch gerade nicht angezeigt wird und auf einen Defaultwert gesetzt werden, oder mit seinem bestehenden Feldwert der vorher geladen wurde.

<script>
    function transferSwitchValues() {
var NVZeitSwitch = document.getElementById('hiddenNVZeit')?.ej2_instances[0];
if (NVZeitSwitch ) {
    document.getElementById('hiddenNVZeit').value = NVZeitSwitch .checked;
     }
else {
    document.getElementById('hiddenNVZeit').value = "true";
   }
}
</script>

Wenn der Defaultwert aus einer Variable kommen soll, ist es wichtig, das true klein geschrieben ist. Hierbei wird die Variable @originalWert im Code früher schon gesetzt beim Laden der Seite.

document.getElementById('hiddenNVZeit').value = @originalWert.ToString().ToLower()

Und zum anderen müssen wir dem Formular beibringen, das es vor dem Übermitteln der Daten noch die Funktion ausführen muss:

<form id="einst" asp-action="Save" asp-controller="Setup" method="post" onsubmit="transferSwitchValues()">

Mit diesen Einstellungen werden die Informationen aus einem ejs-switch Element auch an den Server übertragen

Zusätzliche Infos zum ejs-switch findet man auf der Webseite von Syncfusion