VS&SQL使用WEB登录页面尝试

来源：互联网发布：秘密朋友知乎编辑：程序博客网时间：2024/05/22 14:43

1．打开VS2015
2．文件->新建->网站->更改文件夹名称WebSiteTest->确定
这里写图片描述
3．视图->解决方案资源管理器->右击项目WebSiteTest->添加->新建文件夹(Images)
4．右击文件夹Images->添加->现有项->选择图像文件类别->找到背景图片文件（我选的是一张wood.jpg）后点击添加

5．右击项目WebSiteTest->添加->添加新项->左栏选Visual C#，中间栏选Web窗体->下方文件名改为Login.aspx->点击添加
这里写图片描述
6．此时已打开Login.aspx，修改代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>系统登录</title>    <style>        html,body { margin:0px; height:100%; }         .container { height: 100%;background-image:url(Images/wood.jpg); }        .header {height:20%; width:100%; background-color:red; opacity: 0.5; text-align:center; font-size:36px; line-height:100px; top:0px; }        .center {height:65%; width:100%; background-color:blue; opacity: 0.5; }        .centerColumn1 {float:left; height:100%; width:20%; background-color:blueviolet; opacity: 0.3; position:fixed; left:0px; }        .centerColumn2 {float:left; height:100%; width:100%; background-color:cadetblue; opacity: 0.3; text-align:center; position:fixed; }        .centerColumn3 {float:left; height:100%; width:20%; background-color:cornflowerblue; opacity: 0.3; position:fixed; right:0px; }        .footer {height:15%; width:100%; background-color:yellow; opacity: 0.5; position:fixed; bottom: 0px; }    </style></head><body>    <form id="form1" runat="server">    <div class="container" >        <div class="header" >这里是头</div>        <div class="center" >            <div class="centerColumn1" >第1列</div>            <div class="centerColumn2" >                <div >                    <br /><br /><br /><br />                    <asp:Label ID="Label1" runat="server" Text="用户："></asp:Label>                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br /><br />                    <asp:Label ID="Label2" runat="server" Text="密码："></asp:Label>                    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox><br /><br /><br />                    <asp:Label ID="Label3" runat="server" Text="日期："></asp:Label>                    <asp:TextBox ID="TextBox3" runat="server" TextMode="Date"></asp:TextBox><br /><br /><br />                    <asp:Button ID="Button1" runat="server" Text="登录" OnClick="Button1_Click" />                </div><br /><br /><br /><br />                <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>            </div>            <div class="centerColumn3" >第3列</div>         </div>        <div class="footer" >这里是脚</div>    </div>    </form></body></html>

7．在Login.aspx编辑窗口下方的三个选项处点击“设计”
这里写图片描述

双击“登录”按钮，打开Login.aspx.cs
8．对应的Login.aspx.cs代码修改如下

using System;using System.Data.SqlClient;public partial class Login : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {    }    protected void Button1_Click(object sender, EventArgs e)    {        string ConnStr = "Data Source=DESKTOP-I9Q086D;Initial Catalog=XzhErp;User ID=sa;Password=sa";        SqlConnection conn = new SqlConnection(ConnStr);        conn.Open();        string str = "select * from [userinfo] where userName='" + this.TextBox1.Text + "' and password='" + this.TextBox2.Text + "'";        SqlCommand com = new SqlCommand(str, conn);        SqlDataReader dr = com.ExecuteReader();        if (dr.Read())        {            Response.Write("<script>alert('恭喜你！登录成功！')</script>");        }        else        {            Response.Write("<script>alert('很遗憾！登录失败！')</script>");        }    }}

9．生成->生成解决方案
10．调试->开始调试
页面打开如下：
这里写图片描述

背景图除了头部显示正常，中部和脚部都没显示出来。是什么情况？点击登录并提示错误之后，页面变正常了。
这里写图片描述

0 0