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...
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";
}
}
0 Comments