09-用户控件应用

作者: D丝学编程 | 来源:发表于2024-02-20 14:12 被阅读0次

用户控件应用

本章节讲解如何一步一步实现用户登录的用户控件。

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;">&nbsp;</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">&copy;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;">&nbsp;</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">&copy;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;">&nbsp;</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">&copy;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;">&nbsp;</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">&copy;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;">&nbsp;</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">&copy;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
}

09-用户控件应用

用户控件应用

版本一：界面集成

版本二：用户控件属性应用

版本三、用户控件事件应用

版本四、用户控件事件参数

版本五、用户控件方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读