轻松掌握Ajax.net系列教程十一：使用DynamicPopulateExtender-技术开发专区

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

作者：ITPUB论坛编辑： nancy 2008-04-23 00:00

【IT168技术文档】

本章主要介绍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>

关注我们