DynamicPopulate控件 - 王晓成

Terry's blog

是建高楼大厦，还是搭窝棚？--------我要建高楼大厦。"只要决心成功，失败就不会把我们击垮" -------《羊皮卷》

博客园

首页

新随笔

联系

管理

333 Posts :: 1 Stories :: 207 Comments :: 51 Trackbacks

DynamicPopulate控件

功能：
        提供了一种动态效果，能通过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值。
代码实例：

<title>DynamicPopulate控件</title>

.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>

<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>

function updateContent(value)

{

var item = $find('dp1');

if(item)

{

item.populate(value);

}

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

</script>

[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方法。

运行结果：