ASP.NET Web Forms只读DatePicker无法回传值问题问询

这个问题我之前做项目时也踩过坑，核心原因是ASP.NET Web Forms对服务器端标记为只读的控件的特殊处理机制：当你在服务器端给asp:TextBox设置Readonly=True时，ASP.NET会默认认为这个控件的值不应该被客户端修改，回发时会直接忽略客户端提交的新值，沿用ViewState里保存的原始初始值——哪怕你用jQuery Datepicker成功修改了前端输入框的显示值，服务器端也拿不到。

下面给你几个实用的解决方案，按改动量从小到大排序：

方案一：表单提交前临时移除只读属性（最简便） #

不需要修改后台代码，只需要在前端加一段监听表单提交的逻辑，在提交前把控件的readonly属性临时移除，这样浏览器就能正常提交值，Web Forms也会接收更新后的数据：

$(function() {
    // 初始化DatePicker
    $("#<%= documentDate2.ClientID %>").datepicker();

    // 监听表单提交事件
    $("form").submit(function() {
        // 临时移除readonly属性，确保值能被提交
        $("#<%= documentDate2.ClientID %>").removeAttr("readonly");
    });
});

原理很简单：表单提交瞬间，控件不再是只读状态，浏览器会把它的当前值打包发送给服务器，ASP.NET不会再过滤这个值。

方案二：客户端控制只读状态（更规范） #

把服务器端设置Readonly=True的逻辑改成客户端控制，后台只传递权限判断结果，前端再设置readonly属性。这样服务器端不会把控件标记为“不可修改”，回发时自然能拿到新值：

后台代码（C#） #

// 根据权限判断是否设置只读标记
if (!HasEditPermission) // 这里替换成你的权限检查逻辑
{
    documentDate2.Attributes.Add("data-is-readonly", "true");
}

前端jQuery代码 #

$(function() {
    var $dateInput = $("#<%= documentDate2.ClientID %>");
    
    // 初始化DatePicker
    $dateInput.datepicker();

    // 根据后台传递的标记设置只读
    if ($dateInput.data("is-readonly") === "true") {
        $dateInput.attr("readonly", "readonly");
    }
});

这种方法更符合前后端分离的思路，也避免了Web Forms对服务器端只读控件的限制。

方案三：用隐藏字段同步值（兼容复杂场景） #

如果上面两种方法都不适用（比如控件状态频繁变化），可以添加一个隐藏字段，把DatePicker选择的值同步到隐藏字段，服务器端直接读取隐藏字段的值：

前端添加隐藏字段 #

<asp:HiddenField ID="hdnDocumentDate2" runat="server" />

前端同步逻辑 #

$(function() {
    var $dateInput = $("#<%= documentDate2.ClientID %>");
    var $hiddenField = $("#<%= hdnDocumentDate2.ClientID %>");
    
    // 初始化DatePicker并绑定选择事件
    $dateInput.datepicker({
        onSelect: function(selectedDate) {
            // 把选中的日期同步到隐藏字段
            $hiddenField.val(selectedDate);
        }
    });

    // 页面加载时同步初始值
    $hiddenField.val($dateInput.val());
});

后台读取值 #

// 直接读取隐藏字段的值
var documentDate = hdnDocumentDate2.Value;

这个方法兼容性最好，适合各种复杂场景，但需要额外维护隐藏字段和输入框的同步逻辑。

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