如何在部分视图中使用 jquery asp.net mvc 4答案

【问题标题】：How to use jquery in partial view asp.net mvc 4如何在部分视图中使用 jquery asp.net mvc 4
【发布时间】：2014-02-21 08:01:17
【问题描述】：

我正在开发 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 标记中，但现在当我调用此部分视图时遇到问题

未捕获的引用错误：$ 未定义

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

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

谢谢

【问题讨论】：

你是对的，这就是问题所在。只需将@System.Web.Optimization.Scripts.Render("~/jquery") 移至<head> 即可。
@AndreiV 有没有其他方法可以解决这个问题？
@AskQuestion 你总是可以将javascript逻辑放在一个单独的文件中，并在jquery初始化之后包含该文件。
在声明之前真的不可能使用某些东西。这是编程中的一般规则（某些“自动声明”变量的语言除外）。没有其他方法可以使用它。

标签： jquery asp.net-mvc asp.net-mvc-4

【解决方案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 文件需要在使用它们的控件/扩展之前加载......所以它们总是需要位于布局文件的顶部......这很古怪，但这就是生活...

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

编辑

如果您点击我提到的链接，它会显示如何在局部视图中定义某种部分，然后在 _Layout 中呈现这些脚本。

【讨论】：

不，我只提到了一种情况。我也在其他页面中使用部分视图，所以我必须将所有脚本从部分视图移动到主页。这对我来说将是一项广泛的工作
这就是我建议第二个答案的原因，即创建一个帮助程序，允许您在局部视图中包含脚本“部分”。查看stackoverflow.com/questions/5433531/…

【解决方案4】：

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

【讨论】：

您不能在 PartialViews 中使用部分
这不起作用，例如，如果在你的_Layout 的<head> 中写$(document).ready(function(){})。然后，您将引用 尚未定义的内容。