Show User Profile completed percentage in Progress bar using jQuery in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

hello,

i have 4 fields in database 

first name

last name

email

address

i want to show a proflie completed bar to user like if user has only fill first name so it shows 20% filled bar and 80% blank bar should check value from data like 

like this https://bootsnipp.com/snippets/b4ZB6

Posted 5 months ago

Hi nauna,

For dynamic percentage calculation declare a property in code behind. Then based on your logic calculate the percentage and assign the property value in code behind.

Then using the percent in JavaScript display the pregress bar.

Check this example.

C#

protected int Percentage { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
    // Calculate precentage based on your logic.
    Percentage = 60;
}

JavaScript

<script type="text/javascript">
    $(function () {
        CalculatePercentage('<%= this.Percentage %>');
    });
    function CalculatePercentage(percent) {
        $('.progress').addClass('progress-striped').addClass('active');
        $('.progress .progress-bar:first').removeClass().addClass('progress-bar')
        .addClass((percent < 40) ? 'progress-bar-danger' : ((percent < 80) ? 'progress-bar-warning' : 'progress-bar-success'));
        $('.progress .progress-bar:first').width(percent + '%');
        $('.progress .progress-bar:first').text(percent + '%');
    }
</script>