Where are the bundles for jQuery UI CSS and Scripts and what exactly are they named?

问题

I'm trying to get my ASP.NET MVC project ready to use JQuery UI, and used the blog post here.

I followed the explicit steps, but don't know about this one:

"...also include the bundles for jQuery UI CSS and Scripts"

Just what are the "bundles for jQuery UI CSS and Scripts"?

This is what I've done:

NuGot the References ("jQuery UI (Combined Library)")

Added this to the bottom of BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
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"));

Changed _Layout.cshtml from this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Platypus</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

<script type="text/javascript">
    var appInsights=window.appInsights||function(config){
        function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
    }({
        instrumentationKey:"6fc2e00b-8657-47e9-841c-e033cbac3789"
    });

    window.appInsights=appInsights;
    appInsights.trackPageView();
</script>

@RenderBody()

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

...to this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Platypus</title>
    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
        var appInsights=window.appInsights||function(config){
            function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s=u.createElement(o),i,f;for(s.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace","Ajax"];i.length;)r("track"+i.pop());return r("setAuthenticatedUserContext"),r("clearAuthenticatedUserContext"),config.disableExceptionTracking||(i="onerror",r("_"+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t["_"+i](config,r,u,e,o),s}),t
        }({
            instrumentationKey:"6fc2e00b-8657-47e9-841c-e033cbac3789"
        });

        window.appInsights=appInsights;
        appInsights.trackPageView();
    </script>
</head>
<body>
    <div class="container body-content">
        @RenderBody()
    </div>

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

The project still runs, and the page looks the same (the first part of which was slightly unexpected, but once that was the case, the second part was to be expected, as I haven't added any jQuery UI-specific code yet), but I'm afraid my falure to "...also include the bundles for jQuery UI CSS and Scripts" is going to end up biting me in the donkey, but I don't just what/where they are (what they are named, that is).

回答1:

You have included the jQuery script and CSS bundles. The lines you added to the BundleConfig.cs created two bundles. One a ScriptBundle with the resource location (name) "~/bundles/jqueryui" that contains the jQuery UI script, the other a StyleBundle with the resource location (name) "~/Content/themes/base/css" that contains all the jQuery UI CSS files.

The lines:

@Styles.Render("~/Content/themes/base/css")

@Scripts.Render("~/bundles/jqueryui")

Tells Razor to either output the bundled (concatenated) contents of the files included in the respective bundles as a script, OR a script tag with a src that links to a location on your server where the Asp.Net MVC system serves up a file that contains the contents of the files included in the bundle.

In debug mode, it will default serve up javascript bundles as individual un-minified files for easier script debugging. In production mode, it concatenates and minifies/uglifies the scripts into a single javascript file for easier debugging.

来源：https://stackoverflow.com/questions/37127017/where-are-the-bundles-for-jquery-ui-css-and-scripts-and-what-exactly-are-they-na

标签

asp.net-mvc

jquery-ui

razor

nuget

bundle