利用Asp.net中的AJAX制作网页上自动选取开始日期及结束日期的用户自定义控件...-白红宇

前段时间用过一个酒店入住预约网站，当你点击"入住时间"时会悬浮出一对并列的日历，然后点击左边的日历就能选择入住时间，点击右侧的日历就能自动得到离店时间，当时没有太留意是怎么实现的，现在在做项目时，需要这样的日期选择功能，又到了那个网站查看了源代码，发现好像是用js和div做出来的，在网上找了很多博客，希望得到这样的代码，但是都不尽如人意，由于我一点都不会js，这个模块又很重要，所以干脆自己做一个用户自定义控件吧，功能是实现了，但是美感和代码质量是一定比不上在客户端做了，如果有路过的朋友知道用js和div做我如下的效果，请一定给小女我留言，给我指点下迷津。

第一步：制作自定义用户控件datecontrol.ascx，为了实现部分页面刷新，使用了vs2008中的Ajax控件组，在页面拖放scriptmanagerproxy及updatepanel控件，在updatepanel中放入一个label1、一个textbox1、一个button1，给button的text之中加入一个向下的箭头（可以从word文档中粘贴一个特殊符号

▼，当然如果你有合适的ico也可以拖放一个imagebutton，修饰的更漂亮一些），然后在这三个并排的控件后加一个<br>，另起一行加入一个标准的calendar1（web）控件，

实现效果是当点击button1时，才出现calendar1，textbox1的值就是选择的日期，label1提供了一个只写属性，给这个日历控件定义使用说明，如label1.value=“入店时间"或"开始时间"等。我们来看一下客户端源代码:

1<%@ Control Language=

"C#" AutoEventWireup=

"true" CodeFile=

"datecontrol.ascx.cs" Inherits=

"datecontrol"%>

2 <asp:ScriptManagerProxy ID=

"ScriptManagerProxy1" runat=

"server">

3</asp:ScriptManagerProxy>

4 <asp:UpdatePanel ID=

"UpdatePanel1" runat=

"server">

5 <ContentTemplate>

6 <asp:Label ID=

"Label1" runat=

"server"></asp:Label>

7 <asp:TextBox ID=

"TextBox1" runat=

"server" ValidationGroup=

"a"></asp:TextBox>

8 <asp:Button ID=

"Button1" runat=

"server" Font-Size=

"XX-Small"

9 ForeColor=

"#006600" Height=

"22px" οnclick=

"Button1_Click" Text=

"▼"

10 Width=

"19px" /><br>

11 <asp:Calendar ID=

"Calendar1" runat=

"server" BackColor=

"White"

12 BorderColor=

"#3366CC" BorderWidth=

"1px" CellPadding=

"1"

13 DayNameFormat=

"Shortest" Font-Names=

"Verdana" Font-Size=

"8pt"

14 ForeColor=

"#003399" Height=

"82px"

15 onselectionchanged=

"Calendar1_SelectionChanged" Width=

"297px"

16 Visible=

"False">

17 <SelectedDayStyle BackColor=

"#009999" Font-Bold=

"True" ForeColor=

"#CCFF99" />

18 <SelectorStyle BackColor=

"#99CCCC" ForeColor=

"#336666" />

19 <WeekendDayStyle BackColor=

"#CCCCFF" />

20 <TodayDayStyle BackColor=

"#99CCCC" ForeColor=

"White" />

21 <OtherMonthDayStyle ForeColor=

"#999999" />

22 <NextPrevStyle Font-Size=

"8pt" ForeColor=

"#CCCCFF" />

23 <DayHeaderStyle BackColor=

"#99CCCC" ForeColor=

"#336666" Height=

"1px"/>

24 <TitleStyle BackColor=

"#003399" BorderColor=

"#3366CC" BorderWidth=

"1px"

25 Font-Bold=

"True" Font-Size=

"10pt" ForeColor=

"#CCCCFF" Height=

"25px" />

26 </asp:Calendar>

27 </ContentTemplate>

28 </asp:UpdatePanel>

设计页面的效果图如下：

第二步：实现自定义控件服务器端代码：

1using System.Linq;

2using System.Web;

3using System.Web.Security;

4using System.Web.UI;

5using System.Web.UI.HtmlControls;

6using System.Web.UI.WebControls;

7using System.Web.UI.WebControls.WebParts;

8using System.Xml.Linq;

10public partial

class datecontrol : System.Web.UI.UserControl

11{

protected

void Page_Load(

object sender, EventArgs e)

13 {

14 }

//在拖放日历控件是，先把它的visible=“false”；点击button是日历控件显示出来。

protected

void Button1_Click(

object sender, EventArgs e)

17 {

this.Calendar1.Visible =

true;

19 }

//在日历控件的选中事件中写textbox1获取选中的日期的方法，并且选择后，日历再隐藏。

protected

void Calendar1_SelectionChanged(

object sender, EventArgs e)

22 {

this.TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();

this.Calendar1.Visible =

false;

25 }

//提供一个只读属性，可以得到textbox1的内容text

public

string DateStr

28 {

29 get

30 {

return TextBox1.Text;

32 }

33 }

//提供一个只写属性，可以按照你的用法自己填写它的内容。

public

string LableText

36 {

37 set { Label1.Text = value; }

38 }

39}

这样一个自定义的日历控件就写完了。

第三步：具体使用。现在我们来看一下具体怎么用这个自定义控件，下面是我现在做的一个项目，有个页面hisotrytime.aspx中用到时间段查询，我就使用了在这个页面中使用了两个自定义的日历控件，拖放到页面上的<tr>中，他们分别是date1、date2.在使用这个控件时，因为用到了Ajax，就必须加入一个scriptmanager，具体为什么加，小女因为没学过Ajax，只是在报错时vs提示必须加我就加上了，结果好用

。现在还没有时间好好研究为什么，将来一定苦心专研技术，希望路过的朋友们提出自己的见解，

我好吸取你的精华，加入到我的hisotrytime.aspx页面的效果图是这样的。

设置自定义控件中lableText的只写属性（我们自己封装好的只写属性第二步中的第35行），添加内容“开始时间：”，date2中lableText=“结束时间”；

在页面hisotrytime.aspx中添加一个imagebutton1，图片显示为“开始搜索”，也将是选择完开始时间和结束时间后，点击搜索，我的GridView7中，就填充好所有符合条件的数据，看一下我hisotrytime.aspx页面的客服端代码：

1using System;

2using System.Collections;

3using System.Configuration;

4using System.Data;

5using System.Linq;

6using System.Web;

7using System.Web.Security;

8using System.Web.UI;

9using System.Web.UI.HtmlControls;

10using System.Web.UI.WebControls;

11using System.Web.UI.WebControls.WebParts;

12using System.Xml.Linq;

14public partial

class Teacher_hisotrytime : System.Web.UI.Page

15{

string constr = ConfigurationManager.ConnectionStrings[

"constr"].ConnectionString;

17 DataOperate DO =

new DataOperate();

string marketid;

string year;

string sql;

protected

void Page_Load(

object sender, EventArgs e)

23 {

if (!

this.IsPostBack)

25 {

//这个页面下面（我没有截图的部分）是一个点击GridView7中的button列所产生的数据显示，我放到一个panel1中，页面第一次加载是不体现，当点击button传入主键后才会显示。

this.Panel1.Visible =

false;

27 }

//用一个隐藏控件保存主键，这样页面加载后不会丢失主键。

29 marketid = HiddenField1.Value;

30 }

protected

void ImageButton1_Click1(

object sender, ImageClickEventArgs e)

32 {

string begindate=

this.date1 .DateStr;

//利用自定义控件的只读属性得到textbox中的text日期值作为开始时间

string enddate =

this.date2.DateStr;

//利用自定义控件的只读属性得到textbox中的text日期值作为结束时间

//当用户没有选取日期时，为避免报错，就直接获取当前时间

if (begindate == "")

37 {

38 begindate = DateTime.Now.ToShortDateString();

39 }

if (enddate == "")

41 {

42 enddate = DateTime.Now.ToShortDateString();

43 }

//在market表中查询符合我时间段的数据，利用数据源绑定控件SqlDataSource6，直接填充到GridView7中

45 sql =

"select * from market where marketdate between '" + begindate +

"' and '" + enddate +

"'";

//getdatatable（）方法是我写的一个数据处理方法，返回查询满足sql条件的datatable。

47 DataTable dt = DO.GetDataTable(sql);

48 Label1.Text =

"共有" + dt.Rows.Count +

"个市场";

49 SqlDataSource6.ConnectionString = constr;

50 SqlDataSource6.SelectCommand = sql;

51 GridView7.DataSourceID = SqlDataSource6.ID;

52 }

//下面是对GridView7做操作，目的是点击GridView7中的button列得到主键，我现在正在筹划一个GridView系列专题，会具体讲解下面的代码。

protected

void GridView7_RowCommand(

object sender, GridViewCommandEventArgs e)

55 {

if (e.CommandName ==

"cksj")

//当鼠标点击的所有命令名中是“cksj”的事件命令时发生如下：

57 {

58 marketid = e.CommandArgument.ToString();

59 HiddenField1.Value = marketid;

this.Panel1.Visible =

true;

61 gv6fill();

62 yearlist();

63 }

64 }

第四步：写客户端的js脚本，提示开始时间不能大于结束时间，因为本人基本上不会js，所以从网上找到了一个获得当前时间的一个js的代码，在这里谢谢这位仁兄，下面我们来看一下客户端源代码。

asp:Content

="Content1"

ContentPlaceHolderID

="head"

Runat

="Server"

style

type

="text/css"

3 .style1

4 {

5 width: 100%;

6 }

7 .style4

8 {

9 width: 660px;

10 }

12 .style6

13 {

14 height: 15px;

15 }

</style>

</asp:Content>

asp:Content

="Content2"

ContentPlaceHolderID

="ContentPlaceHolder1"

Runat

="Server"

script

language

="javascript"

20function getDate()

21{

22 var d,s,t;

23 d=new Date();

24 s=d.getFullYear().toString(10)+"-";

25 t=d.getMonth()+1;

26 s+=(t>9?"":"0")+t+"-";

27 t=d.getDate();

28 s+=(t>9?"":"0")+t+" ";

29// t=d.getHours();

30// s+=(t>9?"":"0")+t+":";

31// t=d.getMinutes();

32// s+=(t>9?"":"0")+t+":";

33// t=d.getSeconds();

34// s+=(t>9?"":"0")+t;

35 return s;

36}

37function bj()

38{

39if(document .getElementById ("ctl00$ContentPlaceHolder1$date1$TextBox1").value=="")

40{

41var begin=getDate ();

42}

43else

44{

45var begin=document.getElementById ("ctl00$ContentPlaceHolder1$date1$TextBox1").value;

46}

47if(document .getElementById ("ctl00$ContentPlaceHolder1$date2$TextBox1").value=="")

48{

49var end=getDate ();

50}

51else

52{

53var end= document.getElementById ("ctl00$ContentPlaceHolder1$date2$TextBox1").value;

54}

55if(begin>end)

56{

57alert ("开始时间大于结束时间！");

58return false ;

59}

60else

61{

62return true ;

63}

65}

</script>

table

class

="style1"

style

="font-weight: bold; font-size: x-large; color: #800000"

colspan

="2"

asp:ScriptManager

="ScriptManager1"

runat

="server"

</asp:ScriptManager>

73 按创建时间查找市场

74 <asp:ImageButton ID="ImageButton1" runat="server" Height="26px"

75 ImageUrl="~/ICO/kaishi.gif" OnClientClick="return bj();" Width="79px" />

</td>

</tr>

79 <td style="font-weight: bold; font-size:large; color: #800000" align="left"

80 valign="top">

uc1:date

="date1"

runat

="server"

LableText

="开始时间："

</td>

83 <td style="font-weight: bold; font-size:large; color: #800000" align="left"

84 valign="top">

uc1:date

="date2"

runat

="server"

LableText

="结束时间："

</td>

</tr>

89 <td style="font-weight: bold; font-size:large; color: #800000" align="left"

90 colspan="2">

asp:Label

="Label1"

runat

="server"

</asp:Label>

asp:SqlDataSource

="SqlDataSource6"

runat

="server"

</asp:SqlDataSource>

</td>

</tr>

class

="style4"

align

="left"

colspan

="2"

97 <asp:GridView ID="GridView7" runat="server" AutoGenerateColumns="False"

98 BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"

99 CellPadding="3" ForeColor="Black" GridLines="Vertical" Width="107%"

100 onrowcommand="GridView7_RowCommand" DataKeyNames="id" >

101

FooterStyle

BackColor

="#CCCCCC"

102

Columns

103

asp:BoundField

DataField

="marketname"

HeaderText

="市场名称"

104

asp:BoundField

DataField

="marketpass"

HeaderText

="市场密码"

105

asp:BoundField

DataField

="marketyear"

HeaderText

="市场年份"

106

asp:BoundField

DataField

="groupnum"

HeaderText

="市场组数"

107

asp:BoundField

DataField

="csxj"

HeaderText

="初始现金"

108

asp:BoundField

DataField

="marketdate"

HeaderText

="市场创建时间"

109

asp:BoundField

DataField

="marketbz"

HeaderText

="市场描述"

110

asp:BoundField

DataField

="marketover"

HeaderText

="市场完成情况"

111

asp:TemplateField

HeaderText

="查看市场详情"

112

ItemTemplate

113

asp:LinkButton

="LinkButton1"

runat

="server" CommandArgument='<%#Eval("id") %

114 CommandName="cksj">查看本市场企业数据

</asp:LinkButton>

115

</ItemTemplate>

116

</asp:TemplateField>

117

</Columns>

118

PagerStyle

BackColor

="#999999"

ForeColor

="Black"

HorizontalAlign

="Center"

119

SelectedRowStyle

BackColor

="#000099"

Font-Bold

="True"

ForeColor

="White"

120

HeaderStyle

BackColor

="Black"

Font-Bold

="True"

ForeColor

="White"

121

AlternatingRowStyle

BackColor

="#CCCCCC"

122

EmptyDataTemplate

>温馨提示：当前没有任何记录

</EmptyDataTemplate>

123

</asp:GridView>

124

</td>

125

</tr>

第20行的getdate（）方法是获取当前时间，第37行bj（）方法是比较开始时间不能大于结束时间，否则弹出对话款提示错误，在这里要说一下，39和47中的一串看似很奇怪的代码就是执行我的hisotry.aspx页面后，ie把我的自定义控件date1、date2中的textbox翻译成我们看到的源代码，找到这个源代码后，才能在客户端的脚本中判断它的.value了。

以上就是我总结的获取时间的日历控件的步骤，希望大家能用得上。

本文转自叶子文文博客51CTO博客，原文链接http://blog.51cto.com/leafwf/185702如需转载请自行联系原作者

叶子文文