Create Responsive Form with Profile Picture using Bootstrap in ASP.Net

Last Reply on Jul 20, 2016 09:25 PM By G.Madri

Posted on Jul 18, 2016 01:57 AM

I have created a web form with an image uploader. It shows a preview of the image before upload. This is how it looks.

The problem is, it becomes a mess when the screen size changes.

This is the design of the page.

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Presentation/Site.Master" AutoEventWireup="true" CodeBehind="PatientRegister.aspx.cs" Inherits="HealthCare.Presentation.PatientRegister" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="head">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

      <script type="text/javascript">

          function readURL(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      $('#<%=Image1.ClientID%>').prop('src', e.target.result)
                  }
                  reader.readAsDataURL(input.files[0]);
                  }
              }
              $("#fuProfilePic").change(function () {
                  readURL(this);
              });

              function myFunction(input) {
                  alert(this);
              }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
     
    <h2><%: Title %></h2>
    
         <div class="alert alert-danger fade in" role="alert" id="divError" runat="server" visible="false">
            <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
        </div>
         <div class="alert alert-success fade in" role="alert" id="divSuccess" runat="server" visible="false">
            <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
        </div>
        <div class="form-group row" style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Name</asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
                 <asp:RequiredFieldValidator runat="server" ControlToValidate="txtName" CssClass="text-danger errorMsg" ErrorMessage="Please enter the name" />
            </div>
              <div class="col-md-4" style="max-width:150px;max-height:150px">
               <asp:Image ID="Image1" runat="server" Height="150px" Width="150px" ImageUrl="~/Images/profilePicIcon.png"  />
        </div>
        </div>
        <div class="form-group row" style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Address</asp:Label>
            <div class="col-md-6" >
                <asp:TextBox runat="server" ID="txtAddress"  CssClass="form-control" />
                     <asp:RequiredFieldValidator runat="server" ControlToValidate="txtAddress"
                    CssClass="text-danger errorMsg" ErrorMessage="Please enter the address" />
            </div>
        </div>
           <div class="form-group row " style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Date Of Birth</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtDOB" CssClass="form-control" MaxLength="10" TextMode="Date" />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtDOB"
                    CssClass="text-danger errorMsg" ErrorMessage="Please enter the DOB" />
                 <ajaxToolkit:CalendarExtender ID="txtFromDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtDOB"
                    PopupButtonID="CalenderImageIDHere" Format="yyyy-MM-dd" />
            </div>
        </div>
          <div class="form-group row" style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Mobile</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtMobile"   CssClass="form-control" MaxLength="10" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)"/>
                 <asp:RequiredFieldValidator runat="server" ControlToValidate="txtMobile"
               CssClass="text-danger errorMsg" ErrorMessage="Please enter the mobile no." />
            </div>
        </div>
           <div class="form-group row" style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Phone</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtPhone" CssClass="form-control" MaxLength="10" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)"/>
                  
            </div>
        </div>
         
         
          <div class="form-group row" style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Height</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtHeight" CssClass="form-control" TextMode="Number" />

            </div>
                 
        </div>
          <div class="form-group row" style="height:40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Weight</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtWeight" CssClass="form-control" TextMode="Number"  />

            </div>
        </div>
          <div class="form-group row">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Profile Picture</asp:Label>
            <div class="col-md-6">
                <asp:FileUpload ID="fuProfilePic" runat="server"  onchange="readURL(this)"/>
            </div>
          
              
        </div>
        <div class="form-group row">
            <div class="col-md-offset-2 col-md-8">
                <asp:Button runat="server" Text="Save" CssClass="btn btn-default" ID="btnsave" OnClick="btnsave_Click" />
            </div>
    </div>
</asp:Content>

 

You are viewing reply posted by: G.Madri on Jul 20, 2016 09:25 PM.
Posted on Jul 20, 2016 09:25 PM Modified on on Jul 20, 2016 09:28 PM

Thanks dharmendr..I have found the solution at here.

http://bootstrap.snipplicious.com/snippet/19/edit-profile-page

 

If someone needs the code,

<%@ Page Title="" Language="C#" MasterPageFile="~/Presentation/Site.Master" AutoEventWireup="true" CodeBehind="PatientRegister.aspx.cs" Inherits="HealthCare.Presentation.PatientRegister" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="head">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#<%=Image1.ClientID%>').prop('src', e.target.result)
                }
                reader.readAsDataURL(input.files[0]);
                }
            }
            $("#fuProfilePic").change(function () {
                readURL(this);
            });

           
    </script>

    <style type="text/css">
        .circle {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            display: inline-block;
        }
    </style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%: Title %></h2>

    <div class="alert alert-danger fade in" role="alert" id="divError" runat="server" visible="false">
        <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
    </div>
    <div class="alert alert-success fade in" role="alert" id="divSuccess" runat="server" visible="false">
        <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
    </div>
    <div class="col-md-3">
        <div class="text-center">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/profilePicIcon.png" CssClass="circle" />
            <h6>Upload a different photo...</h6>
            <div class="text-center center-block well well-sm">
                <asp:FileUpload ID="fuProfilePic" runat="server" onchange="readURL(this)" />
            </div>

        </div>
    </div>
    <div class="col-md-8">
        <div class="form-group row" style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Name:</asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtName" CssClass="text-danger errorMsg" ErrorMessage="Please enter the name" />
            </div>

        </div>
        <div class="form-group row" style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Address:</asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="txtAddress" CssClass="form-control" />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtAddress"
                    CssClass="text-danger errorMsg" ErrorMessage="Please enter the address" />
            </div>
        </div>
        <div class="form-group row " style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Date Of Birth:</asp:Label>
            <div class="col-md-3">
                <asp:TextBox runat="server" ID="txtDOB" CssClass="form-control" MaxLength="10" TextMode="Date" />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtDOB"
                    CssClass="text-danger errorMsg" ErrorMessage="Please enter the DOB" />
                <ajaxToolkit:CalendarExtender ID="txtFromDate_CalendarExtender" runat="server" Enabled="True" TargetControlID="txtDOB"
                    PopupButtonID="CalenderImageIDHere" Format="yyyy-MM-dd" />
            </div>
        </div>
        <div class="form-group row" style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Mobile:</asp:Label>
            <div class="col-md-4">
                <asp:TextBox runat="server" ID="txtMobile" CssClass="form-control" MaxLength="10" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)" />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="txtMobile"
                    CssClass="text-danger errorMsg" ErrorMessage="Please enter the mobile no." />
            </div>
        </div>
        <div class="form-group row" style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Phone:</asp:Label>
            <div class="col-md-4">
                <asp:TextBox runat="server" ID="txtPhone" CssClass="form-control" MaxLength="10" onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf('.')<0?event.keyCode==46:false)" />

            </div>
        </div>
        <div class="form-group row" style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Height:</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtHeight" CssClass="form-control" TextMode="Number" />

            </div>

        </div>
        <div class="form-group row" style="height: 40px">
            <asp:Label runat="server" CssClass="col-md-2 control-label">Weight:</asp:Label>
            <div class="col-md-2">
                <asp:TextBox runat="server" ID="txtWeight" CssClass="form-control" TextMode="Number" />

            </div>
        </div>

        <div class="form-group row">
            <div class="col-md-offset-2 col-md-8" class="btn btn-primary">
                <asp:Button runat="server" Text="Save" CssClass="btn btn-default" ID="btnsave" OnClick="btnsave_Click" />
            </div>
        </div>
    </div>
</asp:Content>