1. Click [File]|[New]|[Project]|[ASP.NET Empty Website]
2. Create a new page. Right-click on the project icon, select [Add] | [New Item] | [Web Form], and name the form Login.aspx.
3. Click on the project to create an images folder and copy the required images into it
4. Edit the Login.aspx login page, the code is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="LoginStylet.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="Container">
<div id="Logo"></div>
<div id="MainBody">
<div id="TabBody">
<table class="style1">
<tr>
<td style="color:#FFFFFF">用户名：</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td rowspan="2">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/btn.jpg" OnClick="ImageButton_Click" />
</td>
</tr>
<tr>
<td style="color:#FFFFFF">密码：</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
5. Create a style sheet file LoginStyle.css and import it into Login.aspx to set the style. The detailed code is as follows:
body
{
background-image:url('images/bg.jpg');
background-repeat:repeat-x;
text-align:center;
}
#Container
{
margin:auto;
width:660px;
height:450px;
}
#Logo
{
background-image:url('images/logo_N.jpg');
background-repeat:no-repeat;
height:120px;
}
#MainBody
{
background-image:url('images/userLoginBg.jpg');
height:310px;
position:relative;
}
#TabBody
{
position:absolute;
top:127px;
left:240px;
height:75px;
width:357px;
}
6. Edit the login page ImageButton click event, write code settings in Login.aspx.cs, and check the text box function. When the user name and password in the text box are entered correctly, the information will be sent to the second page and displayed. The detailed code is as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void ImageButton_Click(object sender, ImageClickEventArgs e)
{
if (TextBox1.Text.Equals("邓风令") && TextBox2.Text.Equals("123456"))
{
Response.Redirect("zhu.aspx?uName=" + TextBox1.Text + "&uPass=" + TextBox2.Text);
}
else
{
Response.Write("<script>alert('密码不匹配');</script>");
}
}
}7. Create a second page, right-click on the project, add a new item, create a Web form, name zhu.aspx, and the detailed code is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="zhu.aspx.cs" Inherits="zhu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
欢迎您，登录！<br>
用户名： <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
密码： <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
8. Receive the information from the login page on the main page and write the detailed code of the main page loading event of zhu.aspx.cs as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class zhu : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = Request["uName"];
Label2.Text = Request["uPass"];
}
}result:
Project pictures:
log in page:
Wrong password entered:
When the input is correct, jump to the second page:
