ASP.net 简单登录界面

一.说明

此文是小白在学习张晨光老师的视频教学<<Asp.Net WEB服务器编程技术>>中做的学习笔记,一些知识点也是跟着教程走的,大家也可以去老师的主页去学习,谢谢大家.

这一篇要练习的是,如下课程的代码:
在这里插入图片描述
新建项目:

因为这里小白用到的是mysql,所以引用:MySql.Data.dll大家可去官网自行搜索下载,index.aspx,login.aspx,login_new.aspx,ToolMysqlDate.cs是新添加的,后面会展开里面的代码.

bootstrap-5.1.3-dist文件夹里是Bootstrap5的前端组件库,从官网 getbootstrap.com 下载 Bootstrap 5.

二.登录界面(login.aspx)

前端代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="MyMusci.login" %>

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><!--将Bootstrap5引入--><linkhref="bootstrap-5.1.3-dist/css/bootstrap.css"rel="stylesheet"/><scriptsrc="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script></head><body><formid="form1"runat="server">
        <%--这里引用Bootstrap5的模板 class="container mt-3"--%>
        <divclass="container mt-3">
            <%--这里引用Bootstrap5的table的模板样式 class="table"--%>
            <tableclass="table"><tr>
                    <%--这里引用Bootstrap5的模板样式--%>
                    <tdcolspan="3"class="table-primary display-3 text-center text-primary">登录界面</td></tr><tr><td>账户</td><td><asp:TextBoxID="userName"runat="server"></asp:TextBox></td><td>
                        <%--
                        **RequiredFieldValidator** 控件用于使输入控件成为一个必需（必填）的字段
                        ControlToValidate 要验证的控件的 id
                        Display 验证控件的显示行为 'Dynamic'  如果验证失败，控件显示错误消息.如果输入通过,页面上不预留显示消息的空间.
                        Text 当验证失败时显示的消息
                        ForeColor 控件的前景颜色
                        ErrorMessage 当验证失败时，在 ValidationSummary 控件中显示的文本(这里没有具体使用)
                        -%>
                        <asp:RequiredFieldValidatorID="rfv_useName"runat="server"ControlToValidate="userName"Display="Dynamic"ErrorMessage="RequiredFieldValidator"ForeColor="Red">账户不可为空</asp:RequiredFieldValidator>

                        <%--
                        **RegularExpressionValidator** 控件用于验证输入值是否匹配指定的模式
                        ControlToValidate 要验证的控件的 id
                        Text 当验证失败时显示的消息
                        ForeColor 控件的前景颜色
                        ErrorMessage 当验证失败时，在 ValidationSummary 控件中显示的文本(这里没有具体使用)
                        ValidationExpression 规定验证输入控件的正则表达式(此处\w{5,13}表示可以输入字符串,长度在5-13之间)
                        --%>
                        <asp:RegularExpressionValidatorID="rev_userName"runat="server"ControlToValidate="userName"Display="Dynamic"ErrorMessage="RegularExpressionValidator"ForeColor="Red"ValidationExpression="\w{5,13}">您输入的账户异常(5-12位)</asp:RegularExpressionValidator></td></tr><tr><tdclass="auto-style2">密码</td><tdclass="auto-style2"><asp:TextBoxID="userPwd"runat="server"></asp:TextBox></td><tdclass="auto-style2"><asp:RequiredFieldValidatorID="rfv_userPwd"runat="server"ControlToValidate="userPwd"Display="Dynamic"ErrorMessage="RequiredFieldValidator"ForeColor="Red">密码不可为空</asp:RequiredFieldValidator><asp:RegularExpressionValidatorID="rev_userPwd"runat="server"ControlToValidate="userPwd"Display="Dynamic"ErrorMessage="RegularExpressionValidator"ForeColor="Red"ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator></td></tr><tr><td>
                        <%--这里引用Bootstrap5的模板样式--%>
                        <asp:ButtonID="btn_sub"runat="server"Text="登录"class="btn btn-primary"OnClick="btn_sub_Click"/></td><td>
                        <%--这里引用Bootstrap5的模板样式--%>
                        <asp:ButtonID="btn_reset"runat="server"OnClick="btn_reset_Click"Text="重置"class="btn btn-secondary"/></td><td>&nbsp;</td></tr></table></div></form></body></html>

后台代码:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Data;usingSystem.Collections;namespaceMyMusci{publicpartialclasslogin:System.Web.UI.Page{protectedvoidPage_Load(object sender,EventArgs e){}/// <summary>/// 重置按钮点击事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protectedvoidbtn_reset_Click(object sender,EventArgs e){//将输入的值值空
            userName.Text ="";
            userPwd.Text ="";}/// <summary>/// 登录按钮点击事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protectedvoidbtn_sub_Click(object sender,EventArgs e){//先做测试,看看程序能不能跑起来//if ("administrator".Equals(userName.Text) && "12345678".Equals(userPwd.Text)) {//    Response.Redirect("index.aspx");//}//从数据库中查寻用户名和密码string sql ="SELECT COUNT(*) FROM user_all WHERE user_name=?name AND user_pwd=?pwd";//之间的练习中一直用到,将前端文本框中的值填入Hashtable里(记得加引用哦)Hashtable ht =newHashtable();
            ht.Add("name",userName.Text.ToString());
            ht.Add("pwd", userPwd.Text.ToString());//进行后台的聚合查询,返回查询到的值int resilc=ToolMysqlDate.excutScal(sql,ht);//如果数据库中有这个值if(resilc >0){//将用户名绑定到Session
                Session["userName"]= userName.Text.ToString();//然后跳转至其他界面
                Response.Redirect("index.aspx");}else{//如果数据库查无此数据,就弹出提示框,告知用户
                Response.Write("<script>alert('您输入的账户或密码有误,请核对后输入!!!')</script>");}}}}

三.ToolMysqlDate.cs的相关配置

一.在Web.config中的configuration标签下添加如下代码:

<connectionStrings><addname="Conn_MyMusic"connectionString="Database='example';Data Source='127.0.0.1';User Id='root';Password='xxxxx';charset='utf8';pooling=true"/></connectionStrings><!--
数据库位置:Data Source='127.0.0.1'//此处为本地数据库
用户名:User Id='....'
密码:Password='.....'
字符集:charset='.....'
-->

二.创建一个名为ToolMysqlDate.cs的类,并写入如下代码:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingMySql.Data.MySqlClient;usingSystem.Configuration;//所引用config,需要提前引用命名空间usingSystem.Collections;usingSystem.Data;namespaceMyMusci{publicclassToolMysqlDate{//1.数据库的连接,创建等工作publicstaticstring connstr = ConfigurationManager.ConnectionStrings["Conn_MyMusic"].ToString();staticMySqlConnection conn =newMySqlConnection(connstr);//封装ExecuteScalar方法,返回值为int类型publicstaticintexcutScal(String sql,Hashtable ht){
            conn.Open();MySqlCommand cmd =newMySqlCommand(sql, conn);//把ht传递过来之后，需要给参数赋值；foreach(DictionaryEntry de in ht){//第一个参数：key;第二个参数:value值
                cmd.Parameters.AddWithValue(de.Key.ToString(), de.Value.ToString());}int result;try{//运行并赋值
                result = Convert.ToInt32(cmd.ExecuteScalar());}finally{
                conn.Close();}//返回return result;}}}

四.index.aspx配置

index.aspx里面并无填充其他内容,循序渐进吧,前端代码并未加任何控件,后台代码如下:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;namespaceMyMusci{publicpartialclassindex:System.Web.UI.Page{protectedvoidPage_Load(object sender,EventArgs e){//如果能读取到Session对象,则显示相应的话if(Session["userName"]!=null){
                Response.Write("欢迎:"+ Session["userName"].ToString()+"登录本页面");}//否则,提示错误,并返回至登录界面else{
                Response.Write("<script>alert('您的登录已过时,请重新登录!!!')</script>");
                Response.Redirect("login.aspx");}}}}

五.效果

当输入不正确的用户名即密码:
在这里插入图片描述

当我们输入正确的用户及密码:
界面会自动跳转至登录界面

六.AJAX登录界面(login_new.aspx)

前端界面与login.aspx并无太大差别,只是将table嵌套入AJAX里,这样做的好处是节省时间,不耗费服务器资源:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login_new.aspx.cs" Inherits="MyMusci.login_new" %>

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><linkhref="bootstrap-5.1.3-dist/css/bootstrap.css"rel="stylesheet"/><scriptsrc="bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script></head><body><formid="form1"runat="server"><divclass="container mt-3">
            <%--使用AJAX,先调用ScriptManager控件--%>
            <asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
            <%--然后使用UpdatePanel控件,把登录界面的显示包裹进此控件中--%>
            <asp:UpdatePanelID="UpdatePanel1"runat="server">
                <%--因为不可之间进行包裹关系,所以先添加ContentTemplate,把代码放在ContentTemplate里--%>
                <ContentTemplate><tableclass="table"><tr><tdclass="table-primary display-3 text-center text-primary"colspan="3">登录界面</td></tr><tr><td>账户</td><td><asp:TextBoxID="userName"runat="server"></asp:TextBox></td><td><asp:RequiredFieldValidatorID="rfv_useName"runat="server"ControlToValidate="userName"Display="Dynamic"ErrorMessage="RequiredFieldValidator"ForeColor="Red">账户不可为空</asp:RequiredFieldValidator><asp:RegularExpressionValidatorID="rev_userName"runat="server"ControlToValidate="userName"Display="Dynamic"ErrorMessage="RegularExpressionValidator"ForeColor="Red"ValidationExpression="\w{5,13}">您输入的账户异常(5-12位)</asp:RegularExpressionValidator></td></tr><tr><tdclass="auto-style2">密码</td><tdclass="auto-style2"><asp:TextBoxID="userPwd"runat="server"></asp:TextBox></td><tdclass="auto-style2"><asp:RequiredFieldValidatorID="rfv_userPwd"runat="server"ControlToValidate="userPwd"Display="Dynamic"ErrorMessage="RequiredFieldValidator"ForeColor="Red">密码不可为空</asp:RequiredFieldValidator><asp:RegularExpressionValidatorID="rev_userPwd"runat="server"ControlToValidate="userPwd"Display="Dynamic"ErrorMessage="RegularExpressionValidator"ForeColor="Red"ValidationExpression="\w{8,13}">您输入的密码异常(8位)</asp:RegularExpressionValidator></td></tr><tr><td><asp:ButtonID="btn_sub"runat="server"class="btn btn-primary"OnClick="btn_sub_Click"Text="登录"/></td><td><asp:ButtonID="btn_reset"runat="server"class="btn btn-secondary"OnClick="btn_reset_Click"Text="重置"/></td><td>&nbsp;</td></tr></table></ContentTemplate></asp:UpdatePanel></div></form></body></html>

后台:

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingSystem.Data;usingSystem.Collections;namespaceMyMusci{publicpartialclasslogin_new:System.Web.UI.Page{protectedvoidPage_Load(object sender,EventArgs e){}/// <summary>/// 重置按钮点击事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protectedvoidbtn_reset_Click(object sender,EventArgs e){
            userName.Text ="";
            userPwd.Text ="";}/// <summary>/// 登录按钮点击事件/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protectedvoidbtn_sub_Click(object sender,EventArgs e){//测试//if ("administrator".Equals(userName.Text) && "12345678".Equals(userPwd.Text)) {//    Response.Redirect("index.aspx");//}string sql ="SELECT COUNT(*) FROM user_all WHERE user_name=?name AND user_pwd=?pwd";Hashtable ht =newHashtable();
            ht.Add("name", userName.Text.ToString());
            ht.Add("pwd", userPwd.Text.ToString());int resilc = ToolMysqlDate.excutScal(sql, ht);if(resilc >0){//将用户名绑定到Session
                Session["userName"]= userName.Text.ToString();//Response是服务器发出的响应,耗费资源,服务器的内存和网络的带宽//Response.Redirect("index.aspx");//监听的控件id UpdatePanel1//监听的控件类型 typeof(UpdatePanel)//调用脚本的方法名 ok_login//调用的脚本 alert('您已成功登录!');location.href='index.aspx'//是否是javascript true
                ScriptManager.RegisterStartupScript(UpdatePanel1,typeof(UpdatePanel),"ok_login","alert('您已成功登录!');location.href='index.aspx'",true);}else{//Response.Write("<script>alert('您输入的账户或密码有误,请核对后输入!!!')</script>");
                ScriptManager.RegisterStartupScript(UpdatePanel1,typeof(UpdatePanel),"error_login","alert('您输入的账户或密码有误,请核对后输入!!!')",true);}}}}

效果如下:
当输入不正确的用户名及密码时,触发事件,我们发现之前的登录界面依旧存在,而不是重新刷新
在这里插入图片描述
当输入正确密码时:

标签： asp.net

本文转载自: https://blog.csdn.net/m0_56227168/article/details/122849059
版权归原作者 白露- 所有，如有侵权，请联系我们删除。

ASP.net 简单登录界面

一.说明

二.登录界面(login.aspx)

三.ToolMysqlDate.cs的相关配置

四.index.aspx配置

五.效果

六.AJAX登录界面(login_new.aspx)

发表评论

“ASP.net 简单登录界面”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航