How to use Bootstrap Badges in Asp.net


Bootstrap Badge

Badges are numerical indicators of how many items are associated with a link or a normal text.
In this tutorials i'm going to show you how to use Bootstrap badges in asp.net to display number of employees whose belongs to related cities, for example you can see in below images

In my Previous Bootstrap with Asp.net Articles
  1. Bootstrap JQuery Tab in Asp.net
  2. What is Bootstrap?

Bootstrap badges in asp.net

i hope you understand by seeing above image, actually my requirement is in above image is whenever i add employee name with city and if i click on add button that details will store in database table is employee and retrieve that data and display in right side column no of employees in city wise.

Create Database

creating employee table

create table employee(
name varchar(20),
city varchar(20)
)

Design HTML Page

In this block you can see html code that exactly which i used to design in above images.

<%@ 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 : Page Load


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";
    }
}

C# Coding : Add Button Click

  • 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();
        }

    }

C# Coding : Binding No Of Employees through City Wise

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();
        }
    }
Tag : bootstrap
0 Komentar untuk "How to use Bootstrap Badges in Asp.net"

Back To Top