ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Show User Profile completed percentage in Progress bar using jQuery in ASP.Net<p>Hi&nbsp;<a class="username" rel="nauna">nauna,</a></p> <p>For showing total percentage of user profile completion, you may need to consider the parameters like firstname, lastname, email,&nbsp;address&nbsp;etc. to calculate the percentage of completion.</p> <p>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.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; .bar-success { background-color: #5cb85c; } .bar-info { background-color: #5bc0de; } .bar-warning { background-color: #f0ad4e; } .bar-danger { background-color: #d9534f; } &lt;/style&gt; &lt;link type=&#34;text/css&#34; rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-1.11.1.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { CalculatePercentage(); }); function CalculatePercentage() { var firstNamePercentage = 20; var lastNamePercentage = 20; var emailPercentage = 30; var addressPercentage = 30; var percent = 0; if ($(&#39;#txtFirstName&#39;).val() != &#39;&#39;) { percent += firstNamePercentage; } if ($(&#39;#txtLastName&#39;).val() != &#39;&#39;) { percent += lastNamePercentage; } if ($(&#39;#txtEmail&#39;).val() != &#39;&#39;) { percent += emailPercentage; } if ($(&#39;#txtAddress&#39;).val() != &#39;&#39;) { percent += addressPercentage; } $(&#39;.progress&#39;).addClass(&#39;progress-striped&#39;).addClass(&#39;active&#39;); $(&#39;.progress .progress-bar:first&#39;).removeClass().addClass(&#39;progress-bar&#39;) .addClass((percent &lt; 40) ? &#39;progress-bar-danger&#39; : ((percent &lt; 80) ? &#39;progress-bar-warning&#39; : &#39;progress-bar-success&#39;)); $(&#39;.progress .progress-bar:first&#39;).width(percent + &#39;%&#39;); $(&#39;.progress .progress-bar:first&#39;).text(percent + &#39;%&#39;); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;First Name&lt;/td&gt; &lt;td&gt;&lt;asp:TextBox ID=&#34;txtFirstName&#34; runat=&#34;server&#34; onchange=&#34;CalculatePercentage()&#34; CssClass=&#34;form-control&#34;&gt;&lt;/asp:TextBox&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Last Name&lt;/td&gt; &lt;td&gt;&lt;asp:TextBox ID=&#34;txtLastName&#34; runat=&#34;server&#34; onchange=&#34;CalculatePercentage()&#34; CssClass=&#34;form-control&#34;&gt;&lt;/asp:TextBox&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Email&lt;/td&gt; &lt;td&gt;&lt;asp:TextBox ID=&#34;txtEmail&#34; runat=&#34;server&#34; onchange=&#34;CalculatePercentage()&#34; CssClass=&#34;form-control&#34;&gt;&lt;/asp:TextBox&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Address&lt;/td&gt; &lt;td&gt;&lt;asp:TextBox ID=&#34;txtAddress&#34; runat=&#34;server&#34; onchange=&#34;CalculatePercentage()&#34; CssClass=&#34;form-control&#34;&gt;&lt;/asp:TextBox&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; Profile Completed : &lt;div class=&#34;progress progress-striped&#34;&gt; &lt;div class=&#34;progress-bar progress-bar-success&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/tAA1OKX.gif" alt="" width="265" height="277" /></span></strong></p>https://www.aspforums.net:443/Threads/396676/Show-User-Profile-completed-percentage-in-Progress-bar-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/396676/Show-User-Profile-completed-percentage-in-Progress-bar-using-jQuery-in-ASPNet/Thu, 13 Jun 2019 04:25:02 GMTShow User Profile completed percentage in Progress bar using jQuery in ASP.Net<p>hello,</p> <p>&nbsp;</p> <p>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</p>https://www.aspforums.net:443/Threads/396676/Show-User-Profile-completed-percentage-in-Progress-bar-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/396676/Show-User-Profile-completed-percentage-in-Progress-bar-using-jQuery-in-ASPNet/Thu, 13 Jun 2019 04:29:06 GMTShow User Profile completed percentage in Progress bar using jQuery in ASP.Net<p>Hi&nbsp;nauna,</p> <p>For dynamic percentage calculation declare a property in code behind. Then based on your logic calculate the percentage and assign the property value in&nbsp;code behind.</p> <p>Then using the&nbsp;percent in JavaScript display the pregress bar.</p> <p>Check this example.</p> <p><strong><span style="text-decoration: underline;">C#</span></strong></p> <pre class="brush: csharp">protected int Percentage { get; set; } protected void Page_Load(object sender, EventArgs e) { // Calculate precentage based on your logic. Percentage = 60; }</pre> <p><strong><span style="text-decoration: underline;">JavaScript</span></strong></p> <pre class="brush: js">&lt;script type=&#34;text/javascript&#34;&gt; $(function () { CalculatePercentage(&#39;&lt;%= this.Percentage %&gt;&#39;); }); function CalculatePercentage(percent) { $(&#39;.progress&#39;).addClass(&#39;progress-striped&#39;).addClass(&#39;active&#39;); $(&#39;.progress .progress-bar:first&#39;).removeClass().addClass(&#39;progress-bar&#39;) .addClass((percent &lt; 40) ? &#39;progress-bar-danger&#39; : ((percent &lt; 80) ? &#39;progress-bar-warning&#39; : &#39;progress-bar-success&#39;)); $(&#39;.progress .progress-bar:first&#39;).width(percent + &#39;%&#39;); $(&#39;.progress .progress-bar:first&#39;).text(percent + &#39;%&#39;); } &lt;/script&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/396676/Show-User-Profile-completed-percentage-in-Progress-bar-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/396676/Show-User-Profile-completed-percentage-in-Progress-bar-using-jQuery-in-ASPNet/Thu, 13 Jun 2019 05:37:58 GMT