Hi nauna,
Check this example. Now please take its reference and correct your code.
HTML
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="container">
<asp:ListView ID="ListView1" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<div class="col-md-3 padding15">
<div class="camp">
<div class="padding15">
<h5 class="no-margin upp"><%#Eval("PackageName") %></h5>
<p class="h-50 small"><%#Eval("description") %></p>
<p class=" large l-bold line30">
<small class="grey-c small">Donation Amount </small>
<br />
<span class="btn w-100 radius theme-bg no-padding" style="height: 3px;"></span>
<strong>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("received") %>'></asp:Label>raised
</strong>
<asp:Label ID="Label2" runat="server" Text='<%#Eval("donationamount") %>'></asp:Label>
<a class="pull-right btn theme-bg white-c medium m-bold margintb-15" href="detail?ID=<%#Eval("donationmasterguid") %>">Donate Now</a>
</p>
<p>
<div class="progress progress-striped">
<div id='dvProgress' runat="server" data-percentage=''></div>
</div>
</p>
</div>
</div>
</div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-success">Save</asp:LinkButton>
</ItemTemplate>
</asp:ListView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<style type="text/css">
.bar-success {
background-color: #5cb85c;
}
.bar-info {
background-color: #5bc0de;
}
.bar-warning {
background-color: #f0ad4e;
}
.bar-danger {
background-color: #d9534f;
}
</style>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function ShowProgressBar() {
$('[id*=dvProgress]').each(function () {
var percent = $(this).attr("data-percentage");
$(this).removeClass().addClass('progress-bar');
if (percent > 80) {
$(this).addClass('progress-bar-success');
}
else if (percent > 50 && percent <= 80) {
$(this).addClass('progress-bar-info');
}
else if (percent > 30 && percent <= 50) {
$(this).addClass('progress-bar-warning');
}
else {
$(this).addClass('progress-bar-danger');
}
$(this).width(parseInt(percent) + '%');
$(this).text(parseInt(percent) + '%');
});
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
ShowProgressBar();
}
});
};
</script>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add("PackageName");
dt.Columns.Add("description");
dt.Columns.Add("received");
dt.Columns.Add("donationamount");
dt.Columns.Add("donationmasterguid");
dt.Rows.Add("Package 1", "Covid-19", "500", "1000", "1");
dt.Rows.Add("Package 2", "Covid-19", "800", "1000", "2");
dt.Rows.Add("Package 3", "Covid-19", "250", "1000", "3");
ListView1.DataSource = dt;
ListView1.DataBind();
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowProgressBar();", true);
}
}
protected void OnItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
decimal donationReceived = Convert.ToDecimal(DataBinder.Eval(e.Item.DataItem, "received").ToString());
decimal donationAmount = Convert.ToDecimal(DataBinder.Eval(e.Item.DataItem, "donationamount").ToString());
string percentage = ((donationReceived / donationAmount) * 100).ToString();
(e.Item.FindControl("dvProgress") as HtmlGenericControl).Attributes.Add("data-percentage", percentage);
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As Data.DataTable = New Data.DataTable()
dt.Columns.Add("PackageName")
dt.Columns.Add("description")
dt.Columns.Add("received")
dt.Columns.Add("donationamount")
dt.Columns.Add("donationmasterguid")
dt.Rows.Add("Package 1", "Covid-19", "500", "1000", "1")
dt.Rows.Add("Package 2", "Covid-19", "800", "1000", "2")
dt.Rows.Add("Package 3", "Covid-19", "250", "1000", "3")
ListView1.DataSource = dt
ListView1.DataBind()
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "ShowProgressBar();", True)
End If
End Sub
Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As ListViewItemEventArgs)
If e.Item.ItemType = ListViewItemType.DataItem Then
Dim donationReceived As Decimal = Convert.ToDecimal(DataBinder.Eval(e.Item.DataItem, "received").ToString())
Dim donationAmount As Decimal = Convert.ToDecimal(DataBinder.Eval(e.Item.DataItem, "donationamount").ToString())
Dim percentage As String = ((donationReceived / donationAmount) * 100).ToString()
TryCast(e.Item.FindControl("dvProgress"), HtmlGenericControl).Attributes.Add("data-percentage", percentage)
End If
End Sub
Screenshot