11.4 用户控件示例
在用户控件一节中，介绍了如何创建和使用用户控件。创建用户控件能够为应用程序开发起到非常好的作用，并且提高代码的复用性，ASP.NET允许开发人员创建用户控件和自定义控件，并在Visual Studio 2008中为开发人员提供了原生的开发环境，本节将一步步的进行用户控件的开发。
11.4.1 ASP.NET登录控件
在应用程序开发过程中，登录是必不可少的，例如当用户初次访问该页面时，可以选择登录，也可以选择注册，但是需要有一个登录框作为指导，否则用户无法登录到该网站。当用户再次回访时，登录控件也能够让用户快速的进行登录访问。
作为登录控件，不仅需要对用户的身份进行判断，还需要对用户输入的字符串进行判断，例如，“’”号是SQL数据库中的关键字，如果非法用户利用了SQL关键字中的“’”号进行登录，则会出现错误，系统会提示异常，暴露数据库，这样是非常不安全的，所以登录控件还需要对输入的字符串进行判断，判断完成后，如果不是非法用户，则再继续对身份进行验证。
11.4.2 ASP.NET登录控件的开发
ASP.NET登录控件开发起来并不难，主要是需要理清几个基本概念：
１）用户是否已经注册过，注册过就可以直接登录。
２）用户如果没注册过，则需要跳转到注册页面。
３）如果用户输入的是非法字符或是没有任何输入，则先不对身份进行验证，先对输入框进行验证。
４）用户的验证是通过用户名和密码一起验证的。
当理清了以上思路之后，就能够进行ASP.NET登录控件的开发了。首先，在现有项目中添加一个新项并在弹出窗口中选择【Web用户控件】项目，如图11-15所示。
图11-15 添加新项
创建一个用户控件，并命名为LoginForm.ascx，方便在今后的开发中进行识别。
注意：良好的页面命名习惯也是一种良好的开发习惯，当页面增多时，可以通过页面命名的含义快速的寻找到相应的页面，当用户控件增多时，良好的命名也可以帮助快速寻找到相应的控件。
当创建完成一个LoginForm的用户控件后，就需要对用户控件进行页面布局，布局步骤如下所示。
１）拖动两个TextBox，一个作为用户名输入框，一个作为密码输入框。
２）将密码输入框的TextMode属性设置为Password。
３）拖动一个Button按钮，当用户单击Button按钮时，进行登录操作。
４）拖动一个LinkButton按钮，当用户单击LinkButton按钮时，跳转到登录页面。
当大概理清了控件的布局后，就可以针对控件的功能进行布局，如图11-16所示。
图11-16 登录框控件初步布局
初步的对登录控件进行布局，发现这样的布局并不美观。对于访问者而言，看到一个并不美观的登录控件，很可能就没有想要登录或注册的想法。一个好的用户登录控件的布局，能够提升访问者的兴趣，于是就需要对控件进行布局更改，这里就需要借助于表格等布局工具，单击菜单栏中的【表】选项，单击下拉菜单中的【插入表】选项，系统会弹出默认的表格窗口。在这里，需要3行2列进行布局，可以在对话框中选择行数3、列数2进行配置，如图11-17和图11-18所示。
图11-17 表格默认值
图11-18 配置表格属性
技巧：配置表格属性后，可以勾选“设为新表格的默认值”，当下一次创建表格时，就无需再次配置，当大量的需要同样格式的表格时，可优先考虑此方案。
在编写好表格后，只需要拖动表格进行用户控件的布局即可，布局后HTML代码如下所示。
上述代码所呈现的样式如图11-19所示。
图11-19 更改样式后的登录控件
当登录控件的样式初步制作完毕后，就需要增加一些验证控件，并编写登录框的事件。增加验证控件和增加单击事件后的HTML代码如下所示。
HTML代码确定后，可以编写登录事件，示例代码如下所示。
上述代码判断如果用户名如果不等于test并且密码不等于test的话，则提示登录失败，否则登录成功。
技巧：在这里可以使用ADO.NET对数据库中的用户表进行操作，通过SELECT语句查询相应的用户，如果查询出的值返回值大于0，则说明有这个用户，否则没有这个用户，判断“登录失败”。
11.4.3 ASP.NET登录控件的使用
编写完成ASP.NET登录控件后，就可以使用登录控件进行登录页面的制作，在使用登录控件前，必须通过使用Register关键字向页面注册该用户控件，示例代码如下所示。
上述代码向页面注册了该控件。当页面被执行时，会通过TagPrefix以及TagName判断ASP.NET标签，并解析成相应的ASP.NET控件以呈现给页面，然后页面呈现给用户。当需要使用该控件时，只需要在页面中编写引用代码，示例代码如下所示。
上述代码就在相应的位置显示了用户控件，如图11-20所示。
图11-20 使用用户控件
对使用用户控件的页面进行页面布局，不会影响到用户控件的布局，对用户控件的布局，同样不会影响到页面的布局。相反的是，使用用户控件的页面无需考虑事件，也无需在该页面编写任何C#代码，这让页面变得非常的简洁，而事件的操作可以交付给用户控件，示例代码如下所示。
从上述代码可以看出，使用用户控件，并没有任何冗余的代码，这让页面代码显得非常的整洁和整齐。虽然从表面看上去只有HTML代码，但是并没有影响页面中程序的实现。运行后如图11-21所示。
图11-21 使用用户控件
虽然在页面中并没有实现控件的布局和事件的处理，但是在页面依旧可以呈现相应的控件布局和事件处理。自定义控件的好处就在于能够将复杂的样式或事件存储在一个控件中，以便在不同的页面中进行使用。
11.4.1 ASP.NET登录控件
在应用程序开发过程中，登录是必不可少的，例如当用户初次访问该页面时，可以选择登录，也可以选择注册，但是需要有一个登录框作为指导，否则用户无法登录到该网站。当用户再次回访时，登录控件也能够让用户快速的进行登录访问。
作为登录控件，不仅需要对用户的身份进行判断，还需要对用户输入的字符串进行判断，例如，“’”号是SQL数据库中的关键字，如果非法用户利用了SQL关键字中的“’”号进行登录，则会出现错误，系统会提示异常，暴露数据库，这样是非常不安全的，所以登录控件还需要对输入的字符串进行判断，判断完成后，如果不是非法用户，则再继续对身份进行验证。
11.4.2 ASP.NET登录控件的开发
ASP.NET登录控件开发起来并不难，主要是需要理清几个基本概念：
１）用户是否已经注册过，注册过就可以直接登录。
２）用户如果没注册过，则需要跳转到注册页面。
３）如果用户输入的是非法字符或是没有任何输入，则先不对身份进行验证，先对输入框进行验证。
４）用户的验证是通过用户名和密码一起验证的。
当理清了以上思路之后，就能够进行ASP.NET登录控件的开发了。首先，在现有项目中添加一个新项并在弹出窗口中选择【Web用户控件】项目，如图11-15所示。
图11-15 添加新项
创建一个用户控件，并命名为LoginForm.ascx，方便在今后的开发中进行识别。
注意：良好的页面命名习惯也是一种良好的开发习惯，当页面增多时，可以通过页面命名的含义快速的寻找到相应的页面，当用户控件增多时，良好的命名也可以帮助快速寻找到相应的控件。
当创建完成一个LoginForm的用户控件后，就需要对用户控件进行页面布局，布局步骤如下所示。
１）拖动两个TextBox，一个作为用户名输入框，一个作为密码输入框。
２）将密码输入框的TextMode属性设置为Password。
３）拖动一个Button按钮，当用户单击Button按钮时，进行登录操作。
４）拖动一个LinkButton按钮，当用户单击LinkButton按钮时，跳转到登录页面。
当大概理清了控件的布局后，就可以针对控件的功能进行布局，如图11-16所示。
图11-16 登录框控件初步布局
初步的对登录控件进行布局，发现这样的布局并不美观。对于访问者而言，看到一个并不美观的登录控件，很可能就没有想要登录或注册的想法。一个好的用户登录控件的布局，能够提升访问者的兴趣，于是就需要对控件进行布局更改，这里就需要借助于表格等布局工具，单击菜单栏中的【表】选项，单击下拉菜单中的【插入表】选项，系统会弹出默认的表格窗口。在这里，需要3行2列进行布局，可以在对话框中选择行数3、列数2进行配置，如图11-17和图11-18所示。
图11-17 表格默认值
图11-18 配置表格属性
技巧：配置表格属性后，可以勾选“设为新表格的默认值”，当下一次创建表格时，就无需再次配置，当大量的需要同样格式的表格时，可优先考虑此方案。
在编写好表格后，只需要拖动表格进行用户控件的布局即可，布局后HTML代码如下所示。
+展开
-HTML
<style type="text/css">
.style1
{
width: 100%;
font-size:12px;
}
</style>
<div style="border:1px solid #ccc; background:#f0f0f0; font-size:12px;">
<table class="style1">
<tr>
<td>
用户名 :
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
密码 :</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="登录" />
</td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server">还没有注册?
</asp:LinkButton>
</td>
</tr>
</table>
</div>
.style1
{
width: 100%;
font-size:12px;
}
</style>
<div style="border:1px solid #ccc; background:#f0f0f0; font-size:12px;">
<table class="style1">
<tr>
<td>
用户名 :
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
密码 :</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="登录" />
</td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server">还没有注册?
</asp:LinkButton>
</td>
</tr>
</table>
</div>
上述代码所呈现的样式如图11-19所示。
图11-19 更改样式后的登录控件
当登录控件的样式初步制作完毕后，就需要增加一些验证控件，并编写登录框的事件。增加验证控件和增加单击事件后的HTML代码如下所示。
+展开
-HTML
<style type="text/css">
.style1
{
width: 100%;
font-size:12px;
}
</style>
<div style="border:1px solid #ccc; background:#f0f0f0; font-size:12px;">
<table class="style1">
<tr>
<td>
用户名 :
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1"
ErrorMessage="用户名不能为空">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
密码 :</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBox2"
ErrorMessage="密码不能为空">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="登录" onclick="Button1_Click" />
</td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="resign.aspx">
还没有注册?
</asp:LinkButton>
<asp:Label ID="Label1" runat="server" style="color: #FF3300"></asp:Label>
</td>
</tr>
</table>
</div>
.style1
{
width: 100%;
font-size:12px;
}
</style>
<div style="border:1px solid #ccc; background:#f0f0f0; font-size:12px;">
<table class="style1">
<tr>
<td>
用户名 :
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1"
ErrorMessage="用户名不能为空">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
密码 :</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBox2"
ErrorMessage="密码不能为空">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="登录" onclick="Button1_Click" />
</td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="resign.aspx">
还没有注册?
</asp:LinkButton>
<asp:Label ID="Label1" runat="server" style="color: #FF3300"></asp:Label>
</td>
</tr>
</table>
</div>
HTML代码确定后，可以编写登录事件，示例代码如下所示。
+展开
-C#
protected void Button1_Click(object sender, EventArgs e)
{
if (TextBox1.Text != "test" && TextBox2.Text != "test")//如果用户名不匹配
{
Label1.Text = "登录失败";//提示登录失败
}
else
{
Label1.Text = "登录成功";//否则登录成功
}
}
{
if (TextBox1.Text != "test" && TextBox2.Text != "test")//如果用户名不匹配
{
Label1.Text = "登录失败";//提示登录失败
}
else
{
Label1.Text = "登录成功";//否则登录成功
}
}
上述代码判断如果用户名如果不等于test并且密码不等于test的话，则提示登录失败，否则登录成功。
技巧：在这里可以使用ADO.NET对数据库中的用户表进行操作，通过SELECT语句查询相应的用户，如果查询出的值返回值大于0，则说明有这个用户，否则没有这个用户，判断“登录失败”。
11.4.3 ASP.NET登录控件的使用
编写完成ASP.NET登录控件后，就可以使用登录控件进行登录页面的制作，在使用登录控件前，必须通过使用Register关键字向页面注册该用户控件，示例代码如下所示。
+展开
-HTML
<%@ Register TagPrefix="Sample" TagName="Login" Src="~/LoginForm.ascx" %>
上述代码向页面注册了该控件。当页面被执行时，会通过TagPrefix以及TagName判断ASP.NET标签，并解析成相应的ASP.NET控件以呈现给页面，然后页面呈现给用户。当需要使用该控件时，只需要在页面中编写引用代码，示例代码如下所示。
+展开
-HTML
<Sample:Login runat="server" id="Login1"></Sample:Login>
上述代码就在相应的位置显示了用户控件，如图11-20所示。
图11-20 使用用户控件
对使用用户控件的页面进行页面布局，不会影响到用户控件的布局，对用户控件的布局，同样不会影响到页面的布局。相反的是，使用用户控件的页面无需考虑事件，也无需在该页面编写任何C#代码，这让页面变得非常的简洁，而事件的操作可以交付给用户控件，示例代码如下所示。
+展开
-HTML
<%@ Page Language="C#"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_11_4._Default" %>
<%@ Register TagPrefix="Sample" TagName="Login" Src="~/LoginForm.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<Sample:Login runat="server" id="Login1"></Sample:Login>
</div>
</form>
</body>
</html>
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_11_4._Default" %>
<%@ Register TagPrefix="Sample" TagName="Login" Src="~/LoginForm.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<Sample:Login runat="server" id="Login1"></Sample:Login>
</div>
</form>
</body>
</html>
从上述代码可以看出，使用用户控件，并没有任何冗余的代码，这让页面代码显得非常的整洁和整齐。虽然从表面看上去只有HTML代码，但是并没有影响页面中程序的实现。运行后如图11-21所示。
图11-21 使用用户控件
虽然在页面中并没有实现控件的布局和事件的处理，但是在页面依旧可以呈现相应的控件布局和事件处理。自定义控件的好处就在于能够将复杂的样式或事件存储在一个控件中，以便在不同的页面中进行使用。
加支付宝好友偷能量挖...
