ASP.net set width to value stored in c#

Question

I have a bootstrap progress bar in my asp.net page which has static values which hold the data which populates the progress bar. The progress bar gets it values from the width set in the asp. Seen below.

 <div class="progress"> <div class="progress-bar progress-bar-success" style="width:75%"> <span class="sr-only">75% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 25%"> <span class="sr-only">25% Complete (warning)</span> </div> </div>

Ideally instead of having static values like (75%) i want to pass through a value worked from a calculation in the c# file which would populate the style="width:%" in the front end.

The code from my c# file is below:

Double TotalFees = (double)FeePaidInt1 + (double)FeePaid2;
                Double PaidPercent = (double)FeePaidInt1 / (double)TotalFees;
                Double FinalPercent = (double)PaidPercent * 100;


                Double UnPaidPercent = (double)FeePaid2 / (double)TotalFees;
                Double FinalUnPaidPercent = (double)UnPaidPercent * 100;

I would like to use FinalPercent and FinalUnPaidPercent to populate the progress bar.

I thought of setting the FinalPercent & FinalUnPaid as sessions and trying to call the session value within style="SessionValueHere%" but i am unsure on how to do this.

Answer 1

Give your <div> element an ID and set the runat="server" attribute, like so:

<div class="progress-bar progress-bar-success" style="width:75%" ID="progressBarSuccess" runat="server" >
  <span class="sr-only">75% Complete (success)</span>
</div>

You'll then be able to access its style in the code-behind during a post-back, like so:

progressBarSuccess.Style["width"] = String.Format("{0}%", (int)FinalPercent);

Hope that helps.

Answer 2

<div class="progress">
        <div class="progress-bar progress-bar-success" ID="progressBarSuccess" runat="server" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
            <asp:Label ID="lblProgreeBarMsg" runat="server"></asp:Label>
        </div>
    </div>

C# code:

lblProgreeBarMsg.Text = dt3.Rows[0]["StatusText"].ToString();
progressBarSuccess.Style["width"] = dt3.Rows[0]["StatusValue"].ToString()+"%";