扩展CalendarExtender的应用场合（改进版）

最新推荐文章于 2023-09-13 11:10:57 发布

stanleycheung

最新推荐文章于 2023-09-13 11:10:57 发布

阅读量1.5k

点赞数

文章标签：扩展 javascript server date asp c#

本文链接：https://blog.csdn.net/stanleycheung/article/details/3901655

版权

在上周的扩展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 >

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; }
    }
}

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 >

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);
    }
}

Default.aspx.cs

Enjoy!