轻松掌握Ajax.net系列教程十一：使用DynamicPopulateExtender

本章主要介绍DynamicPopulateExtender的使用方法。DynamicPopulateExtender提供了一种动态效果，能通过WebService或访问服务器端代码获取一段HTML文本，并替换掉目标控件上原来的内容。

第一步：建立AJAX Control Toolkit Website

为了方便解说，本例子只使用了很少的控件，包括：两个HtmlInputRadio控件，一个Panel控件和一个DynamicPopulateExtender组件。所有控件的设置如以下代码所示：

<div>

中文：<input id="Radio1" value="chs" onclick="updateContent(this.value);" type="radio"

name="example" />&nbsp;&nbsp; 英文：

<input id="Radio2" value="eng" onclick="updateContent(this.value);" type="radio"

name="example" />

</div>

<asp:Panel ID="Panel1" CssClass="panelNormal" runat="server">

</asp:Panel>

<ajaxToolkit:DynamicPopulateExtender ID="dp" BehaviorID="dp1" runat="server"

TargetControlID="Panel1"

ServiceMethod="GetHtml"

UpdatingCssClass="panelUpdating">

</ajaxToolkit:DynamicPopulateExtender>

DynamicPopulateExtender的设置很简单，这里简单说明一下：TargetControlID是指目标控件的ID，这里是Panel1，说明运行后DynamicPopulateExtender会替换掉Panel1中的内容。ServiceMethod是指Web服务中的函数，该函数名是GetHtml，稍后我会给出它的代码。UpdatingCssClass是当DynamicPopulateExtender正在获取内容时Panel1所套用的CSS样式，这个属性能使Panel1的界面更友好而不只是变得一片空白。注意：还有一个很重要的属性是ServicePath，由于我没有新建WebService来写GetHtml函数，所以这里不需要指定，但如果大家需要调用单独的WebService文件时，这个属性是需要指定的，值是所调用的WebService的全名，例如：WebService.asmx。

设置完所有控件之后我们还要编写相关CSS样式。大家可以参考如下代码：

.panelNormal

{

border-width:1px;

border-color:#fff;

background:#ff9900;

font-size:14px;

width:300px;

height:250px;

font-family:Tahoma;

vertical-align:middle;

text-align:center;

}

.panelUpdating

{

border-width:1px;

border-color:#000;

background:#cccccc;

font-size:14px;

width:300px;

height:250px;

}

大家要注意一下以上两个CSS样式的使用位置。一个是Panel1正常状态时的CSS样式，另一个是读取数据时的CSS样式。

第二步：编写Javascript

在以上代码中我们能看到两个Radio都调用了一个叫updateContent的Js函数，现在我列出该函数的代码：

<script type="text/javascript">

function updateContent(value)

{

var item = find('dp1');

if(item)

{

item.populate(value);

}

}

Sys.Application.add_load(function(){updateContent("chs");});

</script>

注意：以上代码调用了Ajax.net的JS函数库，因此该函数一定要放在<asp:ScriptManager/>标签以下，否则会抛异常。"dp1"是指DynamicPopulateExtender的BehaviorID属性，大家也可以把DynamicPopulateExtender的ID属性设为"dp1"而删掉BehaviorID属性，效果是一样的。

这段JS的意思是先找到DynamicPopulateExtender组件，然后执行它的populate方法。而Sys.Application.add_load就相当于body里的onload，有关Ajax.net的JS函数库在这里不再作详细解析，大家自行测试一下。

第三步：创建WebService

这里我们要创建GetHtml函数，为了方便我直接在页面文件上创建该函数，具体代码如下：

<script runat="server">

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static string GetHtml(string contextKey)

{

System.Threading.Thread.Sleep(2000);

if (contextKey == "chs")

{

return "今天天气不错！";

}

else

{

return "The weather today is nice!";

}

}

</script>

这段代码很简单，根据不同的参数返回一段话的中文版本或英文版本，为了让效果更明显，我让程序延迟了2秒再执行。

注意：GetHtml的参数名contextKey和参数的数量都是不可修改的，它是AjaxControlToolkit的规定签名格式，因此DynamicPopulateExtender的ServiceMethod属性只需要定义为GetHtml，而不需要填写参数。如果要修改该名称则必须重新编译AjaxControlToolkit的Dll文件，否则会返回500错误。但GetHtml这个函数名则是可以随意更改的，大家一定要注意！

OK，运行，效果如下图：

选择“英文”后，Panel1进入Updating状态。

成功读取数据后Panel1又回到了正常状态。

结束：

本章主要介绍了DynamicPopulateExtender的使用方法。大家可以自行编写更复杂的WebService，让DynamicPopulateExtender发挥更好的作用。同时再次提醒大家一定要注意AjaxControlToolkit的规定签名格式的问题，不要随意更改指定参数名称和参数数量。