• [转]轻松掌握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"是指DynamicPopulateExtenderBehaviorID属性,大家也可以把DynamicPopulateExtenderID属性设为"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的规定签名格式的问题,不要随意更改指定参数名称和参数数量。

    引用地址:http://www.falaosao.net/article.asp?id=136

  • 相关阅读:
    mssql:tsql;创建表;给表添加约束;使用变量;事务,索引,视图;存储过程;触发器trigger;播放器http://www.smartgz.com/blog/Article/956.asp
    str.Replace(" ","");
    DataGrid分页;指定列的总和和平均值;显示鼠标背景色;弹出式窗口;
    .net 面试题 (1)
    数据绑定技术_单值数据绑定示例;将 DataTable,DataSet,DataView,DataReader 绑定到 DataGrid 控件示例;DataBinder.Eval;数组的值赋给ListBox1;Hashtable 绑定到;RadioButtonList;将XML 文件做为数据源绑定到控件
    Lession 17 Always young 保持年轻
    智力面试题
    Lession 16 A Polite request 彬彬有礼的要求
    几道 C 语言面试题
    建表的范例脚本,存储过程中参数的命名
  • 原文地址:https://www.cnblogs.com/sishierfei/p/1610574.html
Copyright © 2020-2023  润新知