【翻译】在ASP.NET中实现弹出日历

原文出处：http://www.codeproject.com/aspnet/popupcalendarcontrol.asp

在ASP.NET中实现弹出日历
作者： Isaias Formacio-Serna

可以找到很多Calendar控件的实现，但是我在使用它们的时候发现了一些问题，其原因在于这些控件的Javascript跟ASP.NET不能协同工作。我的这个控件可以让你在页面上放置一个能够弹出但不会传回的日历，你可以尽可能多地在同样一个表单中使用它。





介绍

在网上有很多这种控件的实现。我的这个控件是基于Paul Kilmer的工作，但是我在它不能工作的地方作了一些修改。大多数修改是把HMTL控件换成了ASP.NET控件，因为这样可以让我更好的控制控件的后台编码，你将在代码中看到这种情况。

创建控件

首先，你需要创建一个新的控件，在这个例子里，我把它叫做 ctlCalendar 。在这个控件中，你需要添加一个Web窗体工具箱中的 TextBox (TextBox1)控件，添加一个HTML工具箱中的 Button (Button1)控件 ，然后添加一个Web窗体工具箱中的 Panel (pnlCaledar)控件 ，最后在这个Panel 中，添加一个Web窗体工具箱中的 Calendar (Calendar1) 控件。请注意，我是使用HTML工具箱的Button1 控件，因为在用户点击它时我不需要它向服务器传值。

你的控件页面看起来会是这样：



下面是ctlCalendar.ascx的代码：

<asp:textbox id="TextBox1" runat="server"></asp:textbox>

<input type="button" id="Button1" runat="server" value="..."><br>

<asp:Panel id="pnlCalendar" runat="server"

style="POSITION: absolute">

<asp:calendar id="Calendar1" runat="server" CellPadding="4"

BorderColor="#999999" Font-Names="Verdana" Font-Size="8pt"

Height="180px" ForeColor="Black" DayNameFormat="FirstLetter"

Width="200px" BackColor="White">

<TodayDayStyle ForeColor="Black" BackColor="#CCCCCC"></TodayDayStyle>

<SelectorStyle BackColor="#CCCCCC"></SelectorStyle>

<NextPrevStyle VerticalAlign="Bottom"></NextPrevStyle>

<DayHeaderStyle Font-Size="7pt" Font-Bold="True" BackColor="#CCCCCC">

</DayHeaderStyle>

<SelectedDayStyle Font-Bold="True" ForeColor="White" BackColor="#666666">

</SelectedDayStyle>

<TitleStyle Font-Bold="True" BorderColor="Black" BackColor="#999999">

</TitleStyle>

<WeekendDayStyle BackColor="LightSteelBlue"></WeekendDayStyle>

<OtherMonthDayStyle ForeColor="#808080"></OtherMonthDayStyle>

</asp:calendar>

</asp:Panel>

实现功能

现在，我们将使用两个函数来实现它的功能。第一个是 Page_Load ，用它来初始化我们的控件；第二个是 Calendar1_SelectionChanged。

private void Page_Load(object sender, System.EventArgs e)

{

if (!Page.IsPostBack)

{

this.TextBox1.Text = System.DateTime.Now.ToShortDateString();

this.pnlCalendar.Attributes.Add("style",

"DISPLAY: none; POSITION: absolute");

}

else

{

string id = Page.Request.Form["__EVENTTARGET"].Substring(0,

Page.Request.Form["__EVENTTARGET"].IndexOf(":"));

if (id != this.ID)

{

this.pnlCalendar.Attributes.Add("style",

"DISPLAY: none; POSITION: absolute");

}

else

{

this.pnlCalendar.Attributes.Add("style","POSITION: absolute");

}

}

Page.RegisterClientScriptBlock("Script_Panel" + this.ID,

"<script> function On"+this.ID+"Click() { if(" +

this.ID + "_pnlCalendar.style.display == /"none/") "

+ this.ID + "_pnlCalendar.style.display = /"/"; else "

+ this.ID+"_pnlCalendar.style.display = /"none/"; } </script>");

this.Button1.Attributes.Add("OnClick","On"+this.ID+"Click()");}

在这个 Page_Load 函数中，我做的第一件事把当前日期传给 TextBox 的 Text 属性，这只不过是为了让它不留空。接下来的是我写这篇文章时所学到的一个小技巧，当你在日历中改变月份，它将传回页面。假如我们有多个日历，我们需要知道到底是哪一个控件传回，这样我们就不必隐藏特定的日历。我们将访问隐藏的 __EVENTTARGET 字段，它将告诉我们哪个日历是起作用的。

string id = Page.Request.Form["__EVENTTARGET"].Substring(0,

Page.Request.Form["__EVENTTARGET"].IndexOf(":"));

然后如果它不是我正在工作的哪个日历，我将隐藏它，否则把它留在绝对位置上。

if (id != this.ID)

{

this.TextBox1.Text = System.DateTime.Now.ToShortDateString();

this.pnlCalendar.Attributes.Add("style",

"DISPLAY: none; POSITION: absolute");

}

else

{

this.pnlCalendar.Attributes.Add("style","POSITION: absolute");

}

在下面，我注册了一个客户端脚本，这是一个真实的JavaScript，在按钮被点击时它将显示日历。代码有点复杂，所以我要详细地说明它。

当你往同一个表单添加多个控件，每一个控件会有一个它自己的名字（后面跟着一个数字），对于第一个控件，它将是ctlCalendar1。知道了这一点，我使用this.ID 属性为每个已经创建了的控件写了一个JavaScript函数：

Page.RegisterClientScriptBlock("Script_" + this.ID,

"<script> function On"+this.ID+"Click() { if("+this.ID+

"_pnlCalendar.style.display == /"none/") "+this.ID+

"_pnlCalendar.style.display = /"/"; else "+this.ID+

"_pnlCalendar.style.display = /"none/"; } </script>");

并把这个函数添加到 Button 本身。

this.Button1.Attributes.Add("OnClick","On"+this.ID+"Click()");

同样，为了访问到 Panel 真实属性，你需要知道你的 Panel 的名字。这个名字是它所包含的控件的名字和它本身名字的复合（比如ctlCalendar1_Panel1）

让我们看看为第一个日历而生成的JavaScript代码：

<Script>

function OnCtlCalendar1Click()

{

if(CtlCalendar1_pnlCalendar.style.display == "none")

CtlCalendar1_pnlCalendar.style.display = "";

else

CtlCalendar1_pnlCalendar.style.display = "none";

}

</script>

这里，我们看到这个函数有自己的名字(OnCtlCalendar1Click()) 并且我们也产生了Panel 的最终名字 CtlCalendar1_pnlCalendar ，我们用 display 属性使它不可见。接下来你添加的控件将使用相邻数，它们的函数也是如此。只要你需要，你可以使用尽可能多的控件。