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>");
}
}
Everyone coordinated well and worked hard to perfect product....
ReplyDeleteUI design services
I would highly recommend him and may maintain looking to him with regard to search engine optimization support.
ReplyDeleteSF design studio
Thanks to share these details it’s truly nice.
ReplyDeletecreative agency San Francisco
The problem is that you provide may be worth our time and also effort.
ReplyDeleteagencies in San Francisco