Badges in web development act as numeric indicators associated with a link or text, providing a visual representation of the count of items related to that link or text. In this tutorial, we will explore how to leverage Bootstrap badges in an ASP.NET environment to display the number of employees based on their respective cities.
Introduction
Badges can significantly enhance the user experience by providing quick insights into data distribution. In this tutorial, we'll demonstrate the implementation of Bootstrap badges in an ASP.NET application to showcase the number of employees belonging to different cities.
Previous Bootstrap with ASP.NET Articles
Before diving into the implementation, let's take a quick look at some of the previous articles related to Bootstrap in ASP.NET:
Implementation
Database Setup:
Before we start with the implementation, we need to set up a database table to store employee details. Below is the SQL script for creating the "employee" table:
CREATE TABLE employee(
name varchar(20),
city varchar(20)
)
HTML Page Design
The HTML page design includes input fields for adding employee details, a button to trigger the addition of employees to the database, and a section to display the count of employees in each city using Bootstrap badges.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dashboard.aspx.cs" Inherits="Dashboard" %>
<!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="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script src="JS/jquery-2.2.0.min.js" type="text/javascript"></script>
<style type="text/css">
.btn-inverse, .btn-inverse:visited
{
background-color:#222;
color:#fff;
border:1px solid #222;
position:relative;
padding:5px 15px 5px 10px;
width:auto;
-webkit-border-radius:50px;
-ms-border-radius:50px;
}
.btn-inverse:hover, .btn-inverse:active
{
background-color:#fff;
color:#848484;
border:1px solid #adadad;
position:relative;
padding:5px;
padding:5px 15px 5px 10px;
-webkit-border-radius:50px;
-ms-border-radius:50px;
}
</style>
<script type="text/javascript">
$undefineddocument).readyundefinedfunction undefined) {
$undefined'.btn-inverse').clickundefinedfunction undefined) {
$undefined'.dropdown-menu').toggleundefined);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Default.aspx">Project Name</a>
</div>
<!-- Single button -->
<div class="navbar-header navbar-right">
<button type="button" class="btn-inverse" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="lblwelcome" runat="server"></asp:Label>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dashboard</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">LogOut</a></li>
</ul>
</div>
</div>
</nav>
<div>
<table class="table" style="width:100%;">
<tr>
<th class="btn-danger" colspan="2">Adding Employee Detaila :</th>
</tr>
<tr>
<td style="width:50%;">
<table class="table table-bordered">
<tr>
<td>Name : </td>
<td>
<asp:TextBox ID="txtname" runat="server" CssClass="form-control"></asp:TextBox>
</td>
</tr>
<tr>
<td>Choose City : </td>
<td>
<asp:DropDownList ID="ddlcity" runat="server" CssClass="dropdown-header">
<asp:ListItem Text="Select City" Value="0"></asp:ListItem>
<asp:ListItem Text="Delhi"></asp:ListItem>
<asp:ListItem Text="Mumbai"></asp:ListItem>
<asp:ListItem Text="Hyderabad"></asp:ListItem>
<asp:ListItem Text="Banglore"></asp:ListItem>
<asp:ListItem Text="Chennai"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btn_Add" runat="server" Text=" ADD " CssClass="btn btn-primary"
onclick="btn_Add_Click" />
</td>
</tr>
</table>
</td>
<td style="width:50%; float:right;">
<ul class="list-group">
<li class="list-group-item list-group-item-info"><span id="spanHyd" runat="server" class="badge">0</span>Hyderabad</li>
<li class="list-group-item"><span id="spanChennai" runat="server" class="badge">0</span>Chennai</li>
<li class="list-group-item list-group-item-warning"><span id="spanbanglore" runat="server" class="badge">0</span>Banglore</li>
<li class="list-group-item list-group-item-danger"><span id="spandelhi" runat="server" class="badge">0</span>Delhi</li>
<li class="list-group-item list-group-item-success"><span id="spanmumbai" runat="server" class="badge">0</span>Mumbai</li>
</ul>
</td>
</tr>
</tr>
</table>
</div>
</form>
</body>
</html>
C# Coding:
Now, let's take a look at the C# code-behind for handling page events and database interactions.
Page Load Event
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
public partial class Dashboard : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString);
string query;
protected void Page_Load(object sender, EventArgs e)
{
lblwelcome.Text = "welcome User1";
}
}
Add Button Click Event
- This block of code is only used to store employee data which means employee name and city will store in database table when you click on add button.
- And another thing is that we are calling a method i.e "BindNoOfEmployeesInCity()" method.
protected void btn_Add_Click(object sender, EventArgs e)
{
query = "Insert into employee values('" + txtname.Text + "','" + ddlcity.SelectedItem.Text + "')";
try
{
con.Open();
SqlCommand cmd = new SqlCommand(query, con);
cmd.ExecuteNonQuery();
BindNoOfEmployeesInCity();
}
catch (Exception ex)
{
throw ex;
}
finally
{
con.Close();
}
}
BindNoOfEmployeesInCity Method
In this method i'm using a sql query actually that query is used to count number of records based on city from employee table.
private void BindNoOfEmployeesInCity()
{
query = "select total=COUNT(*),city from employee group by city";
try
{
SqlDataAdapter da = new SqlDataAdapter(query, con);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
string total;
string cityname = ds.Tables[0].Rows[i]["city"].ToString();
//this if statement i'm using simple condition that whose city names is so on so.
//and that cityname match with that string then its allow to enter to loop
//and getting count of employee record whose belongs to that city and assign
if (cityname == "Hyderabad")
{
total = ds.Tables[0].Rows[i]["total"].ToString();
spanHyd.InnerText = total;
}
if (cityname == "Banglore")
{
total = ds.Tables[0].Rows[i]["total"].ToString();
spanbanglore.InnerText = total;
}
if (cityname == "Chennai")
{
total = ds.Tables[0].Rows[i]["total"].ToString();
spanChennai.InnerText = total;
}
if (cityname == "Delhi")
{
total = ds.Tables[0].Rows[i]["total"].ToString();
spandelhi.InnerText = total;
}
if (cityname == "Mumbai")
{
total = ds.Tables[0].Rows[i]["total"].ToString();
spanmumbai.InnerText = total;
}
}
}
}
catch (Exception ex)
{
throw ex;
}
finally
{
con.Close();
}
}
Conclusion
In this tutorial, we have explored the integration of Bootstrap badges in an ASP.NET application to visually represent the count of employees based on their respective cities. This implementation enhances the user interface and provides a clear overview of data distribution. Feel free to customize and extend this solution to meet the specific requirements of your application.
0 Comments