添加ASP.NET其他的AJAX技术

接下来，我想介绍的是如何添加一些脚本并把它添加到我们的示例程序的UI中创建其他基于AJAX的交互而生成的HTML。具体地说，我想在文本框中添加一个水印效果，此效果为用户输入提供了极为友好的用户直观性提示。只要没有用户输入，此水印效果就会显示出来，而当用户把输入焦点定位于文本框中时即水印效果消失。

当然，篇幅所限，我们也不会过于细致地去讨论脚本本身。有关此脚本详细内容，请参考本文源码，但是需要指出的是这个水印效果被实现为大家可能熟悉的ASP.NET AJAX框架的一个客户端行为（Behavior）组件。就像任何其他行为组件一样，我们的示例中所使用的文本框也是与DOM元素相关联，而且它实现了对此元素引发的相关事件的订阅。

在传统的web表单页面中,我经常会直接使用支持AJAX功能的服务器控件，例如WatermarkExtender，并使之关联到一个服务器控件。但是，在本例中，我使用了另一种扩展方法来实现渲染效果。通过此方法，我也可以实现创建并初始化脚本行为组件的一个实例。下面给出了我更新以后的视图关键部分的代码片断：

 
 
 

  
  
  
<% RenderBeginAjaxForm(Url.Action("Add"),  
  
  
  
new { Update="taskList, UpdateType="appendBottom",  
  
  
  
Highlight="True",  
  
  
  
Starting="startAddTask", Completed="endAddTask" }); %> 
  
  
  
 type="text" name="name" id="nameTextBox" /> 

  
  
  
<% Ajax.Watermark("nameTextBox",  
  
  
  
new { watermarkText="[What do you need to do?]",  
  
  
  
watermarkCssClass="watermark"}); %> 
  
  
  
 
  
  
  
 type="submit" name="addTask" value="Add Task" /> 

  
  
  
<% RenderEndForm(); %> 
 
 
 

上面的扩展方法实现相当简单。其实，它也就是调用了现成的AJAX框架。下面是我定义的WatermarkBehavior类相应的代码：

 
 
 

  
  
  
public static class WatermarkBehavior {  
  
  
  
public static void Watermark(this AjaxHelper ajaxHelper,
string id, object watermarkOptions) {  
  
  
  
ajaxHelper.RegisterScript("~/Views/Scripts/Watermark.js");  
  
  
  
ajaxHelper.RegisterScriptBehavior(id, "Ajax.Watermark", watermarkOptions);  
  
  
  
}  
  
  
  
}