Microsoft AjaxToolkits 22. 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();
}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值