ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围

确保ASP.NET表单中用户提交时间在规定范围内，是Web应用程序中常见的需求。在本实例中，我们将使用jQuery和ASP.NET表单数据验证控件来实现此目标。

一、创建ASP.NET Web应用程序并设置环境

首先，我们需要创建一个ASP.NET Web应用程序。我们可以在Visual Studio中创建一个新的Web应用程序，并在其中添加一个Web表单。

然后，我们需要在Web.config文件中启用jQuery库。为此，我们需要将以下代码添加到Web.config中system.web节点中：

<compilation debug="true" targetFramework="4.5"/>
<httpRuntime targetFramework="4.5"/>
<pages validateRequest="false">
  <controls>
    <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit"/>
  </controls>
</pages>
<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0"/>
    <remove name="OPTIONSVerbHandler"/>
    <remove name="TRACEVerbHandler"/>
    <add name="ExtensionlessUrlHandler-Integrated-4.0" 
            path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" 
            type="System.Web.Handlers.TransferRequestHandler" 
            preCondition="integratedMode,runtimeVersionv4.0"/>
  </handlers>
  <validation validateIntegratedModeConfiguration="false"/>
</system.webServer>

二、在Web表单中添加校验时间范围的代码

现在，我们需要向Web表单中添加校验时间范围的代码。我们可以使用ASP.NET表单验证控件来实现这个功能。具体来说，我们将使用ASP.NET的CustomValidator控件。

我们需要将以下代码添加到Web表单中：

<asp:TextBox ID="fromTime" runat="server"></asp:TextBox>    
<asp:CustomValidator ID="ValidateFromTime" runat="server" ControlToValidate="fromTime" 
            ErrorMessage="时间范围无效" OnServerValidate="ValidateTimeRange"></asp:CustomValidator>
<asp:TextBox ID="toTime" runat="server"></asp:TextBox>
<asp:CustomValidator ID="ValidateToTime" runat="server" ControlToValidate="toTime" 
            ErrorMessage="时间范围无效" OnServerValidate="ValidateTimeRange"></asp:CustomValidator>

在这个代码中，我们创建了两个文本框，一个用于输入开始时间（ID为“fromTime”），一个用于输入结束时间（ID为“toTime”）。

然后，我们添加了两个CustomValidator控件（ID分别为“ValidateFromTime”和“ValidateToTime”）。这些控件将用来校验时间范围是否有效。在这些控件中，我们设置ControlToValidate属性为文本框的ID。

我们还添加了OnServerValidate属性，这个属性将调用一个名为“ValidateTimeRange”的函数来进行校验。

现在，我们需要在C#代码中实现“ValidateTimeRange”函数。

在代码中添加以下代码：

protected void ValidateTimeRange(object source, ServerValidateEventArgs args)
{
    if (!string.IsNullOrEmpty(fromTime.Text) && !string.IsNullOrEmpty(toTime.Text))
    {
        DateTime startTime = DateTime.Parse(fromTime.Text);
        DateTime endTime = DateTime.Parse(toTime.Text);

        if (startTime.TimeOfDay >= endTime.TimeOfDay)
        {
            args.IsValid = false;
        }
        else
        {
            args.IsValid = true;
        }
    }
}

在这个代码中，“ValidateTimeRange”函数获取文本框中的时间，然后比较这两个时间是否有效。如果开始时间在结束时间之后，则说明时间范围无效。如果开始时间在结束时间之前，则说明时间范围有效。

三、测试

现在，我们已经完成了校验时间范围的代码。我们可以在浏览器中打开Web应用程序，并输入开始时间和结束时间来测试代码。如果时间范围有效，则不会显示错误消息；如果时间范围无效，则会显示错误消息。

示例1：

开始时间：12:00:00 PM

结束时间： 11:00:00 AM

结果：显示“时间范围无效”错误消息

示例2：

开始时间：9:00:00 AM

结束时间： 5:00:00 PM

结果：不显示错误消息

四、总结

在本实例中，我们学习了如何使用jQuery和ASP.NET表单验证控件来校验时间范围。我们创建了两个文本框和CustomValidator控件，并添加了“ValidateTimeRange”函数来进行校验。最后，我们测试了代码，并验证了代码是否有效。