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

Last Reply 2 months ago By dharmendr

Posted 2 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 2 months ago

Hi nauna,

For showing total percentage of user profile completion, you may need to consider the parameters like firstname, lastname, email, address etc. to calculate the percentage of completion.

You can give pre defined percentage for each parameter, If the user has provided firstname(20%), lastname(20%), email(30%), address(30%) then you can mention the percentage completed. Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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 () {
            CalculatePercentage();
        });
        function CalculatePercentage() {
            var firstNamePercentage = 20;
            var lastNamePercentage = 20;
            var emailPercentage = 30;
            var addressPercentage = 30;
            var percent = 0;
            if ($('#txtFirstName').val() != '') {
                percent += firstNamePercentage;
            }
            if ($('#txtLastName').val() != '') {
                percent += lastNamePercentage;
            }
            if ($('#txtEmail').val() != '') {
                percent += emailPercentage;
            }
            if ($('#txtAddress').val() != '') {
                percent += addressPercentage;
            }
            $('.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>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td>First Name</td>
            <td><asp:TextBox ID="txtFirstName" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><asp:TextBox ID="txtLastName" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><asp:TextBox ID="txtEmail" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><asp:TextBox ID="txtAddress" runat="server" onchange="CalculatePercentage()" CssClass="form-control"></asp:TextBox></td>
        </tr>
    </table>
    <br />
    Profile Completed :
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-success">
        </div>
    </div>
    </form>
</body>
</html>

Screenshot


Posted 2 months ago

hello,

 

thank you so much but i need it dynamically so i can get value from database like i can check from sql select firstname from profile and in page behind or javascript i can pass if firstname!="" so progress bar fill 20% this is i need dynamic pls advice


Posted 2 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>