如何在asp.net mvc 4中使用jquery

I was working on MVC-3 web application. Now i changed it to mvc4 and put the jquery files in end of _Layout page

我正在开发MVC-3 web应用程序。现在我将它更改为mvc4，并将jquery文件放在_Layout页面的末尾

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

I have used some jquery in Partial View "_Menu", in Mvc 3 this is working fine because i put jquery files in head tag but now i am facing issue when i call this partial view

我在部分视图“_Menu”中使用了一些jquery，在Mvc 3中这很好，因为我将jquery文件放在head标签中，但是现在我调用这个部分视图时遇到了问题

Uncaught ReferenceError: $ is not defined

未捕获的ReferenceError: $没有定义

I think this problem is due to jquery files are loading at the end of the page. Solution that comes in my mind is to load jquery files on head tag but i don't want to do this.

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

Suggest me any other solution. How can i use jquery in partial view.

请给我其他的解决办法。如何在局部视图中使用jquery。

Thank You

谢谢你！

4 个解决方案

#1

You can't use Section in partial views, but you can write an extension to do the same:

你不能在部分视图中使用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;
    }


}

Then in _Layout file, after the end of your script bundles:

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

@Html.RenderScripts()

Then at the top in your partial view:

然后在你的部分观点的顶部:

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

Then all your required functionality will load after jQuery is defined.

然后，在定义jQuery之后，所有需要的功能都将加载。

However: note that Kendo js files need to be loaded prior to use of their controls/extensions...so they always need to be at the top of your layout file...that's wacky, but that's life...

但是:注意，在使用它们的控件/扩展之前，需要加载Kendo js文件……所以他们总是需要在你的布局文件的顶部……这很奇怪，但这就是生活……

#2

If you put the jQuery code in an external script file then you can take advantage of the defer attribute for the script element as follows:

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

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

So your partial view would include this script tag and 'defer' stops the browser from running the script until after the page has loaded, which means that the jQuery libraries will exist when it executes.

因此，您的部分视图将包含这个脚本标记，“delay”将阻止浏览器在页面加载之后运行脚本，这意味着在执行时jQuery库将会存在。

#3

if you always load the menu in the _Layout file and the jQuery should always be there, then you could just write the jQuery code in the _Layout page at the bottom.

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

If your jQuery uses the model from the _Menu, then you could create a helper like this

如果jQuery使用_Menu中的模型，那么可以创建这样的助手

EDIT

编辑

If you follow the link I mentioned, it shows how to define some sort of section in your partial view, then rendering those scripts in the _Layout.

如果您遵循我提到的链接，它将显示如何在您的部分视图中定义某种类型的部分，然后在_Layout中呈现这些脚本。

#4

-3

Add section "Scripts" at the end of your Layout file and after including jQuery. Then, always put your scripts into this section. That's it.

在布局文件的末尾和包含jQuery之后添加“脚本”部分。然后，一定要把你的脚本放在这一部分。就是这样。

#1