Terry's blog

Focus on bigdata and cloud.

博客园 首页 新随笔 联系 订阅 管理

功能:
        提供了一种动态效果,能通过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" />&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>
    
</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"是指DynamicPopulateExtenderBehaviorID属性,大家也可以把DynamicPopulateExtenderID属性设为"dp1"而删掉BehaviorID属性,效果是一样的。
    这段JS的意思是先找到DynamicPopulateExtender组件,然后执行它的populate方法。而Sys.Application.add_load就相当于body里的onload方法。

运行结果:
                
posted on 2007-11-02 16:40  王晓成  阅读(1188)  评论(0编辑  收藏  举报