1.点击【文件】|【新建】|【项目】|【ASP.NET空网站】
2.新建页面。在项目图标上点击右键,选择【添加】|【新建项】|【Web窗体】,将窗体命名为Login.aspx。
3.点击项目创建一个images文件夹,把所需要的图片复制到里面
4.编辑Login.aspx登录页面,代码如下:
<%@ 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.创建一个样式表文件LoginStyle.css把它引入到Login.aspx里面,进行样式的设置,详细代码如下:
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.编辑登录页面ImageButto点点击事件,在Login.aspx.cs里面编写代码设置,文本框的检查功能,当文本框用户名和密码输入正确时,把信息传到第二个页面并显示出来,详细代码如下:
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.创建第二个页面,点击项目右键,添加新项,创建Web窗体,命名zhu.aspx,详细代码如下:
<%@ 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.在主页面接收,登录页面传过来的信息,编写zhu.aspx.cs主页面加载事件详细代码如下:
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"];
}
}
结果:
项目图片:
登录页面:
输入密码错误:
输入正确时,跳转到第二个页面: