<webopt:BundleReference>将ScriptBundle呈现为css链接元素

<webopt:BundleReference> renders ScriptBundle as css link elements

本文关键字：链接 元素 css webopt BundleReference ScriptBundle      更新时间：2023-09-26

我正在尝试使用新的 .net 4.5 网络表单控件在我的 materpage 中呈现捆绑包。我在我的 BundleConfig 中定义了一个脚本包.cs如下所示：

bundles.Add(new ScriptBundle("~/bundles/app").Include(
    "~/Scripts/underscore.js",
    "~/Scripts/backbone.js",
    "~/Scripts/app/app.js",
    "~/Scripts/app.validator.js",
    "~/Scripts/app/views/home.js",
    "~/Scripts/app/views/about.js",
    "~/Scripts/app/views/contact.js",
    "~/Scripts/app/controls/hello.js",
    "~/Scripts/app/init.js"));

然后，我尝试使用新的 <webopt:BundleReference> 控件呈现捆绑包：

<webopt:BundleReference ID="AppBundle" runat="server" Path="~/bundles/app"  />

但是当页面呈现时，输出是<link>标记，而不是标记：

<link href="/Scripts/underscore.js" rel="stylesheet"/>
<link href="/Scripts/backbone.js" rel="stylesheet"/>
<link href="/Scripts/app/app.js" rel="stylesheet"/>
<link href="/Scripts/app/views/home.js" rel="stylesheet"/>
<link href="/Scripts/app/views/about.js" rel="stylesheet"/>
<link href="/Scripts/app/views/contact.js" rel="stylesheet"/>
<link href="/Scripts/app/controls/hello.js" rel="stylesheet"/>
<link href="/Scripts/app/init.js" rel="stylesheet"/>

此控件是否仅用于呈现样式？还是我做错了什么？如何使用 webopt 控件而不是<%: Scripts.Render() %>语法呈现脚本包？

我使用的是VS2012和.Net 4.5。 我确实使用 webopt 控件。我渲染如下：

<head>
  <asp:PlaceHolder runat="server">
    <%: Styles.Render("~/Content/MainContentCSS") %>
    <%: Scripts.Render("~/bundles/jqueryPlus") %>
  </asp:PlaceHolder>
</head>

其中我的 css 和 js 也在 BundleConfig 中定义.vb为：

bundles.Add(New ScriptBundle("~/bundles/jqueryPlus").Include(
            "~/Scripts/modernizr-{version}.js",
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/ig_ui/js/infragistics.js",
            "~/Site.Master.js"))
bundles.Add(New StyleBundle("~/Content/MainContentCSS").Include(
                  "~/Content/Site.css",
                  "~/Content/Site-overrides.min.css",
                  "~/Content/rs-custom-controls.min.css",
                  "~/ig_ui/css/structure/infragistics.css",
                  "~/Examiner/Claim.master.min.css"))

并呈现为： 

<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/Site-overrides.min.css" rel="stylesheet"/>
<link href="/Content/rs-custom-controls.min.css" rel="stylesheet"/>
<link href="/ig_ui/css/structure/infragistics.css" rel="stylesheet"/>
<link href="/Examiner/Claim.master.min.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery-ui-1.11.2.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/ig_ui/js/infragistics.js"></script>
<script src="/Site.Master.js"></script>
相关文章：