ASP.NET母版页下jQuery Datepicker在内容页失效问题

兄弟，我太懂这种母版页坑人的感觉了！之前我也踩过一模一样的坑，给你捋捋问题出在哪，还有怎么快速解决：

问题核心原因 #

你把绑定Datepicker的脚本写在母版页的head区域里了，但母版页在编译的时候，根本不知道内容页里的txtFromDate、txtToDate这些控件，所以<%=txtFromDate.ClientID %>这行代码要么直接报错，要么生成的选择器完全不对，自然找不到目标控件，Datepicker就没法生效。

解决方案一：把脚本移到内容页里 #

最直接的办法就是把绑定脚本放到内容页对应的Content区域里，因为内容页能直接访问自己的控件，ClientID也能正确生成。

比如内容页的代码可以这么写：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <!-- 你的日期输入框 -->
    <asp:TextBox ID="txtFromDate" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtToDate" runat="server"></asp:TextBox>

    <!-- 绑定Datepicker的脚本 -->
    <script type="text/javascript">
        $(document).ready(function () {
            // 这里能正确获取到控件的ClientID
            $("#<%=txtFromDate.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy' });
            $("#<%=txtToDate.ClientID %>").datepicker({ dateFormat: 'dd-mm-yy' });
        });
    </script>
</asp:Content>

解决方案二：用CSS类选择器替代ID（更推荐） #

如果想在母版页里统一处理所有日期控件，那可以用CSS类来绑定，不用管ClientID的变化，省心又方便：

1. 给内容页的TextBox加上CssClass属性：

<asp:TextBox ID="txtFromDate" runat="server" CssClass="datepicker"></asp:TextBox>
<asp:TextBox ID="txtToDate" runat="server" CssClass="datepicker"></asp:TextBox>

2. 在母版页的脚本里改成类选择器：

$(document).ready(function () {
    // 所有带datepicker类的控件都会自动绑定Datepicker
    $(".datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
});

额外注意点 #

• 确保jQuery和jQuery UI的加载顺序正确：先加载jQuery，再加载jQuery UI，最后加载你的绑定脚本，不然会出现datepicker is not a function的报错。
• 打开浏览器控制台（F12）看看有没有报错，比如$ is not defined说明jQuery没加载成功，根据报错信息排查更快。

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