Ajax 控件之DynamicPopulate
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一加载时调用一个脚本
<script type ="text/javascript">
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事件
<input id="Normal" type="radio" checked="CHECKED" name="DateGroup" value="N" onclick ="updateDateKey(this.value)"/>普通型<br />
<input id="ShortDate" type="radio" name="DateGroup" value="S" onclick ="updateDateKey(this.value)"/>短日期<br />
<input id="LongDate" name="DateGroup" type="radio" value="L" onclick ="updateDateKey(this.value)" />长日期<br />
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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>AJAX控件之DynamicPopulate</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body style="text-align: center"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <script type="text/javascript"> function updateDateKey(value) { var behavior=$find('dpe'); if(behavior) { behavior.populate(value); } } Sys.Application.add_load(function() {updateDateKey('N');}); </script> <div style="text-align: center"> <input id="Normal" checked="checked" name="DateGroup" type="radio" value="N" onclick="updateDateKey(this.value)" />普通型<br /> <input id="ShortDate" name="DateGroup" type="radio" value="S" onclick="updateDateKey(this.value)" />短日期<br /> <input id="LongDate" name="DateGroup" type="radio" value="L" onclick="updateDateKey(this.value)" />长日期<br /> <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
|