Question

我正在研究MVC-3 Web应用程序。现在我将其更改为mvc4并将jquery文件放在_Layout页面

的末尾

<html>
<head>
</head>
<body>
    @Html.Partial("_Menu")
    @RenderBody()
    @System.Web.Optimization.Scripts.Render("~/jquery")
</body>
</html>

我在部分视图“_Menu”中使用了一些jquery，在Mvc 3中，这工作正常，因为我将jquery文件放在head标签中，但现在我在调用此局部视图时遇到问题

未捕获的ReferenceError：$未定义

我认为这个问题是由于jquery文件正在页面末尾加载。我想到的解决方案是在头标记上加载jquery文件，但我不想这样做。

建议我任何其他解决方案。我如何在局部视图中使用jquery。

谢谢

Answer 1

您不能在部分视图中使用Section，但您可以编写扩展来执行相同的操作：

   public static class ScriptBundleManager
{

    private const string Key = "__ScriptBundleManager__";

    /// <summary>
    /// Call this method from your partials and register your script bundle.
    /// </summary>
    public static void Register(this HtmlHelper htmlHelper, string scriptBundleName)
    {
        //using a HashSet to avoid duplicate scripts.
        var set = htmlHelper.ViewContext.HttpContext.Items[Key] as HashSet<string>;
        if (set == null)
        {
            set = new HashSet<string>();
            htmlHelper.ViewContext.HttpContext.Items[Key] = set;
        }

        if (!set.Contains(scriptBundleName))
            set.Add(scriptBundleName);
    }

    /// <summary>
    /// In the bottom of your HTML document, most likely in the Layout file call this method.
    /// </summary>
    public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
    {
        var set = htmlHelper.ViewContext.HttpContext.Items[Key] as HashSet<string>;

        return set != null ? Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\"></script>", set.ToArray()) : MvcHtmlString.Empty;
    }


}

然后在_Layout文件中，在脚本包结束后：

@Html.RenderScripts()

然后在局部视图的顶部：

@{Html.Register("~/bundles/group_of_relevant_js_files_for_partial_view");}

然后在定义jQuery之后加载所有必需的功能。

但是：请注意 Kendo js文件需要在使用它们的控件/扩展名之前加载...所以它们总是需要位于布局文件的顶部...这很古怪，但这就是生活... 的

Answer 2

如果您将jQuery代码放在外部脚本文件中，那么您可以利用defer元素的script属性，如下所示：

<script type="text/javascript" src="<path to your .js file>" defer></script>

因此，您的部分视图将包含此脚本标记，并且“defer”会阻止浏览器运行脚本，直到页面加载完毕为止，这意味着jQuery库在执行时将存在。

Answer 3

如果你总是在_Layout文件中加载菜单并且jQuery应该总是在那里，那么你可以在底部的_Layout页面中编写jQuery代码。

如果您的jQuery使用_Menu中的模型，那么您可以创建一个帮助器，如this

修改

如果你按照我提到的链接，它会显示如何在局部视图中定义某种部分，然后在_Layout中渲染这些脚本。

Answer 4

在布局文件的末尾添加“脚本”部分，并在包含jQuery之后添加。然后，始终将脚本放入此部分。就是这样。

如何在局部视图asp.net mvc 4中使用jquery

4 个答案: