我今天用ajaxcontroltoolkit做了一个关于ajax的小例子，跟大家分享下。这个例子共使用了toolkit的5种控件：TextBoxWatermark,PasswordStrength,Calendar,FilteredTextBox,AutoComplete。
TextBoxWatermark,顾名思义，就是文本框水印，比如以前有个qq版本你在登陆的时候，号码文本框中有 “请输入qq号码”,你点击了文本框后这字符就不见了。
PasswordStrength，显示当前密码强度。随着你输入密码的长度，字符不同，它会提示你当前密码的安全性级别。
Calendar,日期控件。当你单击一个文本框时，会弹出一个日历一样的div层，你可以随意选择你想填入的日期。
FilteredTextBox,,文本框过滤，使用这个控件你只能在文本框中输入指定的数字，字符或特殊符号。
AutoComplete，自动完成，实现的效果和google搜索非常类似。
这些控件的使用方法非常简单，如果你以前会使用.net里面的验证控件的，你将发现使用它们是多么的相似。
例如使用TextBoxWatermark，你只需要在页面中添加一个TextBoxWatermark控件,，并在TargetControlID属性里写上要绑定的文本框的ID,WatermarkText里写上你要显示的水印文本，WatermarkCssClass属性里写上文本框中显示的水印的样式名。注意使用这些控件的时候，有些被绑定的文本框的autocomplete属性要为off.
以下是default.aspx页面的源代码（此代码要在 ASP.NET AJAX Enabled WebSite站点中运行）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>个人信息输入</title>
<style>
.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<div>
<div>
请在下面的表中输入你的信息:
</div>
<div>
<table>
<tr>
<td style="width: 100px">
姓名</td>
<td style="width: 100px">
<asp:TextBox ID="txtname" runat="server" ></asp:TextBox></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
密码</td>
<td style="width: 100px">
<asp:TextBox ID="txtpwd" runat="server" MaxLength="16" autocomplete="off" TextMode="Password" Width="148px"></asp:TextBox></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
出生年月</td>
<td style="width: 100px">
<asp:TextBox ID="txtbrith" runat="server" autocomplete="off"></asp:TextBox></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
年龄</td>
<td style="width: 100px">
<asp:TextBox ID="txtage" runat="server" MaxLength="3"></asp:TextBox></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
所在地区</td>
<td style="width: 100px">
<asp:TextBox ID="txtarea" runat="server" autocomplete="off"></asp:TextBox></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Button ID="Button1" runat="server" Text="提交" OnClick="Button1_Click" /></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:Label ID="Label1" runat="server"></asp:Label></td>
<td style="width: 100px">
</td>
</tr>
</table>
</div>
</div>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtbrith">
</ajaxToolkit:CalendarExtender>
<ajaxToolkit:PasswordStrength ID="PasswordStrength1" runat="server" TargetControlID="txtpwd"
DisplayPosition="RightSide"
StrengthIndicatorType="Text"
PreferredPasswordLength="10"
PrefixText="密码强度:"
TextStrengthDescriptions="非常弱;弱;一般;强;良好"
MinimumNumericCharacters="0"
MinimumSymbolCharacters="0"
RequiresUpperAndLowerCaseCharacters="false" />
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="txtage" FilterType="Numbers">
</ajaxToolkit:FilteredTextBoxExtender>
<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCompletionList"
MinimumPrefixLength="1"
FirstRowSelected="true"
CompletionInterval="100"
TargetControlID="txtarea">
</ajaxToolkit:AutoCompleteExtender>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" WatermarkText="请输入用户名" runat="server" TargetControlID="txtname" WatermarkCssClass="watermarked">
</ajaxToolkit:TextBoxWatermarkExtender>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
下面是default.aspx.cs 中的全部代码。
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 在输入框的文本后加三个随机字符 by flysky 2008-2-28
/// </summary>
/// <param name="prefixText">文本框中文本</param>
/// <param name="count">条数</param>
/// <returns></returns>
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count)
{
if (count == 0)
{
count = 10;
}
Random random = new Random();
List<string> items = new List<string>(count);
for (int i = 0; i < count; i++)
{
char c1 = (char)random.Next(65, 90);
char c2 = (char)random.Next(97, 122);
char c3 = (char)random.Next(97, 122);
items.Add(prefixText + c1 + c2 + c3);
}
return items.ToArray();
}
/// <summary>
/// 将所有文本框置空 by flysky 2008-2-28
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Button1_Click(object sender, EventArgs e)
{
txtname.Text = "";
txtage.Text = "";
txtarea.Text = "";
txtbrith.Text = "";
txtpwd.Text = "";
Label1.Text = "信息添加成功！";
}
}
