问题的提出:
在开发系统的过程中,曾遇到过为职工排休的情况,当时想的就是应该用日历控件,直观方便。但是ASP.NET中的日历控件默认是单选的,每次点击一个日期就会引发postback,每次postback后控件的SelectedDates属性就会被刷新,而该控件又没有可以设为false的autopostback属性,那么要想实现日期的多选,就只能靠自己来写了。经过考虑之后,认为实现这个功能,关键在于将每次选择的日期集合保存起来,在页面postback后重新生成时根据这个集合中的元素绘制日历中的单元格的样式。
实现的思路就是将所选的日期用一个集合保存,并保留在Session中。每次点击一个日期时,都检验集合中是否已经有该日了,如果有,则删除,如果没有则添加。这样就能实现用鼠标点击选择、已经选择的点击后取消的效果。
具体实现:
新建一个WEB用户控件,命名为MultiSelectCalendar,在设计视图中拖入一个普通的日历控件,命名为MultiCalendar,为了美观,在“自动套用格式”中选择专业2型。下面是源代码。
Public Class MultiSelectCalendar
Inherits System.Web.UI.UserControl
#Region " Web 窗体设计器生成的代码 "
‘省略
#End Region
Private colDt As SelectedDatesCollection
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此处放置初始化页的用户代码
If Not IsPostBack Then
colDt = MultiCalendar.SelectedDates
Session("date") = colDt
Else
colDt = Session("date")
End If
End Sub
Private Sub MultiCalendar_DayRender(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles MultiCalendar.DayRender
Dim ctlCell As TableCell
Dim dt As Date
If e.Day.IsOtherMonth Then
e.Cell.Controls.Clear()
End If
If colDt.Contains(e.Day.Date) Then
e.Cell.BackColor = Color.FromArgb(51, 51, 153)
e.Cell.ForeColor = Color.White
Else
e.Cell.BackColor = Color.LightGray
e.Cell.ForeColor = Color.Black
End If
End Sub
Private Sub MultiCalendar_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MultiCalendar.PreRender
If IsPostBack Then
If Not colDt.Contains(MultiCalendar.SelectedDate) Then
colDt.Add(MultiCalendar.SelectedDate)
Else
colDt.Remove(MultiCalendar.SelectedDate)
End If
Session("date") = colDt
End If
End Sub
End Class
其中变量colDt用来保存所选日期的集合。可以看到,实现比较简单,完全是在控件自有的事件、方法中实现的,而无需自己编写额外的函数。如果在三个函数中设置断点,可以看到三个函数的执行顺序是Page_Load、MultiCalendar_PreRender、MultiCalendar_DayRender,搞清楚逻辑顺序是非常重要的。
最后我们可以在.ascx上添加一个列表框来测试一下,将MultiCalendar_PreRender修改成下面的样子,就可以在列表框中列出被选日期集合中的所有日期。
Private Sub MultiCalendar_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MultiCalendar.PreRender
If IsPostBack Then
If Not colDt.Contains(MultiCalendar.SelectedDate) Then
colDt.Add(MultiCalendar.SelectedDate)
Else
colDt.Remove(MultiCalendar.SelectedDate)
End If
Session("date") = colDt
End If
Dim dt As Date
ListBox1.Items.Clear()
For Each dt In colDt
ListBox1.Items.Add(dt.ToString)
Next
End Sub
注意到在这个函数中,代码是括在了If IsPostBack中间的,因为我在用列表框做测试时,发现第一次打开页面的时候,会在集合里面添加 0001年 1月 1日零点 这个日期,不知道为什么,难道是日历控件默认的被选日期?
总结:
多选日历控件的基本功能抽取成了一个WEB用户控件,提高了代码的可重用性,但还有可以改进的地方。如应该考虑将日期集合暴露成一个只读属性,还可以考虑将外观相关的一些设置暴露为属性,在用户控件中如何实现还在学习中。最后完善成能够直接引用进工具箱的控件最好。