In this article, we are going to discuss Bootstrap ProgressBar in Asp.Net.We will handle the value of the progress bar using our c# coding. We will also discuss the plugins and styles that are required for Progress Bar.
Let's start
Step-1
Add a new WebForm to your Project
Step-2 (Link the bootstrap to your page)
1st-way :-(download to your project)
=> (make sure you have connected to the internet)
Solution Explorer --> Right Click on "References" -->Manage NuGet Packages.. --> Browse --> "Bootstrap" -->
Select this option
--> Install.
=> close the package manager tab
Expand the "Content" folder present in the Solution Explorer--> drag the "bootstap.css" stylesheet link to your head section of the webform.
Select this option--> Install.
=> close the package manager tab
Expand the "Content" folder present in the Solution Explorer--> drag the "bootstap.css" stylesheet link to your head section of the webform.
2nd-way :-(link from Bootstrap CDN)
=> Paste the link on your browser "https://getbootstrap.com/" --> Scroll down and Copy the CSS link
Copy this link directly to the head Section of your webform
"<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />"
=> Paste the link on your browser "https://getbootstrap.com/" --> Scroll down and Copy the CSS link
(or)
"<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />"
Step-3(Link of Bootstrap4 and Some styles for your UI)
In the <head></head> section write the following styles and link
<head>
<title><title>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<style>
.container {
border:1px solid;
padding:35px;
}
.progress {
border-radius: 10px;
width: 100%;
height: 31px;
text-align:center;
}
.progress-bar {
border-radius: 0px;
padding: 5px;
}
.wrapper > img {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
</style>
<head>
<head>
Step-4(UI)
write the following in the <form></form> tag
<div class="container">
<div class="row">
<div class="page-header">
<h2>Bootstrap Progress Bar : powered by
<a href="https://www.mypalmbook.com/" target="_blank" style="color:gold">My Palmbook</a>
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3" >
<asp:TextBox ID="TextBox1" TextMode="Number" placeholder="For 1st Bar" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="col-lg-3">
<asp:TextBox ID="TextBox2" TextMode="Number" placeholder="For 2nd Bar" CssClass="form-control" runat="server"></asp:TextBox>
</div>
<div class="col-lg-2" >
<asp:Button ID="Button1" CssClass="btn btn-info" runat="server" Text="Test" OnClick="Button1_Click" />
</div>
</div>
<div class="row" >
<asp:Label Text="The value of 2 textboxes will reflect on multiple progressbar" runat="server"></asp:Label>
</div>
<br />
<div class="row">
<h5>Progress Bar</h5>
<div class="col-lg-12" >
<div class="progress">
<div class="progress-bar" runat="server" id="divprogress1" >
<asp:Label ID="lblPer1" runat="server"></asp:Label>
</div>
</div>
</div>
</div>
<div class="row">
<h5>Animated Progress Bar</h5>
<div class="col-lg-12" >
<div class="progress" style="height:10px">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" runat="server" id="divprogress2" >
<asp:Label ID="lblPer2" runat="server"></asp:Label>
</div>
</div>
</div>
</div>
<div class="row">
<h5>Multiple Progress Bar</h5>
<div class="col-lg-12" >
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" runat="server" id="div1" >
<asp:Label ID="lblPer3" runat="server"></asp:Label>
</div>
<div class="progress-bar bg-warning" runat="server" id="div2" >
<asp:Label ID="lblPer4" runat="server"></asp:Label>
</div>
</div>
</div>
</div>
</div>
To work with bootstrap 3 we have to link the lower version of the bootstrap CSS file instead of bootstrap4 link.link is below
"<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>"
- 1st progress bar is a basic progress bar.
- 2nd progress bar is a stripped , animated and a colored progress bar. <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" runat="server" id="divprogress2" >
- In the place of we can use bg-success,bg-warning,bg-danger also.
- To achieve color on the progress bar in Bootstrap3 we can use progress-bar-info,progress-bar-warning,progress-bar-danger, and progress-bar-success also.
- To animate the progress bar we can use "active" in the place of "progress-bar-animated" ,if you are using Bootstrap3
To work with bootstrap 3 we have to link the lower version of the bootstrap CSS file instead of bootstrap4 link.link is below
"<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>"
Step-5(Some Codings to achieve dynamic testing of ProgressBar)
protected void Button1_Click(object sender, EventArgs e)
{
try
{
int pross1 = int.Parse(TextBox1.Text);
int pross2 = int.Parse(TextBox2.Text);
if (pross1 > -1 && pross1 < 101 && pross2 > -1 && pross2 < 101)
{
divprogress1.Style.Clear();
divprogress1.Style.Add("width", pross1 + "%");
lblPer1.Text = pross1 + "%";
divprogress2.Style.Clear();
divprogress2.Style.Add("width", pross2 + "%");
lblPer2.Text = pross2 + "%";
div1.Style.Clear();
div1.Style.Add("width", pross1 + "%");
lblPer3.Text = pross1 + "%";
div2.Style.Clear();
div2.Style.Add("width", pross2 + "%");
lblPer4.Text = pross2 + "%";
}
else
{
Response.Write("<script>alert('Enter a valid number')</script>");
}
}
catch (Exception ex)
{
Response.Write("<script>alert('Enter a valid number')</script>");
}
}
