欢迎访问宙启技术站
智能推送
最新文章

ASP.NET源码之自定义控件DateTimePicker怎么用

发布时间：2023-05-15 12:48:25

ASP.NET 是一种面向 Web 应用程序的服务端框架，支持多种编程语言，如 C#、VB.NET、F# 等。其中，自定义控件是 ASP.NET 的一个强大功能，它可以帮助开发者封装常用的业务逻辑和视图，提高开发效率和代码重用性。

本文将介绍如何使用 ASP.NET 的自定义控件 DateTimePicker，实现日期和时间的选择功能。

Step 1：创建自定义控件

在 Visual Studio 中创建一个新的 ASP.NET 控件库项目，命名为 DateTimePicker。右键项目，选择添加 -> 新建项，创建一个名为 DateTimePicker.cs 的控件类。

在控件类中，继承 ASP.NET 中的 WebControl 类，并添加以下代码：

public class DateTimePicker : WebControl
{
    protected HiddenField _hiddenField = new HiddenField();

    protected TextBox _textBox = new TextBox();

    protected Calendar _calendar = new Calendar();

    protected DropDownList _hoursDropDownList = new DropDownList();

    protected DropDownList _minutesDropDownList = new DropDownList();

    protected override void RenderContents(HtmlTextWriter output)
    {
        output.Write("<div>");

        _hiddenField.RenderControl(output);

        _textBox.RenderControl(output);

        output.Write("<img src='Images/calendar.png' onclick='showCalendar()' />");

        _calendar.Visible = false;
        _calendar.ID = "calendar";
        _calendar.SelectionMode = CalendarSelectionMode.Day;
        _calendar.DayRender += _calendar_DayRender;
        _calendar.SelectedDateChanged += _calendar_SelectedDateChanged;

        output.Write("<div id='calendarContainer' style='display: none;'>");

        _calendar.RenderControl(output);

        output.Write("</div>");

        output.Write("</div>");

        output.Write("<div>");

        _hoursDropDownList.RenderControl(output);

        output.Write(":");

        _minutesDropDownList.RenderControl(output);

        output.Write("</div>");
    }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        _hiddenField.ID = "hiddenField";
        _hiddenField.ValueChanged += _hiddenField_ValueChanged;

        _textBox.ID = "textBox";
        _textBox.TextChanged += _textBox_TextChanged;

        for (int i = 0; i < 24; i++)
        {
            _hoursDropDownList.Items.Add(i.ToString("D2"));
        }

        for (int i = 0; i < 60; i++)
        {
            _minutesDropDownList.Items.Add(i.ToString("D2"));
        }
    }

    private void _calendar_DayRender(object sender, DayRenderEventArgs e)
    {
        if (!e.Day.IsOtherMonth && !e.Day.IsWeekend)
        {
            e.Cell.Attributes.Add("style", "background-color: #ddf;");
        }
    }

    private void _calendar_SelectedDateChanged(object sender, EventArgs e)
    {
        DateTime selectedDate = _calendar.SelectedDate.Date;

        _textBox.Text = selectedDate.ToString("yyyy-MM-dd");

        _hoursDropDownList.SelectedValue = selectedDate.Hour.ToString("D2");

        _minutesDropDownList.SelectedValue = selectedDate.Minute.ToString("D2");

        _hiddenField.Value = selectedDate.ToString("yyyy-MM-dd HH:mm:ss");
    }

    private void _hiddenField_ValueChanged(object sender, EventArgs e)
    {
        DateTime selectedDate;

        if (DateTime.TryParse(_hiddenField.Value, out selectedDate))
        {
            _textBox.Text = selectedDate.ToString("yyyy-MM-dd");

            _hoursDropDownList.SelectedValue = selectedDate.Hour.ToString("D2");

            _minutesDropDownList.SelectedValue = selectedDate.Minute.ToString("D2");
        }

        _calendar.VisibleDate = selectedDate;

        _calendar.SelectedDate = selectedDate;
    }

    private void _textBox_TextChanged(object sender, EventArgs e)
    {
        DateTime selectedDate;

        if (!DateTime.TryParse(_textBox.Text, out selectedDate))
        {
            selectedDate = DateTime.Now.Date;
        }

        _calendar.VisibleDate = selectedDate;

        _calendar.SelectedDate = selectedDate;

        _hoursDropDownList.SelectedValue = selectedDate.Hour.ToString("D2");

        _minutesDropDownList.SelectedValue = selectedDate.Minute.ToString("D2");

        _hiddenField.Value = selectedDate.ToString("yyyy-MM-dd HH:mm:ss");
    }
}

以上代码的作用如下：

- 构造函数 _hiddenField、_textBox、_calendar、_hoursDropDownList、_minutesDropDownList。

- 重写方法 RenderContents，渲染控件的 HTML 代码和 JavaScript 代码。

- 重写方法 OnInit，初始化控件的属性和事件。

- 方法 _calendar_DayRender，设置日历表格中未来的日期的单元格背景色。

- 方法 _calendar_SelectedDateChanged，设置文本框中的日期和时间，以及隐藏字段的值。

- 方法 _hiddenField_ValueChanged，在隐藏字段的值发生变化时执行，设置文本框的值和选中的日期时间。

- 方法 _textBox_TextChanged，在文本框中的值发生变化时执行，设置日历的可见日期、选中日期、小时和分钟下拉列表框的值，以及隐藏字段的值。

Step 2：添加资源文件

在项目中添加两个资源文件，分别命名为 DateTimePicker.js 和 Calendar.css。这些文件是用于提供客户端所需的 JavaScript 和 CSS 样式表。

DateTimePicker.js 文件的代码如下：

function showCalendar() {
    document.getElementById('calendarContainer').style.display = '';

    var top = getAbsoluteTop(document.getElementById('calendar'));

    var left = getAbsoluteLeft(document.getElementById('calendar'));

    document.getElementById('calendarContainer').style.top = top + 'px';

    document.getElementById('calendarContainer').style.left = left + 'px';
}

function getAbsoluteTop(element) {
    var top = element.offsetTop;

    while (element.offsetParent) {
        element = element.offsetParent;

        top += element.offsetTop;
    }

    return top;
}

function getAbsoluteLeft(element) {
    var left = element.offsetLeft;

    while (element.offsetParent) {
        element = element.offsetParent;

        left += element.offsetLeft;
    }

    return left;
}

Calendar.css 文件的代码如下：

table.calendar {
    background-color: #fff;
    border: 1px solid gray;
}

td.calendar-other-month {
    color: #bbb;
}

td.calendar-weekend {
    color: blue;
}

.div.calendar {
    font-family: Arial, sans-serif;
    font-size: .8em;
}

以上代码的作用如下：

- 方法 showCalendar，在点击日期图片时显示日历，设置日历容器的位置。

- 方法 getAbsoluteTop，计算 HTML 元素相对于文档的纵坐标。

- 方法 getAbsoluteLeft，计算 HTML 元素相对于文档的横坐标。

- CSS 样式名 calendar，设置日历表格的背景色和边框。

- CSS 样式名 calendar-other-month，设置日历表格中非本月日期的默认显示样式。

- CSS 样式名 calendar-weekend，设置日历表格中周末日期的默认显示样式。

- CSS 样式名 calendar，设置日历容器的字体和字号。

Step 3：测试自定义控件

在 ASP.NET 的 Web 表单页面中，添加下列代码，测试 DateTimePicker 自定义控件的使用效果：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>WebForm1</title>

    <link href="Calendar.css" rel="stylesheet" />

    <script src="DateTimePicker.js"></script>

    <script>
        function onSubmit() {
            var dateTimePicker = <%= dateTimePicker.ClientID %>;

            alert(dateTimePicker.get_value());

            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <test:DateTimePicker ID="dateTimePicker" runat="server" />

            <br />

            <input type="submit" value="Submit" onclick="return onSubmit();" />
        </div>
    </form>
</body>
</html>

以上代码的作用如下：

- 引入 Calendar.css 和 DateTimePicker.js 两个客户端资源文件。

- 客户端 JavaScript 代码 onSubmit，在提交表单时获取 DateTimePicker 控件的值，并弹出一个提示框。

- 在表单中添加 DateTimePicker 控件和提交按钮。

完成以上步骤，即可在网页上看到 DateTimePicker 控件的效果了。

总结

本文介绍了如何使用 ASP.NET 的自定义控件 DateTimePicker，实现日期和时间的选择功能。其中，需要掌握以下知识点：

- 如何创建自定义控件