MVC2：详细信息页面分页时 JQuery 不起作用
问题：
我有一个使用详细信息页面和母版页的 MVC2 项目。当“详细信息”页面第一次运行时，一切都很好 - 所有 javascript 和 jquery 都运行得很好。但是，当分页运行时（使用 NerdDinner 教程中的 PagulatedList），第二个页面不会加载 jquery 对象。 （JQuery =“未定义”）。
我不知道为什么第二页不起作用。我已将解决方案缩减为以下最少代码以显示行为：
Master.aspx 页面：
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<script src="../../Scripts/jquery-1.4.2.min.js"
type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
alert('MasterPage');
});
</script>
<%-- scripts from child pages get inserted here --%>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
<body>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
Details.aspx 页面：
<%@ Page Title="" Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<WidgetViewModel>" %>
<asp:Content ID="TitleContent"
ContentPlaceHolderID="TitleContent"
runat="server">
The Title
</asp:Content>
<asp:Content ID="Content3"
ContentPlaceHolderID="ScriptContent"
runat="server">
<script type="text/javascript" language="javascript">
alert('DetailsPage');
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%-- No Content --%>
</asp:Content>
- JQuery 库是我加载的唯一库。
- 上面显示的脚本是我仅有的脚本。
详细信息/{somequery} 的来源（两个警报均按预期显示）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
The Title
</title>
<script src="../../Scripts/jquery-1.4.2.min.js"
type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
alert('MasterPage');
});
</script>
<script type="text/javascript" language="javascript">
alert('DetailsPage');
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
详细信息/{somequery}/1 的源代码（仅Details.aspx 警报有效）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
The Title
</title>
<script src="../../Scripts/jquery-1.4.2.min.js"
type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
alert('MasterPage');
});
</script>
<script type="text/javascript" language="javascript">
alert('DetailsPage');
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
The problem:
I have an MVC2 project that uses a Details page and a Master page. When the Details page runs the first time, everything is great - all the javascript and jquery runs just fine. However, when the pagination runs (using a PaginatedList a la the NerdDinner tutorial), the second page doesn't load the jquery object. (JQuery = "undefined").
I have no idea why the second page doesn't work. I have pared down the solution to the following minimum code to show the behavior:
The Master.aspx page:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<script src="../../Scripts/jquery-1.4.2.min.js"
type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
alert('MasterPage');
});
</script>
<%-- scripts from child pages get inserted here --%>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
<body>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
The Details.aspx Page:
<%@ Page Title="" Language="C#"
MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<WidgetViewModel>" %>
<asp:Content ID="TitleContent"
ContentPlaceHolderID="TitleContent"
runat="server">
The Title
</asp:Content>
<asp:Content ID="Content3"
ContentPlaceHolderID="ScriptContent"
runat="server">
<script type="text/javascript" language="javascript">
alert('DetailsPage');
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%-- No Content --%>
</asp:Content>
- The JQuery library is the only library I am loading.
- The scripts shown above are the only scripts I have.
The Source of Details/{somequery} (both alerts show as expected)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
The Title
</title>
<script src="../../Scripts/jquery-1.4.2.min.js"
type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
alert('MasterPage');
});
</script>
<script type="text/javascript" language="javascript">
alert('DetailsPage');
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
The Source code of Details/{somequery}/1 (ONLY the Details.aspx alert works)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
The Title
</title>
<script src="../../Scripts/jquery-1.4.2.min.js"
type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
alert('MasterPage');
});
</script>
<script type="text/javascript" language="javascript">
alert('DetailsPage');
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我同意@Josh的评论，因为根据你的路线，相对路径将会改变......使其绝对，或者更好地使用CDN版本的jQuery：
I would agree with @Josh's comment, as depending on your route that relative path is going to change... Make it absolute, or better yet use the CDN version of jQuery: