功能:
提供了一种动态效果,能通过WebService或访问服务器端代码获取一段HTML文本,并替换掉目标控件上原来的内容。
属性:
TargetControlID :将具备"动态呈现"的Panel控件的值。
ClearContentsDuringUpdate :当更新时,是否清除目标元素中的既有HTML内容。若没有指定,将会自动
清除 HTML内容,默认值为true。
SerivcePath : 将要调用的Web服务的URL。如果调用一个页面方法,就不用设置些属性。
SerivceMethod :Web服务方法或页面方法的名称。
PopulateTriggerControlID :一个选择的属性,用来指定某个控件被单击时,要触发目标元素进行动态呈现。
UpdatingCssClass: 在异步调用(Asynchronous Call)时,欲套用到目标元素的CSS类属性。
CustomScript : 替换原本将要调用的Web服务方法或页面方法,改调用指定的脚本(Script),它必须 计算机
为一个字符串值。
ContextKey : 将传递给Web方法的任意字符串值。比方说,动态呈现欲显示一个绑定到资料的Repeater,
那么所传入的字符串值可以是目前该行数据的ID值。
代码实例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DynamicPopulate控件</title>
<style type="text/css">
.panelNormal
{
border-width:1px;
border-color:#fff;
background:#ff9900;
font-size:14px;
width:200px;
height:80px;
font-family:Tahoma;
vertical-align:middle;
text-align:center;
}
.panelUpdating
{
border-width:1px;
border-color:#000;
background:#cccccc;
font-size:14px;
width:200px;
height:80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
中文:<input id="Radio1" value="chs" onclick="updateContent(this.value);" type="radio"
name="example" /> 英文:
<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>
</form>
<script type="text/javascript">
function updateContent(value)
{
var item = $find('dp1');
if(item)
{
item.populate(value);
}
}
Sys.Application.add_load(function(){updateContent("chs");});
</script>
<script runat="server">
[System.Web.Script.Services.ScriptMethod]
[System.Web.Services.WebMethod]
public static string GetHtml(string contextKey)
{
System.Threading.Thread.Sleep(1000);
if (contextKey == "chs")
{
return "今天天气不错!";
}
else
{
return "The weather today is nice!";
}
}
</script>
</body>
</html>
以上代码需要注意的地方:<head runat="server">
<title>DynamicPopulate控件</title>
<style type="text/css">
.panelNormal
{
border-width:1px;
border-color:#fff;
background:#ff9900;
font-size:14px;
width:200px;
height:80px;
font-family:Tahoma;
vertical-align:middle;
text-align:center;
}
.panelUpdating
{
border-width:1px;
border-color:#000;
background:#cccccc;
font-size:14px;
width:200px;
height:80px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
中文:<input id="Radio1" value="chs" onclick="updateContent(this.value);" type="radio"
name="example" /> 英文:
<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>
</form>
<script type="text/javascript">
function updateContent(value)
{
var item = $find('dp1');
if(item)
{
item.populate(value);
}
}
Sys.Application.add_load(function(){updateContent("chs");});
</script>
<script runat="server">
[System.Web.Script.Services.ScriptMethod]
[System.Web.Services.WebMethod]
public static string GetHtml(string contextKey)
{
System.Threading.Thread.Sleep(1000);
if (contextKey == "chs")
{
return "今天天气不错!";
}
else
{
return "The weather today is nice!";
}
}
</script>
</body>
</html>
javascript部分调用了Ajax.net的JS函数库的add_load()方法,因此该函数一定要放在<asp:ScriptManager/>标签以下,否则会抛异常。"dp1"是指DynamicPopulateExtender的BehaviorID属性,大家也可以把DynamicPopulateExtender的ID属性设为"dp1"而删掉BehaviorID属性,效果是一样的。
这段JS的意思是先找到DynamicPopulateExtender组件,然后执行它的populate方法。而Sys.Application.add_load就相当于body里的onload方法。
运行结果: