Create web application
1. Start Visual Studio:2. Select File => New Project
3. Select the Programming language you want to use from Installed Templates section, in the New Project dialog box. Out of the box, you can either use C# or Visual Basic to develop ASP.NET web applications.
4. Select ASP.NET Web Application from the middle section of the New Project dialog box.
5. Provide a meaningful name to your project and solution. In this case "DotNetConcept"
6. Select the location, where you want the solution to be created.
7. Finally click OK.
Create Web Form and apply code
Step-1 Add ASP.NET WebForm with name "LogIn"Step-2 Paste the following code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LogIn.aspx.cs" Inherits="DotNetConcept.LogIn" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="../Scripts/jquery-3.4.1.min.js"></script>
<link href="Styles/bootstrap-3.3.7.css" rel="stylesheet" />
<link href="Styles/Site.css" rel="stylesheet" />
</head>
<body>
<form id="frmLogIn" class="frmMaster" runat="server">
<table class="form-control welcomeProjectText" style="padding: 6px 6px;height: auto;">
<tbody>
<tr>
<td class="panelTD welcomeProjectTextTD">LogIn Form Design<br/>with Bootstrap and CSS<br/>very easy code example</td>
<td class="panelTDControl" style="width: 30%;">
<asp:Label ID="lblVersionInfo" style="float: right;font-size:9px;" runat="server" Text=""></asp:Label>
<table id="tblLogIn" class="table tblLogIn">
<tbody>
<tr><td><asp:Label ID="lblUserName" CssClass="form-control panelControl controlBackground" runat="server" Text="User Id"></asp:Label></td></tr>
<tr><td><asp:TextBox placeholder="Enter User Id" CssClass="form-control panelControl" ClientIDMode="Static" ID="txtUserId" runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblPassword" CssClass="form-control panelControl controlBackground" runat="server" Text="Password"></asp:Label></td></tr>
<tr><td><asp:TextBox placeholder="Enter Password" CssClass="form-control panelControl" ClientIDMode="Static" ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox></td></tr>
<tr><td><asp:CheckBox ID="chkBoxRememberMe" runat="server" Text="Remember me" /></td></tr>
<tr><td><asp:Label ID="lblErrorMessage" style="color: red;" runat="server" Text=""></asp:Label></td></tr>
<tr><td><asp:Button ID="btnLogIn" CssClass="btn btn-default" runat="server" Text="LogIn" OnClick="btnLogIn_Click" OnClientClick="return AuthenticateUser();"/></td></tr>
<tr><td><a href="mailto:admin@siteowner.com?Subject=Request:Reset%20Password" target="_top">Forgot Password?</a></td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="panelTD controlBackground" style="text-align: center;">
Don't have an account? <a href="mailto:admin@siteowner.com?Subject=Request:Reset%20Password" style="color: white !important;" target="_top">Click here to Contact</a>
</td>
<td class="panelTDControl"></td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<p>Copyright © TechWebDots, All Rights Reserverd - <%: DateTime.Now.Year %></p>
</div>
</form>
</body>
</html>
Step-3 Create Folder with Name "Styles" and Add CSS file name "Site.css"
Step-4 Paste the following css in that file
/*LogIn Page CSS*/
.welcomeProjectText{
margin-left: 20%;
margin-right: 20%;
margin-top: 11%;
margin-bottom: 0%;
height: 70%;
width: 58%;
}
.welcomeProjectTextTD{
text-align: center;
width: 30%;
vertical-align: middle;
font-size: 33px;
background-color: orange;
color: white;
}
.fullWidth, .txtarea, .frmMaster, .tableWidth > tr{
width: 100% !important;
}
.panelTD{
padding: 5px !important;
height:30px;
width:30%;
}
.panelControl
{
font-size:12px;
padding: 3px;
height:24px;
width:95% !important;
}
.panelTDControl{
padding: 4px !important;
font-size:12px;
height:30px;
width: 19%;
}
.tblLogIn{
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
width: 90%;
}
.tblLogIn> tbody > tr > td{
border: 0px;
}
.controlBackground,
input[type="submit"],
input[type="button"],
button[type="button"] {
color: white !important;
background-color: orangered !important;
border-color:orangered !important;
font-family:Arial;
font-size:12px;
}
Step-5 Add the Bootstrap file after download from the following URL
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
Hint: From ZIP file, extract and paste the Bootstrap.css file in Styles folder and change the file name to bootstrap-3.3.7.css
Step-6 Create "Scripts" folder and add js file with name "jquery-3.4.1.min.js "
Link to download Js file in browser,
https://code.jquery.com/jquery-3.4.1.min.js
copy all js code and paste in jquery-3.4.1.min.js file
Step-7 Save all and run the solution.
No comments:
Post a Comment
Your feedback is important.
Visit www.techwebdots.in