1. Haga clic en [Archivo]|[Nuevo]|[Proyecto]|[Sitio web vacío de ASP.NET]
2. Cree una nueva página. Haga clic con el botón derecho en el icono del proyecto, seleccione [Agregar] | [Nuevo elemento] | [Formulario web] y nombre el formulario Login.aspx.
3. Haga clic en el proyecto para crear una carpeta de imágenes y copie las imágenes requeridas en ella
4. Edite la página de inicio de sesión Login.aspx, el código es el siguiente:
<%@ 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. Cree un archivo de hoja de estilo LoginStyle.css e impórtelo a Login.aspx para establecer el estilo. El código detallado es el siguiente:
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. Edite el evento de clic de ImageButton de la página de inicio de sesión , escriba la configuración del código en Login.aspx.cs, la función de verificación del cuadro de texto, cuando el nombre de usuario y la contraseña del cuadro de texto se ingresen correctamente, la información se enviará a la segunda página y se mostrará, El código detallado es el siguiente:
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. Cree una segunda página, haga clic derecho en el proyecto, agregue un nuevo elemento, cree un formulario web, nombre zhu.aspx, y el código detallado es el siguiente:
<%@ 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. Reciba la información de la página de inicio de sesión en la página principal y escriba el código detallado del evento de carga de la página principal de zhu.aspx.cs de la siguiente manera:
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"];
}
}
resultado:
Imágenes del proyecto:
página de inicio de sesión:
Contraseña incorrecta ingresada:
Cuando la entrada sea correcta, salta a la segunda página: