Ajax 控件之DynamicPopulate-CSDN博客

本文链接：https://blog.csdn.net/meng1986/article/details/1749926

Ajax 控件之DynamicPopulate

1. 加入三个Input(Radio),ID别为Normal,ShortDate,LongDate,设置Normal的Checked属性为check

2. 这三个的Radion的Name属性改为DateGroup,可以保证它们三个是一组,

3. 修改三个Input(Radio)的Value分别为:N,S,L;这里很关键为的是能够识别这三个id

4. 拖入一个Panel和DynamicPopulate,并用DynamicPopulate(dpe)绑定Panel

5.添加样式把DPENormal添加到Panel属性中的CssClass属性中,.DPEUpdating样式要手动添加到源代码中<cc1:DynamicPopulateExtender ID="dpe" runat="server" TargetControlID="Panel1" UpdatingCssClass="DPEUpdating">

</cc1:DynamicPopulateExtender>

.DPENormal//Panel样式

{

border:silver 1px inset;

padding :2px;

text-align :center;

height:2em;

margin :5px;

width :200px;

}

.DPEUpdating//DynamicPopulate样式

{

background-image:url(images/loading.gri);

background-repeat :no-repeat;

border :silver 1px inset;

padding :2px;

text-align :center;

height :2em;

margin:5px;

width:200px;

}

6一加载时调用一个脚本

function updateDateKey(value)//这里的value就是Radio里的N,L,S值

{

var behavior=$find('dpe');//实例化对象

if(behavior)

{

behavior.populate(value);//将value值传递给控件,再调用方法将调用的时期放到Panel里面去实现自动更新

}

Sys.Applicaiton.add_load(function() {updateDateKey('N');});//因为functin函数不会自动去执行,所以这里要进行加载调用

</script>

7为Radio添加onclick事件

8.DynamicPopulate与Panel结合

为Panel的dpe.(…)/添加ServiceMethod(GetGroupDate)

9.GetGroupDate在Default.aspx.cs中进行添加

在GetGroupDate中添加两签名

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static string GetGroupDate(string contextKey)

{

System.Threading.Thread.Sleep(1000);

string value;

if (contextKey == "N")

{

value = DateTime.UtcNow.ToString();

}

else if(contextKey == "S")

{

value = DateTime.Now.ToShortDateString();

}

else

{

value = DateTime.Now.ToLongDateString();

}

return value;

}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>AJAX控件之DynamicPopulate</title>

</head>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

function updateDateKey(value)

{

var behavior=$find('dpe');

if(behavior)

{

behavior.populate(value);

}

Sys.Application.add_load(function() {updateDateKey('N');});

</script>

<br />

<asp:Panel ID="Panel1" runat="server" CssClass="DPENormal" Height="45px" Width="271px">

</asp:Panel>

</div>

<cc1:DynamicPopulateExtender ID="dpe" runat="server" TargetControlID="Panel1" UpdatingCssClass="DPEUpdating" ServiceMethod="GetGroupDate">

</cc1:DynamicPopulateExtender>

</form>

</body>

</html>

StyleSheet.cs

.DPENormal

{

border:silver 1px inset;

padding:2px;

text-align:center;

height:2em;

margin:5px;

width:200px;

}

.DPEUpdating

{

background-image:url(images/loading.gif);

background-repeat:no-repeat;

border:silver 1px inset;

padding:2px;

text-align:center;

height:2em;

margin:5px;

width:200px;

}

Default.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static string GetGroupDate(string contextKey)

{

System.Threading.Thread.Sleep(1000);

string value;

if (contextKey == "N")

{

value = DateTime.UtcNow.ToString();

}

else if(contextKey == "S")

{

value = DateTime.Now.ToShortDateString();

}

else

{

value = DateTime.Now.ToLongDateString();

}

return value;

}