随笔- 219 文章- 6 评论- 828 阅读- 24万

DynamicPopulate

DynamicPopulate控件动态的，允许程序在运行过程中更改指定控件的内容，类似于使用“document.getElementById(‘controlid’).value='contents'”这样的语句。可以让页面在客户端运行时查询某个web service或页面的方法。并将其返回的HTML字符串插入到页面的某个控件中。

属性列表：
BehaviorID:行为的ID，用于在客户端获取Ajax控件。
TargetControlID:需要动态填充内容的控件
ClearContentsDuringUpdate:在更新的时候是否清空内容
ServiceMethod:获取数据需要使用的WEB服务
UpdatingCssClass:更新过程中使用的样式
ContextKey:上下文关键字，可通过此关键字判断返回什么类型的数据
CustomScript:一段自定义的脚本，此脚本必须能被格式化为字符串
PopulateTriggerControlID:引发填充事件的控件的ID

实例解析一、动态填充实例
1.创建根据关键字获取数据的WEB服务
/// <summary>
/// PopulateService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class PopulateService : System.Web.Services.WebService {

public PopulateService () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld(string Context) {
        string returnValue = "";
        switch (Context)
        {
            case "dd":
                returnValue="你选择了ss";
                break;
            case "dddd":
                returnValue="你选择了s";
                break;
            default:
                returnValue = "你什么也没有选";
                break;
        }
        return returnValue;
    }
}

2.UI界面
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript">
    function updatekey(value)
    {
       var behavior=$find('dpe1');
       if(behavior)
       {
          behavior.populate(value);
       }
    }
    Sys.Application.add_load(function(){updatekey('qq);});

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="Panel1" runat="server" Height="247px" Width="521px">
                </asp:Panel>
                <cc1:dynamicpopulateextender id="DynamicPopulateExtender1" runat="server" servicemethod="HelloWorld"
                    targetcontrolid="Panel1" ServicePath="PopulateService.asmx" BehaviorID="dpe1" ClearContentsDuringUpdate="true"></cc1:dynamicpopulateextender>
            </ContentTemplate>
        </asp:UpdatePanel>
        <input type="button" value="a" ID="Button3" OnClick="updatekey(this.value)" />
        <input type="button" value="b" ID="Button2" OnClick="updatekey(this.value)" />
        <input type="button" value="不选" ID="Button1" OnClick="updatekey(this.value)" />
    </form>
</body>

实例解析二、GridView中的详细信息显示
1.前台UI
<head runat="server">
    <title>DynamicPopulate Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .gridRow
        {
            padding: 5px;
        }
        .updating
        {
            background-image: url('progress.gif');
            background-repeat: no-repeat;
            padding: 2px;
            height: 2em;
            margin: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>
        <h3>新闻管理</h3>
        <asp:GridView ID="newsList" runat="server" AutoGenerateColumns="False" DataSourceID="newsDataSource"
            Width="100%" ShowHeader="false">
            <Columns>
                <asp:TemplateField ItemStyle-CssClass="gridRow">
                    <ItemTemplate>
                        <asp:HyperLink ID="hlMore" Text="more..." NavigateUrl="#" runat="server"></asp:HyperLink>
                        <asp:Label ID="lbTitle" runat="server" Text='<%# Bind("Title") %>' Font-Bold="true"></asp:Label>
                        <asp:Panel ID="newsDetails" runat="server">
                        </asp:Panel>
                        <ajaxToolkit:DynamicPopulateExtender ID="dp" ContextKey='<% #Eval("Id") %>' PopulateTriggerControlID="hlMore" ServiceMethod="GetNewsDetailsHTMLString" ServicePath="NewsService.asmx" TargetControlID="newsDetails" UpdatingCssClass="updating" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="newsDataSource" runat="server" SelectMethod="GetNewsList" TypeName="NewsData">/asp:ObjectDataSource>
    </form>
</body>

2.WEB服务NewsService.asmx
<%@ WebService Language="C#" Class="NewsService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace = "http://www.dflying.net/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class NewsService : System.Web.Services.WebService
{

    [WebMethod]
    public string GetNewsDetailsHTMLString(string contextKey)
    {
        // 让线程休眠秒，模拟网络延时
        System.Threading.Thread.Sleep(2000);

        // 尝试将contextKey转换为int
        int newsId;
        if (!int.TryParse(contextKey, out newsId))
        {
            return string.Empty;
        }

        // 调用NewsData的GetNewsDetail静态方法取得该条新闻的详细信息
        NewsEntry news = NewsData.GetNewsDetail(newsId);

        // 生成表示该条新闻的HTML
        System.Text.StringBuilder newsHTMLBuilder = new System.Text.StringBuilder();
        newsHTMLBuilder.AppendFormat("<div style='text-align: center;'>posted by {0} at {1}, {2} views</div>", news.Author, news.PostDate.ToShortDateString(), news.Views);
        newsHTMLBuilder.AppendFormat("<div>{0}</div>", news.Content);

return newsHTMLBuilder.ToString();
}

}