扩展CalendarExtender的应用场合(改进版)
在上周的扩展CalendarExtender的应用场合一文中提出了扩展的目的,GaryW提出“把ClientID当成一个变量传入JavaScript函数”的思路来简化扩展的解决方案,但又会遇到两个问题:
问题1:OnClientDateSelectionChanged属性只能设置不带参数的JavaScript函数名。
问题2:按目前的方案,页面上有多个用户控件的时候,相同格式的JavaScript函数的确会生成多次,显得很繁琐,但按新提出的方案,势必会造成这些JavaScript函数重名。
为此,今天对AdvancedCalendarExtender做了些改进,生成的JavaScript更简洁,但需要自己手工在每次调用用户控件的页面中拷贝JavaScript函数。鱼和熊掌真是很难兼得,看是想要用得方便(灵活性),还是客户端代码更简洁(性能)。下面给出完整代码:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AdvancedCalendarExtender.ascx.cs" Inherits="AdvancedCalendarExtender" %>
<asp:TextBox ID="txtYear" runat="server" Width="35px" MaxLength="4"></asp:TextBox> /
<asp:TextBox ID="txtMonth" runat="server" Width="20px" MaxLength="2"></asp:TextBox> /
<asp:TextBox ID="txtDay" runat="server" Width="20px" MaxLength="2"></asp:TextBox>
<asp:ImageButton ID="btnSelector" runat="server" ImageUrl="~/images/icon_calendar.gif" />
<ajax:CalendarExtender ID="calExt" runat="server" Format="yyyy/MM/dd" PopupButtonID="btnSelector" TargetControlID="txtYear"></ajax:CalendarExtender>
<asp:TextBox ID="txtYear" runat="server" Width="35px" MaxLength="4"></asp:TextBox> /
<asp:TextBox ID="txtMonth" runat="server" Width="20px" MaxLength="2"></asp:TextBox> /
<asp:TextBox ID="txtDay" runat="server" Width="20px" MaxLength="2"></asp:TextBox>
<asp:ImageButton ID="btnSelector" runat="server" ImageUrl="~/images/icon_calendar.gif" />
<ajax:CalendarExtender ID="calExt" runat="server" Format="yyyy/MM/dd" PopupButtonID="btnSelector" TargetControlID="txtYear"></ajax:CalendarExtender>
AdvancedCalendarExtender.ascx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class AdvancedCalendarExtender : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), ClientID, @"function " + ClientID + "() { select('" + ClientID + "'); } ", true);
calExt.OnClientDateSelectionChanged = ClientID;
}
public string Year
{
get { return txtYear.Text; }
set { txtYear.Text = value; }
}
public string Month
{
get { return txtMonth.Text; }
set { txtMonth.Text = value; }
}
public string Day
{
get { return txtDay.Text; }
set { txtDay.Text = value; }
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class AdvancedCalendarExtender : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), ClientID, @"function " + ClientID + "() { select('" + ClientID + "'); } ", true);
calExt.OnClientDateSelectionChanged = ClientID;
}
public string Year
{
get { return txtYear.Text; }
set { txtYear.Text = value; }
}
public string Month
{
get { return txtMonth.Text; }
set { txtMonth.Text = value; }
}
public string Day
{
get { return txtDay.Text; }
set { txtDay.Text = value; }
}
}
AdvancedCalendarExtender.ascx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="AdvancedCalendarExtender.ascx" tagname="AdvancedCalendarExtender" tagprefix="mine" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Advanced CalendarExtender</title>
<script language="javascript" type="text/javascript">
function select(clientId) {
var date = $get(clientId + "_txtYear").value;
date = date.split("/");
$get(clientId + "_txtYear").value = date[0];
$get(clientId + "_txtMonth").value = date[1];
$get(clientId + "_txtDay").value = date[2];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>From: <mine:AdvancedCalendarExtender ID="aceFromDate" runat="server" /></p>
<p>To: <mine:AdvancedCalendarExtender ID="aceToDate" runat="server" /></p>
<p><asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" /></p>
<p><asp:Label ID="lblResult" runat="server"></asp:Label></p>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<%@ Register src="AdvancedCalendarExtender.ascx" tagname="AdvancedCalendarExtender" tagprefix="mine" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Advanced CalendarExtender</title>
<script language="javascript" type="text/javascript">
function select(clientId) {
var date = $get(clientId + "_txtYear").value;
date = date.split("/");
$get(clientId + "_txtYear").value = date[0];
$get(clientId + "_txtMonth").value = date[1];
$get(clientId + "_txtDay").value = date[2];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>From: <mine:AdvancedCalendarExtender ID="aceFromDate" runat="server" /></p>
<p>To: <mine:AdvancedCalendarExtender ID="aceToDate" runat="server" /></p>
<p><asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" /></p>
<p><asp:Label ID="lblResult" runat="server"></asp:Label></p>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Default.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default: System.Web.UI.Page
{
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Text = string.Format("Your selection is from {0}-{1}-{2} to {3}-{4}-{5}.", aceFromDate.Year, aceFromDate.Month, aceFromDate.Day, aceToDate.Year, aceToDate.Month, aceToDate.Day);
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default: System.Web.UI.Page
{
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Text = string.Format("Your selection is from {0}-{1}-{2} to {3}-{4}-{5}.", aceFromDate.Year, aceFromDate.Month, aceFromDate.Day, aceToDate.Year, aceToDate.Month, aceToDate.Day);
}
}
Default.aspx.cs
Enjoy!