Switch On Off Button in Asp.net by using Bootstrap


In this article let me explain about how to create "Switch On | Off Button" by using Bootstrap in Asp.net. First, we need to download bootstrap file Download Bootstrap file and Read More...

Switch On Off Button in Asp.net by using Bootstrap

HTML Markup : Web Design (Default.aspx)

To implement this functionality we need to write the code like as shown below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Style/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="btn-group" role="group" aria-label="...">
    <asp:Button ID="btnOn" runat="server" CssClass="btn btn-success" Text="On" 
            onclick="btnOn_Click" />
    <asp:Button ID="btnOff" runat="server" CssClass="btn btn-default" Text="Off" 
            onclick="btnOff_Click" />
</div><br /><br />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </form>
</body>
</html>

C# Coding : Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnOn_Click(object sender, EventArgs e)
    {
        Label1.Text = "On";
        btnOn.CssClass = "btn btn-success";
        btnOff.CssClass = "btn btn-default";
    }
    protected void btnOff_Click(object sender, EventArgs e)
    {
        Label1.Text = "Off";
        btnOn.CssClass = "btn btn-default";
        btnOff.CssClass = "btn btn-danger";
    }
}

Create Switch On Off Button in Asp.net video


0 Komentar untuk "Switch On Off Button in Asp.net by using Bootstrap"

Back To Top