如何使用 ASP.NET 4.51 加载需要 jQuery 的单个 .js 文件？答案

【问题标题】：How do I load an individual .js file that requires jQuery with ASP.NET 4.51?如何使用 ASP.NET 4.51 加载需要 jQuery 的单个 .js 文件？
【发布时间】：2015-08-17 18:40:23
【问题描述】：

我的网站的正常模式是每个页面的功能都有一个 javascript 文件。并让母版页加载所需的 jQuery 和 jQuery UI 文件。

我刚开始在 VS2013 中使用 ASP.NET 4.5 ......它内置了一个很棒的捆绑/缩小功能。但是，当我将 page.js“添加”到 page.aspx 时......它无法运行因为母版页（包含 jquery）中的“捆绑”javascript 文件在我的 page.js 文件之后加载。

我考虑将所有单个页面加载到包中，但这需要我映射所有表单字段等，因为现在将加载我所有的单个 javascript 文件。

我还认为这是非常低效的，因为 jquery 将尝试将事件绑定到不存在的 DOM 对象（因为 page.js、page2.js、page4.js 等将在捆绑中加载而浏览器在 page3.js)

这样做的正确方法是什么？

我的另一个选择是消除捆绑，但我想利用单个 js/css 文件。

想法？

【问题讨论】：

您可以选择捆绑文件的去向吗？也许您可以在您的<body> 标记顶部附近或<head> 标记中包含bundle.js。
在以前的 ASP.NET 版本中，它在 site.master 页面中有一个 headcontent 部分，但现在只有内容空间。

标签： javascript jquery asp.net bundling-and-minification

【解决方案1】：

因此，在我的标签底部添加 HeadContent 部分后，jquery.js 文件似乎是从 Scriptmanager 而不是包呈现的（即使它已在 BundleConfig.cs 中注册）

请参阅下面的 Scriptmanager 默认是如何放置在标签中的。我可以把它移到头部吗？这是默认的 asp.net site.master 布局垃圾吗？我不敢相信其他人没有遇到过这个问题。

所以，我的 page.js 文件现在位于modernizer 捆绑文件下方的 headcontent 输出中（其中包含谁知道什么，因为看起来很多 js 文件仍然从 scriptmanager 逐行呈现）。但是 Scriptmanager 将 jquery 放在我的 headcontent 输出下方。

<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website Title - <%: Page.Title %></title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Path="~/Scripts/site.js" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />

                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

【讨论】：

我更新了上面的答案，我认为 Ans 2 是你的解决方案。

【解决方案2】：

Ans 1) 当您的 jquery 来自 bundle 或直接链接到母版页时：

您可以在捆绑的 js 之后使用 ContentPlaceHolder 来呈现您的 page.js。请确保在捆绑线下方添加 ContentPlaceHolder。

1) 在您的母版页中

<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title></title>

    <%: System.Web.Optimization.Scripts.Render("~/Bundles/js") %>

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

2) 在您的页面中

<asp:Content ID="Content1" ContentPlaceHolderID="cphPageJs" runat="server">
    <script src="/js/myPage.js"></script>
</asp:Content>

Ans 2) 当 jquery 从 ScriptManager 渲染时：

在这种情况下，您需要在内容页面中使用 ScriptManagerProxy。确保在 Content 中使用此控件，并且在 MasterPage 中的 ScriptManager 之后添加 ContentPlaceHolder。

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManagerProxy ID="smp" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/js/myTest.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
</asp:Content>

【讨论】：

您好 Jibboo，如果您认为这是答案，请标记。谢谢。
我想你忘了附上什么？
NiraVyas - 查看我的其他评论/答案（作为单独的答案发布在上方或下方）