Question

我有jQuery，我希望在我的视图中加载Bootstrap包，我已将它们添加到我的bundlesconfig并将其添加到@script.render中的我的视图中，但是我的脚本文件显然没有呈现为我甚至无法使用bootstrap标签。

束

using System.Web;
using System.Web.Optimization;

namespace XXXX
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/bootstrap.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
    <body>
        <div>
            <p>This is a test</p>
        </div>
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

查看

@{
    ViewBag.Title = "Search";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="jumbotron">
    <div class="container">
        <h1>Find</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

呈现HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>


</head>
<body>
    <div>


<div class="jumbotron">
    <div class="container">
        <h1>Find</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</body>
</html>

Answer 1

重要的是要注意Bundle和Minification是不同的过程。 ASP.Net网站将其解释为：捆绑 Bundling是ASP.NET 4.5中的一项新功能，可以轻松地将多个文件合并或捆绑到一个文件中。您可以创建CSS，JavaScript和其他捆绑包。更少的文件意味着更少的HTTP请求，并且可以提高首页加载性能。缩小 Minification对脚本或css执行各种不同的代码优化，例如删除不必要的空格和注释以及将变量名缩短为一个字符。请考虑以下JavaScript函数。

回到你的问题：ASP.Net MVC 4 Bundles有忽略列表。而.min 扩展名包含在忽略列表中。要覆盖忽略列表：

bundles.IgnoreList.Clear();

为什么我的捆绑包没有加载，即使它们已被包含在BundlesConfig中？

1 个答案: