09-用户控件应用
2024-02-20 本文已影响0人
D丝学编程
用户控件应用
本章节讲解如何一步一步实现用户登录的用户控件。
0076.PNG
版本一：界面集成
将登录界面需要的控件集成在用户控件中。
用户控件代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Login1.ascx.cs" Inherits="UserControl_Login1" %>
<style type="text/css">
.tabLogin{ width:600px; border-collapse:collapse; margin:0px auto; font-size:16px; font-family: 微软雅黑;}
.tabLogin td{ height:30px; line-height:30px; border:solid 1px gray; padding:6px;}
.tabLogin .loginHead{ background-color:#94AAD6; text-align:center; color:White;}
.tabLogin span{ color:Red;}
.tabLogin .loginFoot{ background-color:#94AAD6; text-align:center; color:White; text-align:right;}
</style>
<table class="tabLogin">
<tr class="loginHead">
<td colspan="2">欢迎登录***系统</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">用户名：</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">密码：</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;"> </td>
<td>
<asp:Button ID="btLogin" runat="server" Text="登 录" />
<asp:HyperLink ID="hlReg" runat="server" NavigateUrl="#">立即注册</asp:HyperLink>
<div id="divInfo" runat="server" clientidmode="Static" visible="false">
<asp:Label ID="lblInfo" runat="server" Text="消息。。" ForeColor="Red"></asp:Label>
</div>
</td>
</tr>
<tr class="loginFoot">
<td colspan="2">©KG用户登录控件</td>
</tr>
</table>
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo01.aspx.cs" Inherits="Demo01" %>
<%@ Register src="UserControl/Login1.ascx" tagname="Login1" tagprefix="uc1" %>
<!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>
<h1>基本的创建和使用用户控件</h1>
<form id="form1" runat="server">
<div>
<uc1:Login1 ID="Login11" runat="server" />
</div>
</form>
</body>
</html>
版本二：用户控件属性应用
在版本一中，任何页面去使用用户控件，用户控件的展现形式都是一模一样的，如果需要在页面中可以控制登录用
户控件的展现形式，例如，需要控制登录的标题信息，控件中的“立即注册”超级链接是否显示，以及“立即注册”超
级链接的链接地址；我们可以通过在用户控件中添加属性，然后页面中传递参数来设置属性来解决上述问题。
用户控件代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Login2.ascx.cs" Inherits="UserControl_Login2" %>
<style type="text/css">
.tabLogin{ width:600px; border-collapse:collapse; margin:0px auto; font-size:16px; font-family: 微软雅黑;}
.tabLogin td{ height:30px; line-height:30px; border:solid 1px gray; padding:6px;}
.tabLogin .loginHead{ background-color:#94AAD6; text-align:center; color:White;}
.tabLogin span{ color:Red;}
.tabLogin .loginFoot{ background-color:#94AAD6; text-align:center; color:White; text-align:right;}
</style>
<table class="tabLogin">
<tr class="loginHead">
<td colspan="2" id="tdLoginHead" runat="server" clientidmode="Static">欢迎登录***系统</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">用户名：</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">密码：</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;"> </td>
<td>
<asp:Button ID="btLogin" runat="server" Text="登 录" />
<asp:HyperLink ID="hlReg" runat="server" NavigateUrl="#">立即注册</asp:HyperLink>
<div id="divInfo" runat="server" clientidmode="Static" visible="false">
<asp:Label ID="lblInfo" runat="server" Text="消息。。" ForeColor="Red"></asp:Label>
</div>
</td>
</tr>
<tr class="loginFoot">
<td colspan="2">©KG用户登录控件</td>
</tr>
</table>
public partial class UserControl_Login2 : System.Web.UI.UserControl
{
#region 属性
//控件头部标题内容
private string headText = "欢迎登录***系统";
public string HeadText { get { return this.headText; } set { this.headText = value; } }
//是否显示“立即注册”超级链接
private bool isShowReg = false;
public bool IsShowReg { get { return this.isShowReg; } set { this.isShowReg = value; } }
//“立即注册”超级链接的链接地址
private string regUrl = "#";
public string RegUrl { get { return this.regUrl; } set { this.regUrl = value; } }
#endregion
protected void Page_Load(object sender, EventArgs e)
{
this.tdLoginHead.InnerHtml = this.HeadText;
this.hlReg.Visible = this.IsShowReg;
this.hlReg.NavigateUrl = this.RegUrl;
}
}
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo02.aspx.cs" Inherits="Demo02" %>
<%@ Register src="UserControl/Login2.ascx" tagname="Login2" tagprefix="uc1" %>
<!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>
<h1>用户控件-自定义属性</h1>
<form id="form1" runat="server">
<div>
<%--控件的属性可以在标签中设置，也可以在后台CS代码中编写--%>
<uc1:Login2 ID="Login21" runat="server" HeadText="欢迎登录OA管理系统" IsShowReg="true" RegUrl="~/Reg.aspx" />
</div>
</form>
</body>
</html>
public partial class Demo02 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Login21.HeadText = "欢迎登录CMS系统";
}
}
版本三、用户控件事件应用
在版本二中，虽然我们可以在页面中对用户控件的界面进行一定的控制，但是我们仍然不能在界面中响应到用户控
件中的事件（例如登录按钮的点击事件），我们可以在用户控件中添加自定义事件在解决上述问题：
用户控件代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Login3.ascx.cs" Inherits="UserControl_Login3" %>
<style type="text/css">
.tabLogin{ width:600px; border-collapse:collapse; margin:0px auto; font-size:16px; font-family: 微软雅黑;}
.tabLogin td{ height:30px; line-height:30px; border:solid 1px gray; padding:6px;}
.tabLogin .loginHead{ background-color:#94AAD6; text-align:center; color:White;}
.tabLogin span{ color:Red;}
.tabLogin .loginFoot{ background-color:#94AAD6; text-align:center; color:White; text-align:right;}
</style>
<table class="tabLogin">
<tr class="loginHead">
<td colspan="2" id="tdLoginHead" runat="server" clientidmode="Static">欢迎登录***系统</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">用户名：</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">密码：</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;"> </td>
<td>
<asp:Button ID="btLogin" runat="server" Text="登 录" onclick="btLogin_Click" />
<asp:HyperLink ID="hlReg" runat="server" NavigateUrl="#">立即注册</asp:HyperLink>
<div id="divInfo" runat="server" clientidmode="Static" visible="false">
<asp:Label ID="lblInfo" runat="server" Text="消息。。" ForeColor="Red"></asp:Label>
</div>
</td>
</tr>
<tr class="loginFoot">
<td colspan="2">©KG用户登录控件</td>
</tr>
</table>
public partial class UserControl_Login3 : System.Web.UI.UserControl
{
#region 属性
//控件头部标题内容
private string headText = "欢迎登录***系统";
public string HeadText { get { return this.headText; } set { this.headText = value; } }
//是否显示“立即注册”超级链接
private bool isShowReg = false;
public bool IsShowReg { get { return this.isShowReg; } set { this.isShowReg = value; } }
//“立即注册”超级链接的链接地址
private string regUrl = "#";
public string RegUrl { get { return this.regUrl; } set { this.regUrl = value; } }
#endregion
#region 事件
public event EventHandler UserLogin; //定义事件
#endregion
protected void Page_Load(object sender, EventArgs e)
{
this.tdLoginHead.InnerHtml = this.HeadText;
this.hlReg.Visible = this.IsShowReg;
this.hlReg.NavigateUrl = this.RegUrl;
}
#region 登录按钮触发事件
protected void btLogin_Click(object sender, EventArgs e)
{
if (UserLogin != null)
{
UserLogin(this, new EventArgs());
}
}
#endregion
}
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo03.aspx.cs" Inherits="Demo03" %>
<%@ Register src="UserControl/Login3.ascx" tagname="Login3" tagprefix="uc1" %>
<!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>
<h1>用户控件-自定义事件</h1>
<form id="form1" runat="server">
<div>
<uc1:Login3 ID="Login31" runat="server" OnUserLogin="Login31_UserLogin" />
</div>
</form>
</body>
</html>
public partial class Demo03 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region 响应登录事件
protected void Login31_UserLogin(object sender, EventArgs e)
{
Response.Write("用户控件的UserLogin事件被触发了!!!");
}
#endregion
}
版本四、用户控件事件参数
在版本三中，我们通过在用户控件中自定义事件，虽然可以在页面中响应到用户控件的登录按钮的点击事件了，但
是在页面中的用户控件的自定义事件方法中，我们无法获取到用户控件中输入的用户名和密码，我们可以通过定义
事件参数来解决上述问题。
用户控件代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Login4.ascx.cs" Inherits="UserControl_Login4" %>
<style type="text/css">
.tabLogin{ width:600px; border-collapse:collapse; margin:0px auto; font-size:16px; font-family: 微软雅黑;}
.tabLogin td{ height:30px; line-height:30px; border:solid 1px gray; padding:6px;}
.tabLogin .loginHead{ background-color:#94AAD6; text-align:center; color:White;}
.tabLogin span{ color:Red;}
.tabLogin .loginFoot{ background-color:#94AAD6; text-align:center; color:White; text-align:right;}
</style>
<table class="tabLogin">
<tr class="loginHead">
<td colspan="2" id="tdLoginHead" runat="server" clientidmode="Static">欢迎登录***系统</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">用户名：</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">密码：</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<span>*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;"> </td>
<td>
<asp:Button ID="btLogin" runat="server" Text="登 录" onclick="btLogin_Click" />
<asp:HyperLink ID="hlReg" runat="server" NavigateUrl="#">立即注册</asp:HyperLink>
<div id="divInfo" runat="server" clientidmode="Static" visible="false">
<asp:Label ID="lblInfo" runat="server" Text="消息。。" ForeColor="Red"></asp:Label>
</div>
</td>
</tr>
<tr class="loginFoot">
<td colspan="2">©KG用户登录控件</td>
</tr>
</table>
public partial class UserControl_Login4 : System.Web.UI.UserControl
{
#region 属性
//控件头部标题内容
private string headText = "欢迎登录***系统";
public string HeadText { get { return this.headText; } set { this.headText = value; } }
//是否显示“立即注册”超级链接
private bool isShowReg = false;
public bool IsShowReg { get { return this.isShowReg; } set { this.isShowReg = value; } }
//“立即注册”超级链接的链接地址
private string regUrl = "#";
public string RegUrl { get { return this.regUrl; } set { this.regUrl = value; } }
#endregion
#region 事件
public event EventHandler<LoginEventArgs> UserLogin; //定义事件
#endregion
#region 事件参数类（内部类）
public class LoginEventArgs : EventArgs
{
public string Account { get; set; }
public string Pwd { get; set; }
public LoginEventArgs(string account,string pwd)
{
this.Account = account;
this.Pwd = pwd;
}
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
this.tdLoginHead.InnerHtml = this.HeadText;
this.hlReg.Visible = this.IsShowReg;
this.hlReg.NavigateUrl = this.RegUrl;
}
#region 登录按钮触发事件
protected void btLogin_Click(object sender, EventArgs e)
{
if (UserLogin != null)
{
UserLogin(this, new LoginEventArgs(this.txtAccount.Text,this.txtPwd.Text));
}
}
#endregion
}
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo04.aspx.cs" Inherits="Demo04" %>
<%@ Register src="UserControl/Login4.ascx" tagname="Login4" tagprefix="uc1" %>
<!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>
<h1>用户控件-自定义事件参数</h1>
<form id="form1" runat="server">
<div>
<uc1:Login4 ID="Login41" runat="server" OnUserLogin="Login41_UserLogin" />
</div>
</form>
</body>
</html>
public partial class Demo04 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region 响应登录事件
protected void Login41_UserLogin(object sender, UserControl_Login4.LoginEventArgs e)
{
//假设用户名：admin,密码：123456登录成功，其它都失败
if (e.Account.Equals("admin") && e.Pwd.Equals("123456"))
Response.Write("登录成功");
else
Response.Write("用户名或密码错误!");
}
#endregion
}
版本五、用户控件方法
在版本四中，我们可以响应登录事件，并且可以获取用户输入用户名、密码，可以判断登录是否成功，但是登录之
后的提示信息只能在页面中显示，在不能在用户控件里面进行显示。通过给用户控件添加方法可以解决上述问题。
用户控件代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Login5.ascx.cs" Inherits="UserControl_Login5" %>
<style type="text/css">
.tabLogin{ width:600px; border-collapse:collapse; margin:0px auto; font-size:16px; font-family: 微软雅黑;}
.tabLogin td{ height:30px; line-height:30px; border:solid 1px gray; padding:6px;}
.tabLogin .loginHead{ background-color:#94AAD6; text-align:center; color:White;}
.tabLogin span{ color:Red;}
.tabLogin .loginFoot{ background-color:#94AAD6; text-align:center; color:White; text-align:right;}
</style>
<table class="tabLogin">
<tr class="loginHead">
<td colspan="2" id="tdLoginHead" runat="server" clientidmode="Static">欢迎登录***系统</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">用户名：</td>
<td>
<asp:TextBox ID="txtAccount" runat="server" ClientIDMode="Static"></asp:TextBox>
<span id="accInfo">*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;">密码：</td>
<td>
<asp:TextBox ID="txtPwd" runat="server" TextMode="Password" ClientIDMode="Static"></asp:TextBox>
<span id="pwdInfo">*必填</span>
</td>
</tr>
<tr>
<td style=" text-align:right; width:200px;"> </td>
<td>
<asp:Button ID="btLogin" runat="server" Text="登 录" ClientIDMode="Static" onclick="btLogin_Click" />
<asp:HyperLink ID="hlReg" runat="server" NavigateUrl="#">立即注册</asp:HyperLink>
<div id="divInfo" runat="server" clientidmode="Static" visible="false">
<asp:Label ID="lblInfo" runat="server" Text="消息。。" ForeColor="Red"></asp:Label>
</div>
</td>
</tr>
<tr class="loginFoot">
<td colspan="2">©KG用户登录控件</td>
</tr>
</table>
public partial class UserControl_Login5 : System.Web.UI.UserControl
{
#region 属性
//控件头部标题内容
private string headText = "欢迎登录***系统";
public string HeadText { get { return this.headText; } set { this.headText = value; } }
//是否显示“立即注册”超级链接
private bool isShowReg = false;
public bool IsShowReg { get { return this.isShowReg; } set { this.isShowReg = value; } }
//“立即注册”超级链接的链接地址
private string regUrl = "#";
public string RegUrl { get { return this.regUrl; } set { this.regUrl = value; } }
#endregion
#region 事件
public event EventHandler<LoginEventArgs> UserLogin; //定义事件
#endregion
#region 事件参数类（内部类）
public class LoginEventArgs : EventArgs
{
public string Account { get; set; }
public string Pwd { get; set; }
public LoginEventArgs(string account, string pwd)
{
this.Account = account;
this.Pwd = pwd;
}
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
this.tdLoginHead.InnerHtml = this.HeadText;
this.hlReg.Visible = this.IsShowReg;
this.hlReg.NavigateUrl = this.RegUrl;
}
#region 登录按钮触发事件
protected void btLogin_Click(object sender, EventArgs e)
{
if (UserLogin != null)
{
UserLogin(this, new LoginEventArgs(this.txtAccount.Text, this.txtPwd.Text));
}
}
#endregion
#region 设置登录之后的提示信息
public void SetLoginInfo(string message)
{
this.divInfo.Visible = true;
this.lblInfo.Text = message;
}
#endregion
}
在页面中使用用户控件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo05.aspx.cs" Inherits="Demo05" %>
<%@ Register src="UserControl/Login5.ascx" tagname="Login5" tagprefix="uc1" %>
<!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>
<h1>用户控件-自定义事件参数-调用用户控件方法</h1>
<form id="form1" runat="server">
<div>
<uc1:Login5 ID="Login51" runat="server" OnUserLogin="Login51_UserLogin" />
</div>
</form>
</body>
</html>
public partial class Demo05 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
#region 响应登录事件
protected void Login51_UserLogin(object sender, UserControl_Login5.LoginEventArgs e)
{
//假设用户名：admin,密码：123456登录成功，其它都失败
if (e.Account.Equals("admin") && e.Pwd.Equals("123456"))
this.Login51.SetLoginInfo("登录成功！");
else
this.Login51.SetLoginInfo("用户名或密码错误！");
}
#endregion
}
