Creating Switch On/Off Button in ASP.NET Using Bootstrap
In this tutorial, we will explore how to create a stylish switch On/Off button in ASP.NET using Bootstrap. Bootstrap is a popular front-end framework that simplifies the process of designing and styling web applications.
To get started, you'll need to download the Bootstrap file from the official website. You can find more information and download the file here.
Now, let's dive into the implementation.
HTML Markup: Web Design (Default.aspx)
To implement the switch functionality, we'll start by creating the HTML markup in the Default.aspx file. Below is a snippet of the code:
<%@ 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
Now, let's take a look at the C# code in the Default.aspx.cs file:
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";
}
}
Video Tutorial: Create Switch On/Off Button in ASP.NET
For a visual guide on creating the switch On/Off button in ASP.NET using Bootstrap, you can watch the following video tutorial:
This tutorial provides a step-by-step guide on implementing a stylish and interactive switch button in your ASP.NET application. Feel free to customize the styles and functionality based on your project requirements.
0 Comments