In this 6th tutorial on dynamic web application development, we will learn how to create a user registration page in ASP.NET. We will create the static user registration page in asp.net & also do its styling using bootstrap framework.
Watch the video tutorial at the end of this video to understand more about how to create master page & apply custom styling. Use the code given below.
Download all Images for this project – CLICK HERE
usersignup.aspx code –
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="userprofile.aspx.cs" Inherits="WebApplication3.userprofile" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div class="container-fluid"> <div class="row"> <div class="col-md-5"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col"> <center> <img width="100px" src="imgs/generaluser.png"/> </center> </div> </div> <div class="row"> <div class="col"> <center> <h4>Your Profile</h4> <span>Account Status - </span> <asp:Label class="badge badge-pill badge-info" ID="Label1" runat="server" Text="Your status"></asp:Label> </center> </div> </div> <div class="row"> <div class="col"> <hr> </div> </div> <div class="row"> <div class="col-md-6"> <label>Full Name</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="Full Name"></asp:TextBox> </div> </div> <div class="col-md-6"> <label>Date of Birth</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox2" runat="server" placeholder="Password" TextMode="Date"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-md-6"> <label>Contact No</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox3" runat="server" placeholder="Contact No" TextMode="Number"></asp:TextBox> </div> </div> <div class="col-md-6"> <label>Email ID</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox4" runat="server" placeholder="Email ID" TextMode="Email"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-md-4"> <label>State</label> <div class="form-group"> <asp:DropDownList class="form-control" ID="DropDownList1" runat="server"> <asp:ListItem Text="Select" Value="select" /> <asp:ListItem Text="Andhra Pradesh" Value="Andhra Pradesh" /> <asp:ListItem Text="Arunachal Pradesh" Value="Arunachal Pradesh" /> <asp:ListItem Text="Assam" Value="Assam" /> <asp:ListItem Text="Bihar" Value="Bihar" /> <asp:ListItem Text="Chhattisgarh" Value="Chhattisgarh" /> <asp:ListItem Text="Rajasthan" Value="Rajasthan" /> <asp:ListItem Text="Goa" Value="Goa" /> <asp:ListItem Text="Gujarat" Value="Gujarat" /> <asp:ListItem Text="Haryana" Value="Haryana" /> <asp:ListItem Text="Himachal Pradesh" Value="Himachal Pradesh" /> <asp:ListItem Text="Jammu and Kashmir" Value="Jammu and Kashmir" /> <asp:ListItem Text="Jharkhand" Value="Jharkhand" /> <asp:ListItem Text="Karnataka" Value="Karnataka" /> <asp:ListItem Text="Kerala" Value="Kerala" /> <asp:ListItem Text="Madhya Pradesh" Value="Madhya Pradesh" /> <asp:ListItem Text="Maharashtra" Value="Maharashtra" /> <asp:ListItem Text="Manipur" Value="Manipur" /> <asp:ListItem Text="Meghalaya" Value="Meghalaya" /> <asp:ListItem Text="Mizoram" Value="Mizoram" /> <asp:ListItem Text="Nagaland" Value="Nagaland" /> <asp:ListItem Text="Odisha" Value="Odisha" /> <asp:ListItem Text="Punjab" Value="Punjab" /> <asp:ListItem Text="Rajasthan" Value="Rajasthan" /> <asp:ListItem Text="Sikkim" Value="Sikkim" /> <asp:ListItem Text="Tamil Nadu" Value="Tamil Nadu" /> <asp:ListItem Text="Telangana" Value="Telangana" /> <asp:ListItem Text="Tripura" Value="Tripura" /> <asp:ListItem Text="Uttar Pradesh" Value="Uttar Pradesh" /> <asp:ListItem Text="Uttarakhand" Value="Uttarakhand" /> <asp:ListItem Text="West Bengal" Value="West Bengal" /> </asp:DropDownList> </div> </div> <div class="col-md-4"> <label>City</label> <div class="form-group"> <asp:TextBox class="form-control" ID="TextBox6" runat="server" placeholder="City"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Pincode</label> <div class="form-group"> <asp:TextBox class="form-control" ID="TextBox7" runat="server" placeholder="Pincode" TextMode="Number"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col"> <label>Full Address</label> <div class="form-group"> <asp:TextBox CssClass="form-control" ID="TextBox5" runat="server" placeholder="Full Address" TextMode="MultiLine" Rows="2"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col"> <center> <span class="badge badge-pill badge-info">Login Credentials</span> </center> </div> </div> <div class="row"> <div class="col-md-4"> <label>User ID</label> <div class="form-group"> <asp:TextBox class="form-control" ID="TextBox8" runat="server" placeholder="User ID" ReadOnly="True"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>Old Password</label> <div class="form-group"> <asp:TextBox class="form-control" ID="TextBox9" runat="server" placeholder="Email ID" TextMode="Password" ReadOnly="True"></asp:TextBox> </div> </div> <div class="col-md-4"> <label>New Password</label> <div class="form-group"> <asp:TextBox class="form-control" ID="TextBox10" runat="server" placeholder="Email ID" TextMode="Password"></asp:TextBox> </div> </div> </div> <div class="row"> <div class="col-8 mx-auto"> <center> <div class="form-group"> <asp:Button class="btn btn-primary btn-block btn-lg" ID="Button1" runat="server" Text="Update" /> </div> </center> </div> </div> </div> </div> <a href="homepage.aspx"><< Back to Home</a><br><br> </div> <div class="col-md-7"> <div class="card"> <div class="card-body"> <div class="row"> <div class="col"> <center> <img width="100px" src="imgs/books1.png"/> </center> </div> </div> <div class="row"> <div class="col"> <center> <h4>Your Issued Books</h4> <asp:Label class="badge badge-pill badge-info" ID="Label2" runat="server" Text="your books info"></asp:Label> </center> </div> </div> <div class="row"> <div class="col"> <hr> </div> </div> <div class="row"> <div class="col"> <asp:GridView class="table table-striped table-bordered" ID="GridView1" runat="server"></asp:GridView> </div> </div> </div> </div> </div> </div> </div> </asp:Content>
CSS Style (customstylesheet.css)-
.footerlinks { color: #ffffff; text-decoration: none ; } .footerlinks:hover { color: #ffd800; } #footer1 { background: #762b00; } #footer2 { background: #531f00; }