| |
Atlas快速入门之实战Atlas |
|
时间: 2006-09-21 来自：天极yesky |
 |
|
接下来，我们看下如何在这个日历控件中使用ajax技术。在.net 的日历控件中，人们经常抱怨的是，每次选定日历上的一个日期，都会引发一次postback页面回传，需要用户等待，十分不方便。下面，我们通过Atals控件，来对日历控件进行改造。
在default.aspx页中，切换到代码视图，在之前的＜atlas:ScriptManager＞控件中，加入EnablePartialRendering属性，以使得atlas可以对页面进行局部更新，如下所示
＜atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" /＞ |
再增加一个＜UpdatePanel＞控件，UpdatePanel是Atlas中一个很重要的控件，功能强大容易使用，可以只做很小的改动就可以向已有的ASP.NET站点添加Ajax功能,我们再将日历控件拖拉放到updatepanel控件中去，其中要注意到，日历控件是放到＜ContentTemplate＞的标签内的，该标签内放的就是受UpdatePanel控制的控件，如下代码所示：
＜atlas:UpdatePanel ID="id1" runat="server"＞
＜ContentTemplate＞
＜asp:Calendar ID="Calendar1" runat="server"
BackColor="#FFFFCC" ... /＞
＜/asp:Calendar＞
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞ |
为了更好地看到效果，我们增加两个下拉选择框，可以让用户选择年份和月份，代码如下所示
＜form id="form1" runat="server"＞
＜atlas:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" /＞
＜asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True"＞
＜asp:ListItem Value="1"＞Jan＜/asp:ListItem＞
＜asp:ListItem Value="2"＞Feb＜/asp:ListItem＞
＜asp:ListItem Value="3"＞Mar＜/asp:ListItem＞
＜asp:ListItem Value="4"＞Apr＜/asp:ListItem＞
＜asp:ListItem Value="5"＞May＜/asp:ListItem＞
＜asp:ListItem Value="6"＞Jun＜/asp:ListItem＞
＜asp:ListItem Value="7"＞Jul＜/asp:ListItem＞
＜asp:ListItem Value="8"＞Aug＜/asp:ListItem＞
＜asp:ListItem Value="9"＞Sep＜/asp:ListItem＞
＜asp:ListItem Value="10"＞Oct＜/asp:ListItem＞
＜asp:ListItem Value="11"＞Nov＜/asp:ListItem＞
＜asp:ListItem Value="12"＞Dec＜/asp:ListItem＞
＜/asp:DropDownList＞
Year
＜asp:DropDownList ID="DropDownList2" runat="server"
AutoPostBack="True"＞
＜asp:ListItem＞2005＜/asp:ListItem＞
＜asp:ListItem＞2006＜/asp:ListItem＞
＜asp:ListItem＞2007＜/asp:ListItem＞
＜/asp:DropDownList＞＜br /＞ |
然后在code-behind的代码中，写入如下代码：
Protected Sub DropDownList1_SelectedIndexChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles DropDownList1.SelectedIndexChanged
With Calendar1
.VisibleDate = New Date( _
DropDownList2.SelectedValue, _
DropDownList1.SelectedValue, 1)
End With
End Sub
Protected Sub DropDownList2_SelectedIndexChanged( _
ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles DropDownList2.SelectedIndexChanged
With Calendar1
.VisibleDate = New Date( _
DropDownList2.SelectedValue, _
DropDownList1.SelectedValue, 1)
End With
End Sub |
在上面的代码中，分别为月份和年份的下拉选择框的selectedindexchanged事件写入了代码，主要是控制当用户选择了月份和年份时，日历控件中显示相应的日期。但当我们F5运行时，会发觉页面依然会引起postback刷新的。因此，我们要定义触发器triggers。
所谓的触发器，指定了发生动作的事件源，UpdatePanel提供两种引发异步PostBack的Trigger ，分别是ControlEventTrigger和ControlEventTrigger。其中ControlEventTrigge是指当某个控件的某个指定的属性变化时更新，而ControlEventTrigger是指当指定的事件发生时进行更新。则我们修改代码如下：
＜atlas:UpdatePanel ID="id1" runat="server"＞
＜ContentTemplate＞
＜asp:Calendar ID="Calendar1" runat="server"
BackColor="#FFFFCC" ... /＞
＜/asp:Calendar＞
＜/ContentTemplate＞
＜Triggers＞
＜atlas:ControlValueTrigger ControlID="DropDownList1"
PropertyName="SelectedValue" /＞
＜atlas:ControlEventTrigger ControlID="DropDownList2"
EventName="SelectedIndexChanged" /＞
＜/Triggers＞
＜/atlas:UpdatePanel＞ |
这里，分别指定了月份下拉框的属性触发器和年份下拉框的事件触发器，使得无论当用户选择哪一个下拉框时，都会引发局部的刷新，而这些刷新全部都通过updatepanel控件来封装进行处理了。所以当运行程序时，页面不会象以前那样要进行一次postback和整体页面的刷新。
最后，我们再在日历控件下面，增加一个进度状态条控件UpdateProgress，用来向用户反映当前的进度，代码如下所示
＜atlas:UpdateProgress ID="pro" runat="server"＞
＜ProgressTemplate＞
＜asp:Label ID="Label1" runat="server" Text="Label"＞
Updating Calendar...
＜/asp:Label＞
＜/ProgressTemplate＞
＜/atlas:UpdateProgress＞ |
要注意的是，上面我们在进度状态控件的＜ProgressTemplate＞中，我们只是简单加入了一个标签控件，如果有实际需要的话，我们是可以加入图片的。
到此，我们的程序大功告成了，运行这个日历程序，选择月份和年份下拉框，会看到日历控件没有象以前那样引起整个页面的刷新，而是很快在日历控件中显示出相应的日期。
|
|
|
|
|
|
标签NewsAbout错误：Timeout expired. The timeout period elapsed prior to completion of the operation or the server is not responding.
|
|
|
|
|
|
