带有 jquery 代码的脚本块应该放在 ASP.NET MVC 母版页的什么位置？答案

【问题标题】：Where should a script block with jquery code be placed on an ASP.NET MVC Master Page?带有 jquery 代码的脚本块应该放在 ASP.NET MVC 母版页的什么位置？
【发布时间】：2010-09-23 15:39:33
【问题描述】：

开始使用 jquery 并在获取用于 asp.net mvc 的 hello world 类型示例时遇到问题。尝试使用此脚本加载页面时出现运行时错误“预期对象”。

A.脚本标签应该放在母版页的什么位置？ B. 我可能做错了什么？我的页面中肯定有“a”元素？

<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>

            <script src="../Scripts/jquery.corner.js" type="text/javascript"></script>

            <script type="text/javascript">
                $(document).ready(function() {
                    $("a").click(function(event) {
                        alert("Thanks for visiting!");
                    });
                });
            </script>

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

嗯……

回答您的第一个问题：它们应该放在<head> 元素中。

另外，通常我在 DOM 中接收事件时使用'bind' method（就像您正在尝试做的那样）。

所以，代码看起来像：

$(document).ready(function()
{
    //  Bind each link to a handler:
    $("a").bind('click dblclick', function(event)
    {
         alert('click');
    })
});

此外，还有一些设计技巧（因为您正在使用我最关心的东西（带有 jQuery 的 ASP.NET MVC）：

在母版页的<head> 元素底部添加一个额外的“ContentPlaceHolder”。这将允许您在适当的位置运行特定于页面的 javascript：在页面的“head”部分，它允许您制作特定于页面的 javascript 包含。

它看起来像这样：

    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>

为什么有用？我会告诉你：你使用的那个 jQuery 圆角插件可能只用在几个页面上——为什么要在每个页面上都包含它？

【讨论】：

【解决方案2】：

我同意 Dan 为脚本中的链接添加内容占位符。然而，就性能而言，头部通常不是放置 JavaScript 的最佳位置。最好的地方是在页面的底部。所以你的 HTML 可以在你的 JavaScript 之前加载。见Yahoo's YSlow tip。不过，您的代码应该仍然可以在 head 部分运行。

我喜欢将我网站的大部分 JavaScript 放在一个文件中，并将其链接到所有页面。如果它变得非常大，您可以将其分成几个文件。这利用了浏览器的缓存。

至于 jQuery 代码有什么问题。我不知道。它看起来很正确。我唯一想知道的是事件参数。试着把它完全去掉。我知道该函数允许使用参数，但我通常使用“this”代替。另外，请尝试重命名参数。

【讨论】：

YSlow 提示的好电话。我没有意识到脚本会阻止并行下载。

【解决方案3】：

B) 我在快速测试页面上检查了你的内联脚本，它工作正常，所以我建议使用 Firefox 并安装 FireBug 插件来查找问题：

在 Firebug 的“脚本”选项卡中，使用右侧的“监视”窗口插入和检查脚本的某些部分，看看它们会返回什么。
我首先将$ 放在监视窗口中并检查它是否被识别为function()：也许jQuery 没有正确链接
然后将$("a")放入观察窗口并检查它返回的集合是否有正确的数字对应于集合中“a”选择器的项目数
继续运行部分脚本，直到遇到错误

【讨论】：

【解决方案4】：

母版页通常存储在 /Views/Shared/Site.Master 中，而脚本位于 /Scripts 中，因此：

<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>            
<script src="../Scripts/jquery.corner.js" type="text/javascript"></script>

应该是

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.corner.js" type="text/javascript"></script>

但我建议使用助手：

  public static class Helper
    {
        private static string ScriptsRoot = "~/scripts/";

        public static string ScriptUrl (string scriptFile)
        {
            return VirtualPathUtility.ToAbsolute (ScriptsRoot + scriptFile);
        }
    }

然后像这样引用您的脚本：

<script type="text/javascript" src="<%= Helper.ScriptUrl("jquery-1.2.6.min.js") %>"></script>
<script type="text/javascript" src="<%= Helper.ScriptUrl("jquery.corner.js") %>"></script>

【讨论】：