65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 AJAX（带 Atlas）在 ASP.NET 2.0 中实现日期选择器和时间选择器

rperetz
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.07/5 (13投票s)

2006年8月2日

CPOL

4分钟阅读

viewsIcon

207163

downloadIcon

2932

为您的网页添加日期选择器和时间选择器。

引言

在本文中，我将向您展示如何使用 AJAX（带 Atlas）几乎无需代码即可实现日期选择器和时间选择器。一个好的日期选择器可以极大地改善最终用户体验，并且您的日期也是有效的日期。这是最终产品的截图

选择日期

选择时间

结果

设置您的 Atlas/AJAX Web 项目

请访问我的第一篇文章，了解 Atlas 和如何设置 Atlas Web 项目：http://www.thecodeproject.com/useritems/Autocomplete.asp （阅读步骤 1 和步骤 2）。

认识 Atlas PopupControlExtender 控件

这是将 PopupControlExtender Atlas 控件添加到页面的最简单方法

  • 转到设计视图。
  • 打开您的 VS2005 工具箱，查找 Atlas 组（如果看不到，请右键单击工具箱并选择“显示所有”）。
  • 将 PopupControlExtender 拖到您的页面上。
  • 您可能会收到一条消息，询问是否替换 Micrsoft.Web.Atlas.dll，请选择“否”。
  • 返回您的 ASPX 页面，您会看到一个新的标签在那里
    • <%@ Register Assembly="AtlasControlToolkit" 
             Namespace="AtlasControlToolkit" TagPrefix="cc1" %>
  • 您的 Bin 文件夹应包含 AtlasConrtolToolkit.dll、Microsoft.AtlasControlExtender.dll 和 Microsoft.web.atlas.dll。

让我们回顾一下此控件的主要属性

  • TargetControlID - 要附加到的控件的 ID。
  • PopupControlID - 要显示的控件的 ID。
  • Position - 可选设置，指定弹出窗口相对于目标控件的位置（Left、Right、Top、Bottom、Center）。
  • CommitProperty - 可选设置，指定要用弹出窗口的结果设置的扩展控件上的属性。
  • CommitScript - 可选设置，指定设置弹出窗口结果后要运行的附加脚本。
  • OffsetX/OffsetY - 弹出窗口相对于其默认位置（由 Position 指定）的像素偏移量。

将日历控件与 PopupControlExtender 连接起来

我们将使用一个 Panel 控件作为我们的弹出窗口，并在面板中包含一个 ASP.NET Calendar 控件。借助 PopupControlExtender 和 UpdatePanel 控件，我们可以将所有这些连接起来。让我们看看代码

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
  <atlasToolkit:PopupControlProperties TargetControlID="txtUpdateDateFrom" 
               PopupControlID="Panel1" Position="Bottom" />
</atlasToolkit:PopupControlExtender>
Place your Calendar asp.net control
</ContentTemplate>
</atlas:UpdatePanel>
</asp:Panel>

代码非常容易理解。如果您想了解更多关于 UpdatePanel 控件的信息，请访问：http://atlas.asp.net/docs/Server/Microsoft.Web.UI/UpdatePanel/default.aspx （下载示例项目以获取完整代码）。

哦，是的，也有一点代码

让我们看看处理日历更改的代码

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
    // Popup result is the selected date
    PopupControlExtender1.Commit(txtUpdateDateFrom, 
                Calendar1.SelectedDate.ToShortDateString());
}

在这里，您可以更改所选日期的格式。在示例中，我使用了 Calendar1.SelectedDate.ToShortDateString()。这就够了，您就拥有了一个日期选择器。

我们也来做一个时间选择器

使用与日期选择器相同的思路，我们也可以做一个时间选择器；只是这次，我将使用一个 RadioButtonList 控件而不是日历控件。同样，我们的面板将充当弹出窗口；只是这次，我们需要添加一个 div 样式使其看起来像一个弹出窗口。让我们看看完整的代码

<asp:TextBox ID="txtTimeFrom" runat="server" Width="50"></asp:TextBox>
<asp:Panel ID="PanelTime" runat="server" CssClass="popupControl" >
<div style="border:1px outset white" > 
<atlas:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<atlasToolkit:PopupControlExtender ID="PopupControlExtender3" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="txtTimeFrom"
        PopupControlID="PanelTime" CommitProperty="value" Position="Bottom" />
</atlasToolkit:PopupControlExtender>
<asp:RadioButtonList ID="RadioButtonTimeFrom" runat="server" O
       nSelectedIndexChanged="RadioButtonTimeFrom_SelectedIndexChanged" 
       AutoPostBack="true" RepeatColumns="4" RepeatDirection ="Horizontal" >
    <asp:ListItem Text="0:00"></asp:ListItem>
    <asp:ListItem Text="0:30"></asp:ListItem>
    <asp:ListItem Text="1:00"></asp:ListItem>
    <asp:ListItem Text="1:30"></asp:ListItem>
    <asp:ListItem Text="2:00"></asp:ListItem>
    <asp:ListItem Text="2:30"></asp:ListItem>
    <asp:ListItem Text="3:00"></asp:ListItem>
    <asp:ListItem Text="3:30"></asp:ListItem>
    <asp:ListItem Text="4:00"></asp:ListItem>
    <asp:ListItem Text="4:30"></asp:ListItem>
    <asp:ListItem Text="5:00"></asp:ListItem>
    <asp:ListItem Text="5:30"></asp:ListItem>
    <asp:ListItem Text="6:00"></asp:ListItem>
    <asp:ListItem Text="6:30"></asp:ListItem>
    <asp:ListItem Text="7:00"></asp:ListItem>
    <asp:ListItem Text="7:30"></asp:ListItem>
    <asp:ListItem Text="8:00"></asp:ListItem>
    <asp:ListItem Text="8:30"></asp:ListItem>
    <asp:ListItem Text="9:00"></asp:ListItem>
    <asp:ListItem Text="9:30"></asp:ListItem>
    <asp:ListItem Text="10:00"></asp:ListItem>
    <asp:ListItem Text="10:30"></asp:ListItem>
    <asp:ListItem Text="11:00"></asp:ListItem>
    <asp:ListItem Text="11:30"></asp:ListItem>
    <asp:ListItem Text="12:00"></asp:ListItem>
    <asp:ListItem Text="12:30"></asp:ListItem>
    <asp:ListItem Text="13:00"></asp:ListItem>
    <asp:ListItem Text="13:30"></asp:ListItem>
    <asp:ListItem Text="14:00"></asp:ListItem>
    <asp:ListItem Text="14:30"></asp:ListItem>
    <asp:ListItem Text="15:00"></asp:ListItem>
    <asp:ListItem Text="15:30"></asp:ListItem>
    <asp:ListItem Text="16:00"></asp:ListItem>
    <asp:ListItem Text="16:30"></asp:ListItem>
    <asp:ListItem Text="17:00"></asp:ListItem>
    <asp:ListItem Text="17:30"></asp:ListItem>
    <asp:ListItem Text="18:00"></asp:ListItem>
    <asp:ListItem Text="18:30"></asp:ListItem>
    <asp:ListItem Text="19:00"></asp:ListItem>
    <asp:ListItem Text="19:30"></asp:ListItem>
    <asp:ListItem Text="20:00"></asp:ListItem>
    <asp:ListItem Text="20:30"></asp:ListItem>
    <asp:ListItem Text="21:00"></asp:ListItem>
    <asp:ListItem Text="21:30"></asp:ListItem>
    <asp:ListItem Text="22:00"></asp:ListItem>
    <asp:ListItem Text="22:30"></asp:ListItem>
    <asp:ListItem Text="23:00"></asp:ListItem>
    <asp:ListItem Text="23:30"></asp:ListItem>
    <asp:ListItem Text="23:59"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</atlas:UpdatePanel>
</div>
</asp:Panel>

与日期选择器非常相似。以下是一些需要注意的要点

  • 我们使用一个 div 来使我们的单选列表具有白色背景（参见上面代码中粗体行）。
    • <div style="border:1px outset white" >

    并且我们在 Panel 标签结束之前关闭 div。

  • 在 RadioButtonList 控件中，设置 OnSelectedIndexChanged="RadioButtonTimeFrom_SelectedIndexChanged" 事件。后面有一些代码。
  • 在 RadioButtonList 控件中，设置 AutoPostBack="true"。
  • 在 RadioButtonList 控件中，设置 RepeatColumns="4" 和 RepeatDirection ="Horizontal"（以表格格式列出单选按钮）。

让我们看看 RadioButtonList 的 OnSelectedIndexChanged 事件的代码

protected void RadioButtonTimeFrom_SelectedIndexChanged(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(RadioButtonTimeFrom.SelectedValue))
    {
        // Popup result is the selected task
        PopupControlExtender3.Commit(txtTimeFrom, RadioButtonTimeFrom.SelectedValue);
    }
    else
    {
        // Cancel the popup
        PopupControlExtender3.Cancel(txtTimeFrom);
    }
    // Reset the selected item
    RadioButtonTimeFrom.ClearSelection();
}

我如何告诉用户我的页面正在通过 Atlas 进行回发？

AJAX 进行异步回发（您必须等待页面完成加载）。对于较长时间运行的进程可能会有一些延迟，而您希望向用户提供一些反馈/进度指示。使用 UpdateProgress 可以实现一个进度模板，在控件“InPostback”时显示。您可以将此代码放在 atlas:ScriptManage 控件之后

<atlas:UpdateProgress id="process1" runat ="server">
    <ProgressTemplate>
        <div class = "title">
            <img src="images/updating_anim.gif" />Please wait, the page is loading...
        </div>
    </ProgressTemplate>
</atlas:UpdateProgress>

每次页面回发时，您都会看到图像和消息：“请稍候，页面正在加载...”。注意：我正在寻找一种方法来禁用输入控件，以便在页面回发时用户无法在页面回发时更改输入。我找到一个好的方法后会更新这篇文章。

以下是运行我的代码的步骤

  1. 下载 zip 文件。
  2. 将“TimePicker”文件夹中的所有内容复制到您的网站文件夹（C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites）。
  3. 打开 VS2005 并创建一个名为“TimePicker”的新 C# 网站（不需要选择 Atlas 模板，因为我的网站已经包含所有 Atlas DLL），并将站点指向您保存文件夹的位置（C:\Documents and Settings\[your name]\My Documents\Visual Studio 2005\WebSites\AtlasTextBoxAutoComplete）。
  4. VS2005 会显示一条消息说“Web Site already exists”。现在您可以选择“Open the existing web site”并按 OK。
  5. 单击 default.aspx（使其成为您的启动页）并运行。
  6. 运行 Default.aspx。

反馈

随时对本文发表您的反馈或提出任何问题。

© . All rights reserved.