最近,我尝试将一些基于 jQuery 的菜单原型(prototype)化到 ASP.NET MVC 中。这里仅举两个例子:
plugins.jquery.com/project/columnview
www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
他们的演示页面看起来很棒,但是当我将他们的示例代码集成到 MVC 中时,该脚本不再在 IE 和 FireFox 中工作,但在 Google Chrome 下似乎工作得很好。有人可以指出我错过了什么吗?我在这里说实话。我对 JavaScript 还很陌生,所以对我来说仍然是一个学习阶段,因此非常感谢任何帮助。
我已经放置了 VS2010 解决方案 zip 文件的副本 @ http://db.tt/0UNDkN
这就是我所做的。 在 Site.Master 中,我有类似的内容
<body>
<div class="page">{truncated...}</div>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</body>
在 View 文件中,我有以下内容
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="original">
{some demo block, copied from javascript demo}
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" />
<script type="text/javascript">
$(document).ready(function () {
$('#original').columnview();
});
</script>
</asp:Content>
编译代码并在IE下运行。理想情况下,它应该像 www.christianyates.com/blog/jquery/finder-column-view-hierarchical-lists-jquery 中的演示一样工作,但实际上,它只在普通 View 中显示无序列表。 (如果您下载解决方案文件并运行它,您也应该能够重现这一点)。接下来,尝试使用FireFox,也不起作用,结果与IE相同。最后,当我在 Google Chrome 4.1(最新版本)下尝试时,脚本显示得很好。这里真的令人费解:-/
感谢您的阅读:D
最佳答案
史诗般的失败.. 原来这和XHTML验证有关
ASP.Net MVC 默认有以下 DocType
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在原始代码中,我有
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>" />
事实证明 IE 和 FireFox 不喜欢结束标记。它更喜欢
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.columnview.js") %>"></script>
结束标签</script>
是这个原因。
关于ASP.NET MVC下的JQuery菜单插件似乎只能在Chrome中工作,但不能在IE和FireFox中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2796336/