Jquery 不能在使用 ASP.NET C# 的母版页中工作，并且在不使用母版页的情况下工作正常
Posted
技术标签:
【中文标题】Jquery 不能在使用 ASP.NET C# 的母版页中工作，并且在不使用母版页的情况下工作正常【英文标题】：Jquery is not working in Master Page using ASP.NET C# and working fine with without using master page 【发布时间】：2015-07-29 02:28:15 【问题描述】：此代码在 .aspx 页面中运行良好，没有问题。但如果我使用母版页，那么这里没有任何效果，我尝试将 JQuery 脚本放在母版页中，即使这样也没有任何效果。这里有什么需要设置的吗？仍然不明白为什么 info div 没有加载计数。下面是链接
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
我也参考以下博客：
http://mwtech.blogspot.co.il/2009/04/2-ways-to-load-jquery-from-aspnet.html
MasterPage.master 代码：
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"> </script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx 代码
<script type="text/javascript">
var Editor1 = '#Editor1';
var Editor1CountLimit = 50
var Editor1InfoArea = '#Info';
var Editor2 = '#Editor2';
var Editor1InfoArea1 = '#Info1';
$(document).ready(function ()
TrackCharacterCount(Editor1, Editor1CountLimit, Editor1InfoArea);
TrackCharacterCount(Editor2, Editor1CountLimit, Editor1InfoArea1);
);
function TrackCharacterCount(ctl, limit, info)
var editor = $(ctl).contents().find('iframe').eq(2);
$(editor).load(function ()
var txt = $(this).contents().find('body').text();
$(info).html(txt.length); //set initial value
$(this).contents().keyup(function ()
var txt = $(this).contents().find('body').text();
if (txt.length > limit)
$(info).html(txt.length).css("color", "red");
else
$(info).html(txt.length).css("color", "");
);
);
function ValidateEditor1Length(source, args)
var editor = $(Editor1).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
function ValidateEditor1Length1(source, args)
var editor = $(Editor2).contents().find('iframe').eq(2);
var txt = editor.contents().find('body').text();
var isValid = txt.length > 0 && txt.length <= Editor1CountLimit;
args.IsValid = isValid;
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="Info">Info</div>
<%-- <cc1:Editor ID="Editor1" runat="server" />--%>
<cc1:Editor ID="Editor1" runat="server" />
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="Editor1" ClientValidationFunction="ValidateEditor1Length" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
<div id="Info1">Info</div>
<%-- <cc1:Editor ID="Editor2" runat="server" />--%>
<cc1:Editor ID="Editor2" runat="server" />
<asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="Editor2" ClientValidationFunction="ValidateEditor1Length1" ErrorMessage="Exceeded Character Limit"></asp:CustomValidator>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
谢谢。
【问题讨论】：
【参考方案1】：尝试将您的 Jquery 引用更改为：
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/scripts/jquery-1.3.2-vsdoc2.js") %>"></script>
【讨论】：
是的。也试过这个，但没有加载 jquery info div，请更喜欢上面的链接。 @马丁 你有没有看一下 Chrome 开发者工具控制台，有没有 Javascript 错误或缺少资源？ 使用单页工作完美，使用母版页时出现问题，请参考上面的链接。【参考方案2】：js文件正在下载吗？在开发人员工具（F12）下使用网络也检查。还要检查最终页面的 HTML，确认控件的 ID 确实是您在脚本中使用的 ID。
【讨论】：
请在我的问题中选择上面的链接，你会得到我的答案。 @Rui lima 文件是否被下载？ 在不使用母版页的情况下，此代码运行良好。但是当我使用上面的代码处理母版页时，jquery 没有加载。请检查上面的链接，你会得到我的问题。 @Rui lima 伙计，我们看不到代码。这个问题肯定与 asp.net webforms 生成控件 ID 的方式有关。如果您想解决您的问题，我们需要确保两件事：1. 确保正在下载 js 文件，以及 2. 确保 ID 确实是正确的。使用母版页时，有时您会得到 id="ctl00_MainContent_Age" 的 ID，而不仅仅是 id="Age"。 asp.net/web-forms/overview/older-versions-getting-started/…，顺便说一句，您提供的链接不是一个很好的例子。 仍然很困惑，上面的代码是可用的，你能找到出错的地方吗？ @瑞丽玛【参考方案3】：我有同样的问题。在浏览器客户端中查看输出源代码时，我注意到所有“id”都在 id 本身之前使用 ContentPlaceHolderID 作为前缀进行了修改，因此 jQuery 正在寻找的 Id 不再存在。
解决方案是在子页面的“内容部分”中包含参数 ClientIDMode="Static"，这样 id 对象在内容页面上保持不变，jQuery 可以通过原始 id 找到它。
希望对你有帮助。
【讨论】：
以上是关于Jquery 不能在使用 ASP.NET C# 的母版页中工作，并且在不使用母版页的情况下工作正常的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 C#、ASP.NET、SQL Server 端处理实现 jQuery DataTables 插件？
jquery datepicker和asp.net c#空值