zoukankan      html  css  js  c++  java
  • [转]轻松掌握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

  • 相关阅读:
    Win10 UWP Tile Generator
    Win10 BackgroundTask
    UWP Tiles
    UWP Ad
    Win10 build package error collections
    Win10 八步打通 Nuget 发布打包
    Win10 UI入门 pivot multiable DataTemplate
    Win10 UI入门 导航滑动条 求UWP工作
    UWP Control Toolkit Collections 求UWP工作
    Win10 UI入门 SliderRectangle
  • 原文地址:https://www.cnblogs.com/sishierfei/p/1610574.html
Copyright © 2011-2022 走看看