Toggle Switches

ToggleSwitch.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel;

namespace WorkStandard.Pages.controls
{
    public class ToggleSwitchModel : PageModel
    {
        [BindProperty]
        [DisplayName("Auto logon")]
        public bool IsAutoLogon { get; set; }

        [BindProperty]
        [DisplayName("Share logon status")]
        public bool IsShareLogonStatus { get; set; } = true;

        public void OnPost()
        {
            System.Diagnostics.Debug.WriteLine($"Auto logon: {IsAutoLogon}");
            System.Diagnostics.Debug.WriteLine($"Share logon status: {IsShareLogonStatus}");
        }
    }
}

→ Where Debug.WriteLine appear

ToggleSwitch.cshtml

@page
@model WorkStandard.Pages.controls.ToggleSwitchModel

<form method="post">
    <div class="mb-3 form-check form-switch">
        <input asp-for="IsAutoLogon" class="form-check-input" role="switch" />
        <label asp-for="IsAutoLogon" class="form-check-label"></label>
    </div>
    <div class="mb-3 form-check form-switch">
        <input asp-for="IsShareLogonStatus" class="form-check-input" role="switch" />
        <label asp-for="IsShareLogonStatus" class="form-check-label"></label>
    </div>
    <div>
        <input type="submit" class="btn btn-primary" />
    </div>
</form>

The CSS classes...

• mb-3 Set little margin at bottom.→ Spacing
• form-check form-switch form-check-input Give the input a Bootstrap look of toggle switches. → Switches
• form-check form-switch form-check-label Give the input a Bootstrap look of toggle switches. → Switches
• btn btn-primary Give the button a Bootstrap look to indicate that it's a key feature.→ Buttons