登录跳转页面

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"];
    }
}

结果：

项目图片：

登录页面：

输入密码错误：

输入正确时，跳转到第二个页面：

猜你喜欢