ASP.NET ListView中JQuery DatePicker日期验证问题（VB.NET后台）

在ASP.NET的ListView控件中，有一个绑定了jQuery DatePicker的TextBox。用户通过单选按钮选择购买品类，选中「芒果」时该日期输入框显示，用于选择生效日期。当前需要验证所选日期是否在数据库规定的范围内（例如芒果季生效日期需从2023年5月起），但TextBox的TextChanged事件仅在用户按回车时触发，希望实现DatePicker选择日期后立即执行VB.NET后台验证。

现有代码 #

标记代码 #

<td valign="middle" style="white-space: nowrap; text-align:center;">
      <%# CheckNull(Eval("EFF_DATE"))%>
      <ASP:Textbox runat="server" ID="dtEffectiveDate" CssClass="dateSelector"
                                MonitorChanges="true" 
                OnTextChanged="dtEffectiveDate_TextChanged" />                                   
                            
</td>

脚本代码 #

$("<%=listView.ClientID %> tr").each(function () {
    $('.dateSelector').datepicker();
});

要实现DatePicker选完日期后立即触发后台验证，需结合前端事件触发回传，搭配后台验证逻辑，具体步骤如下：

1. 修改DatePicker初始化，添加选择后触发逻辑 #

给DatePicker绑定onSelect事件，用户选完日期后直接触发ASP.NET的回传机制，指定对应TextBox的TextChanged事件：

$("<%=listView.ClientID %> tr").each(function () {
    $('.dateSelector', this).datepicker({
        onSelect: function(dateText, inst) {
            // 获取当前TextBox的客户端ID，确保回传对应控件
            var textBoxId = $(this).attr('id');
            // 触发ASP.NET内置回传，触发TextChanged事件
            __doPostBack(textBoxId, '');
        }
    });
});

注：循环内用$('.dateSelector', this)限定查找范围，避免重复绑定同一控件的DatePicker。

2. 启用TextBox自动回传 #

在TextBox标记中添加AutoPostBack="true"，确保回传能正确触发TextChanged事件：

<ASP:Textbox runat="server" ID="dtEffectiveDate" CssClass="dateSelector"
             MonitorChanges="true" 
             OnTextChanged="dtEffectiveDate_TextChanged"
             AutoPostBack="true" />

3. 后台VB.NET验证逻辑 #

在dtEffectiveDate_TextChanged事件中编写日期范围验证代码，从数据库获取芒果的生效日期限制，完成验证并给出提示：

Protected Sub dtEffectiveDate_TextChanged(sender As Object, e As EventArgs)
    Dim txtDate As TextBox = DirectCast(sender, TextBox)
    Dim selectedDate As Date

    ' 解析用户选择的日期
    If Date.TryParse(txtDate.Text, selectedDate) Then
        ' 从数据库获取芒果生效起始日期（替换为实际数据库查询逻辑）
        Dim mangoStartDate As Date = New Date(2023, 5, 1)

        ' 验证日期是否符合要求
        If selectedDate < mangoStartDate Then
            ' 验证失败，弹出提示并清空错误日期
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "DateValidation", 
                "alert('芒果生效日期不能早于2023年5月1日！');", True)
            txtDate.Text = String.Empty
        End If
    Else
        ' 日期格式错误提示
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "DateValidation", 
            "alert('请选择有效的日期！');", True)
        txtDate.Text = String.Empty
    End If
End Sub

4. 可选：仅选中芒果时触发验证 #

如果需要仅在用户选择「芒果」品类时执行验证，可在前端onSelect事件中先判断单选按钮状态：

onSelect: function(dateText, inst) {
    // 假设芒果单选按钮的服务器ID为rdoMango
    if ($('#<%=rdoMango.ClientID %>').is(':checked')) {
        var textBoxId = $(this).attr('id');
        __doPostBack(textBoxId, '');
    }
}

内容的提问来源于stack exchange，提问作者Ann