ASPX页面脚本无法在同页TextBox生效，母版页可行求技术帮助

这个问题我碰到过很多次啦，核心原因是ASP.NET内容页中的服务器控件会生成带命名容器前缀的客户端ID，比如你的txtStationName在页面渲染后可能会变成类似ctl00_FeaturedContent_txtStationName的ID，而你jQuery代码里用的$('#txtStationName')自然就找不到对应的元素了——母版页里的控件没有额外的命名容器，所以ID保持原样，脚本就能正常工作。

下面给你几种可行的解决方案：

方法1：设置ClientIDMode为Static #

直接让服务器控件渲染后的客户端ID和你设置的ID一致，修改TextBox的属性：

<asp:TextBox ID="txtStationName" runat="server" ClientIDMode="Static"></asp:TextBox>

这样你的原jQuery代码不需要修改，就能正确选中目标元素。

方法2：使用服务器控件的ClientID属性 #

在jQuery选择器中嵌入ASP.NET的服务器端表达式，让页面渲染时自动替换成正确的客户端ID：

$(document).ready(function () {
    $('#<%= txtStationName.ClientID %>').autocomplete({ 
        source: 'StationHandler.ashx' 
    });
});

这种方法不需要修改控件属性，兼容性更好，适合不能修改ClientIDMode的场景。

方法3：通过CSS类选择元素 #

给TextBox添加一个CSS类，然后用类选择器来定位元素，避免ID变化的问题：

<asp:TextBox ID="txtStationName" runat="server" CssClass="station-autocomplete"></asp:TextBox>

对应的jQuery代码修改为：

$(document).ready(function () {
    $('.station-autocomplete').autocomplete({ 
        source: 'StationHandler.ashx' 
    });
});

额外检查项 #

• 确认脚本文件的路径是否正确：内容页的路径相对位置可能和母版页不同，建议用ResolveUrl来确保路径正确，比如：

  <script src='<%= ResolveUrl("~/jquery-1.12.1.js") %>'></script>
  <script src='<%= ResolveUrl("~/jquery-ui.js") %>'></script>
  <link href='<%= ResolveUrl("~/jquery-ui.css") %>' rel="stylesheet" />
  

• 打开浏览器的开发者工具（F12），切换到Console标签，查看是否有脚本加载失败或者选择器找不到元素的错误，这能帮你快速定位问题。

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