4.4 使用AJAX Control Toolkit中的例子

 

导论和目标

1. 安装ASP.NET AJAX v1.0

2. 使用Visual Studio 2005准备开发ASP.NET AJAX应用

3. 创建一个ASP.NET AJAX Futures 的启动模型 

4. 使用AJAX扩展xBikes解决方案 

4.1 添加ScriptManager and UpdatePanel

4.2 执行异步请求时显示通知 

4.3 使用AutoCompleteExtender异步调用Web service 

4.4 使用AJAX Control Toolkit中的例子 

4.5 拖拽功能

4.6 在AJAX Framework中使用ASP.NET’s Profile服务 

4.7 创建你自己的ASP.NET AJAX 控件扩展 

---

 

预览: ASP.NET Control Toolkit提供的示例控件是非常容易使用的，并且在Web页面上的示例也是很容易理解的。在我们的解决方案中，我们将使用其中的两个，TextBoxWatermarkExtender和FilteredTextBoxExtender。

我们将使用TextBoxWatermarkExtender来告诉用户在Zip and Town文本框中必须输入邮政编码。

使用FilteredTextBoxExtender控件，我们可以在Zip and Town中限制只能输入数字。

步骤4.4a: 在Visual Studio中，从工具箱AJAX Control Toolkit项中，拖出TextBoxWatermarkExtender和FilteredTextBoxExtender放在CheckOut.aspx页面上的 UpdatePanel1控件中(该控件是在步骤 4.3d 创建的)。

设置TextBoxWatermarkExtender1控件的下列属性：

TargetControlID

tbZipTown

图4.4a:"TextBoxWatermarkExtender 控件的属性.

接下来，点击tbZipTown控件并展开Extenders分类属性(如果没有Extenders分类，可以点击属性窗口中的按分类查看的图标)。你会看到一些新的属性通过联合扩展控件的方式分配到TextBox中。

设置下列值：

WatermarkText

Type numeric ZIP code

图4.4b: 增加了扩展分类的TextBox控件的属性

步骤4.4b:在FilteredTextBoxExtender1控件的属性窗口中，设置下列属性值：

TargetControlID

tbZipTown

接下来，点击tbZipTown控件并在属性窗口中找到Extenders分类属性(如果没有Extenders分类，可以点击属性窗口中的按分类查看的图标)。你会看到两个扩展控件的属性，如下配置值：

FilterType

Numbers

图4.4c: TextBox控件的Extenders区的属性

图4.4c:拖动一个新的DropShadowExtender控件并放在UpdatePanel1控件中，设置TargetControlID属性值为Panel1，设置Opacity为0.5。

图4.4d: 配置"DropShadowExtender1".

测试: 运行解决方案，转到Shopping页，在购物车中增加些产品。浏览Shopping Basket并点击Proceed to Checkout(先登录)。

在CheckOut页，你会看到Extenders控件开始起作用了。在Zip and Town文本域输入字母，你会看到它只允许用户输入数字。当用户将鼠标点击在文本域中的时候，提示文本将会消失。

图4.4e: CheckOut.aspx页面上的ExtenderControls控件

关闭浏览器.