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.Create Responsive Form with Profile Picture using Bootstrap in ASP.Net<p>Hi <a class="username" rel="G.Madri">G.Madri</a>,</p> <p>Check with the below html.</p> <pre class="brush: html">&lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;div class=&#34;alert alert-danger fade in&#34; role=&#34;alert&#34; id=&#34;divError&#34; runat=&#34;server&#34; visible=&#34;false&#34;&gt; &lt;a class=&#34;close&#34; data-dismiss=&#34;alert&#34; aria-label=&#34;close&#34;&gt;&amp;times;&lt;/a&gt; &lt;asp:Label ID=&#34;lblError&#34; runat=&#34;server&#34; Text=&#34;&#34;&gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;div class=&#34;alert alert-success fade in&#34; role=&#34;alert&#34; id=&#34;divSuccess&#34; runat=&#34;server&#34; visible=&#34;false&#34;&gt; &lt;a class=&#34;close&#34; data-dismiss=&#34;alert&#34; aria-label=&#34;close&#34;&gt;&amp;times;&lt;/a&gt; &lt;asp:Label ID=&#34;lblSuccess&#34; runat=&#34;server&#34; Text=&#34;&#34;&gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label10&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Name&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtName&#34; CssClass=&#34;form-control&#34; /&gt; &lt;asp:RequiredFieldValidator ID=&#34;RequiredFieldValidator2&#34; runat=&#34;server&#34; ControlToValidate=&#34;txtName&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the name&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Image ID=&#34;Image2&#34; runat=&#34;server&#34; Height=&#34;150px&#34; Width=&#34;150px&#34; ImageUrl=&#34;~/Images/profilePicIcon.png&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label9&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Address&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtAddress&#34; CssClass=&#34;form-control&#34; /&gt; &lt;asp:RequiredFieldValidator ID=&#34;RequiredFieldValidator1&#34; runat=&#34;server&#34; ControlToValidate=&#34;txtAddress&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the address&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label11&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Date Of Birth&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtDOB&#34; CssClass=&#34;form-control&#34; MaxLength=&#34;10&#34; /&gt; &lt;asp:RequiredFieldValidator ID=&#34;RequiredFieldValidator7&#34; runat=&#34;server&#34; ControlToValidate=&#34;txtDOB&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the DOB&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label12&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Mobile&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtMobile&#34; CssClass=&#34;form-control&#34; MaxLength=&#34;10&#34; onkeypress=&#34;return event.keyCode&gt;=48&amp;&amp;event.keyCode&lt;=57||(this.value.indexOf(&#39;.&#39;)&lt;0?event.keyCode==46:false)&#34; /&gt; &lt;asp:RequiredFieldValidator ID=&#34;RequiredFieldValidator3&#34; runat=&#34;server&#34; ControlToValidate=&#34;txtMobile&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the mobile no.&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label13&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Phone&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtPhone&#34; CssClass=&#34;form-control&#34; MaxLength=&#34;10&#34; onkeypress=&#34;return event.keyCode&gt;=48&amp;&amp;event.keyCode&lt;=57||(this.value.indexOf(&#39;.&#39;)&lt;0?event.keyCode==46:false)&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label14&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Height&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtHeight&#34; CssClass=&#34;form-control&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label15&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Weight&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtWeight&#34; CssClass=&#34;form-control&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-1&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Label ID=&#34;Label16&#34; runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Profile Picture&lt;/asp:Label&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:FileUpload ID=&#34;FileUpload1&#34; runat=&#34;server&#34; onchange=&#34;readURL(this)&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#39;row&#39;&gt; &lt;div class=&#39;col-sm-6&#39;&gt; &lt;div class=&#39;form-group&#39;&gt; &lt;asp:Button runat=&#34;server&#34; Text=&#34;Save&#34; CssClass=&#34;btn btn-default&#34; ID=&#34;Button1&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">Screenshot</span></p> <p><img src="https://i.imgur.com/aWMUa3W.gif" alt="" width="472" height="319" /></p>https://www.aspforums.net:443/Threads/108439/Create-Responsive-Form-with-Profile-Picture-using-Bootstrap-in-ASPNet/https://www.aspforums.net:443/Threads/108439/Create-Responsive-Form-with-Profile-Picture-using-Bootstrap-in-ASPNet/Wed, 20 Jul 2016 05:58:31 GMTCreate Responsive Form with Profile Picture using Bootstrap in ASP.Net<p>Thanks dharmendr..I have found the&nbsp;solution at here.</p> <p><a title="Edit Profile Page" href="http://bootstrap.snipplicious.com/snippet/19/edit-profile-page">http://bootstrap.snipplicious.com/snippet/19/edit-profile-page</a></p> <p>&nbsp;</p> <p>If someone needs the code,</p> <pre class="brush: html">&lt;%@ Page Title=&#34;&#34; Language=&#34;C#&#34; MasterPageFile=&#34;~/Presentation/Site.Master&#34; AutoEventWireup=&#34;true&#34; CodeBehind=&#34;PatientRegister.aspx.cs&#34; Inherits=&#34;HealthCare.Presentation.PatientRegister&#34; %&gt; &lt;%@ Register Assembly=&#34;AjaxControlToolkit&#34; Namespace=&#34;AjaxControlToolkit&#34; TagPrefix=&#34;asp&#34; %&gt; &lt;asp:Content ID=&#34;Content3&#34; runat=&#34;server&#34; ContentPlaceHolderID=&#34;head&#34;&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; function readURL(input) { if (input.files &amp;&amp; input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(&#39;#&lt;%=Image1.ClientID%&gt;&#39;).prop(&#39;src&#39;, e.target.result) } reader.readAsDataURL(input.files[0]); } } $(&#34;#fuProfilePic&#34;).change(function () { readURL(this); }); &lt;/script&gt; &lt;style type=&#34;text/css&#34;&gt; .circle { width: 150px; height: 150px; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; display: inline-block; } &lt;/style&gt; &lt;/asp:Content&gt; &lt;asp:Content ID=&#34;Content2&#34; ContentPlaceHolderID=&#34;MainContent&#34; runat=&#34;server&#34;&gt; &lt;h2&gt;&lt;%: Title %&gt;&lt;/h2&gt; &lt;div class=&#34;alert alert-danger fade in&#34; role=&#34;alert&#34; id=&#34;divError&#34; runat=&#34;server&#34; visible=&#34;false&#34;&gt; &lt;a class=&#34;close&#34; data-dismiss=&#34;alert&#34; aria-label=&#34;close&#34;&gt;&amp;times;&lt;/a&gt; &lt;asp:Label ID=&#34;lblError&#34; runat=&#34;server&#34; Text=&#34;&#34;&gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;div class=&#34;alert alert-success fade in&#34; role=&#34;alert&#34; id=&#34;divSuccess&#34; runat=&#34;server&#34; visible=&#34;false&#34;&gt; &lt;a class=&#34;close&#34; data-dismiss=&#34;alert&#34; aria-label=&#34;close&#34;&gt;&amp;times;&lt;/a&gt; &lt;asp:Label ID=&#34;lblSuccess&#34; runat=&#34;server&#34; Text=&#34;&#34;&gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;div class=&#34;text-center&#34;&gt; &lt;asp:Image ID=&#34;Image1&#34; runat=&#34;server&#34; ImageUrl=&#34;~/Images/profilePicIcon.png&#34; CssClass=&#34;circle&#34; /&gt; &lt;h6&gt;Upload a different photo...&lt;/h6&gt; &lt;div class=&#34;text-center center-block well well-sm&#34;&gt; &lt;asp:FileUpload ID=&#34;fuProfilePic&#34; runat=&#34;server&#34; onchange=&#34;readURL(this)&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;col-md-8&#34;&gt; &lt;div class=&#34;form-group row&#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Name:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-6&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtName&#34; CssClass=&#34;form-control&#34; /&gt; &lt;asp:RequiredFieldValidator runat=&#34;server&#34; ControlToValidate=&#34;txtName&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the name&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row&#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Address:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-6&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtAddress&#34; CssClass=&#34;form-control&#34; /&gt; &lt;asp:RequiredFieldValidator runat=&#34;server&#34; ControlToValidate=&#34;txtAddress&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the address&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row &#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Date Of Birth:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-3&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtDOB&#34; CssClass=&#34;form-control&#34; MaxLength=&#34;10&#34; TextMode=&#34;Date&#34; /&gt; &lt;asp:RequiredFieldValidator runat=&#34;server&#34; ControlToValidate=&#34;txtDOB&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the DOB&#34; /&gt; &lt;ajaxToolkit:CalendarExtender ID=&#34;txtFromDate_CalendarExtender&#34; runat=&#34;server&#34; Enabled=&#34;True&#34; TargetControlID=&#34;txtDOB&#34; PopupButtonID=&#34;CalenderImageIDHere&#34; Format=&#34;yyyy-MM-dd&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row&#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Mobile:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-4&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtMobile&#34; CssClass=&#34;form-control&#34; MaxLength=&#34;10&#34; onkeypress=&#34;return event.keyCode&gt;=48&amp;&amp;event.keyCode&lt;=57||(this.value.indexOf(&#39;.&#39;)&lt;0?event.keyCode==46:false)&#34; /&gt; &lt;asp:RequiredFieldValidator runat=&#34;server&#34; ControlToValidate=&#34;txtMobile&#34; CssClass=&#34;text-danger errorMsg&#34; ErrorMessage=&#34;Please enter the mobile no.&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row&#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Phone:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-4&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtPhone&#34; CssClass=&#34;form-control&#34; MaxLength=&#34;10&#34; onkeypress=&#34;return event.keyCode&gt;=48&amp;&amp;event.keyCode&lt;=57||(this.value.indexOf(&#39;.&#39;)&lt;0?event.keyCode==46:false)&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row&#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Height:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-2&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtHeight&#34; CssClass=&#34;form-control&#34; TextMode=&#34;Number&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row&#34; style=&#34;height: 40px&#34;&gt; &lt;asp:Label runat=&#34;server&#34; CssClass=&#34;col-md-2 control-label&#34;&gt;Weight:&lt;/asp:Label&gt; &lt;div class=&#34;col-md-2&#34;&gt; &lt;asp:TextBox runat=&#34;server&#34; ID=&#34;txtWeight&#34; CssClass=&#34;form-control&#34; TextMode=&#34;Number&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;form-group row&#34;&gt; &lt;div class=&#34;col-md-offset-2 col-md-8&#34; class=&#34;btn btn-primary&#34;&gt; &lt;asp:Button runat=&#34;server&#34; Text=&#34;Save&#34; CssClass=&#34;btn btn-default&#34; ID=&#34;btnsave&#34; OnClick=&#34;btnsave_Click&#34; /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/asp:Content&gt; </pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/108439/Create-Responsive-Form-with-Profile-Picture-using-Bootstrap-in-ASPNet/https://www.aspforums.net:443/Threads/108439/Create-Responsive-Form-with-Profile-Picture-using-Bootstrap-in-ASPNet/Wed, 20 Jul 2016 21:25:17 GMT