ASP.NET Core集成Metronic：添加runat="server"后日期选择器失效求助

问题根源 #

当ASP.NET输入框添加runat="server"属性后，服务器会自动生成动态客户端ID（比如原IDkt_daterangepicker_1可能被修改为ctl00_MainContent_kt_daterangepicker_1），而你的JS代码仍使用原始ID选择元素，导致无法定位目标输入框，最终日期选择器初始化失败。Bootstrap组件出现相同问题也是这个原因。

三种可行解决方案 #

方案1：强制保持ID不变 #

给输入框添加ClientIDMode="Static"属性，让ASP.NET不修改客户端ID，JS代码可直接使用原始ID：

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/plugins/global/plugins.bundle.js"></script>
    <form runat="server">
        <div class="container bg-primary">
            <label class="form-label">Basic example</label>
            <input class="form-control form-control-solid" placeholder="Pick date rage" 
                   id="kt_daterangepicker_1" runat="server" ClientIDMode="Static"/>
        </div>
    </form>
    <script>
        $("#kt_daterangepicker_1").daterangepicker({
            singleDatePicker: true
        });
    </script>
</asp:Content>

方案2：动态获取客户端ID #

在JS中通过ASP.NET内嵌表达式，输出服务器控件生成的真实客户端ID：

$("#<%= kt_daterangepicker_1.ClientID %>").daterangepicker({
    singleDatePicker: true
});

方案3：用类选择器替代ID选择器 #

给输入框添加自定义CSS类，通过类选择器初始化日期选择器，避开ID变化问题：

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <script src="assets/plugins/global/plugins.bundle.js"></script>
    <form runat="server">
        <div class="container bg-primary">
            <label class="form-label">Basic example</label>
            <input class="form-control form-control-solid date-picker" placeholder="Pick date rage" 
                   id="kt_daterangepicker_1" runat="server"/>
        </div>
    </form>
    <script>
        $(".date-picker").daterangepicker({
            singleDatePicker: true
        });
    </script>
</asp:Content>

额外提示 #

• 若使用母版页，客户端ID生成规则会更复杂，上述方案均适用；
• 确保plugins.bundle.js加载完成后再执行初始化代码，可将脚本放在DOM元素之后，或用$(document).ready()包裹初始化逻辑。

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