Crate On Off Toggle Button using CheckBox in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

hey,

i want to crate toggle on off button in asp.net using asp.net controls so please help me.

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi nid@patel,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .switch
        {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .switch input
        {
            opacity: 0;
        }
        
        .slider
        {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        .slider:before
        {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        
        input:checked + .slider
        {
            background-color: #2196F3;
        }
        
        input:focus + .slider
        {
            box-shadow: 0 0 1px #2196F3;
        }
        
        input:checked + .slider:before
        {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        
        /* Rounded sliders */
        .slider.round
        {
            border-radius: 34px;
        }
        
        .slider.round:before
        {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <center>
        <label class="switch">
            <asp:CheckBox ID="chkOnOff" runat="server" Checked="true" />
            <span class="slider round"></span>
        </label>
        <asp:Button ID="Button1" Text="Save" runat="server" OnClick="Save" />
    </center>
    </form>
</body>
</html>

C#

protected void Save(object sender, EventArgs e)
{
    string onOff = chkOnOff.Checked ? "On" : "Off";
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + onOff + "')", true);
}

VB.Net

Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
    Dim onOff As String = If(chkOnOff.Checked, "On", "Off")
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "", "alert('" & onOff & "')", True)
End Sub

Screenshot