jQuery UI CSS 和脚本的包在哪里？它们的具体名称是什么？

Question

我正在尝试让我的 ASP.NET MVC 项目准备好使用 JQuery UI，并使用了博客 post here.

我遵循了明确的步骤，但不知道这个：

"...还包括 jQuery UI CSS 和脚本

的捆绑包

"bundles for jQuery UI CSS and Scripts"到底是什么？

这是我所做的：

NuGot 参考文献 ("jQuery UI (Combined Library)")

将此添加到 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"));

从这里更改 _Layout.cshtml：

<!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)

...为此：

<!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>

项目还在运行，页面看起来一样（第一部分有点出乎意料，但一旦是这样，第二部分是意料之中的，因为我没有添加任何jQuery UI-特定代码），但恐怕我的错误是“...还包括 jQuery UI CSS 和脚本的捆绑包”是最终会用驴子咬我，但我不只是 what/where 他们是（他们的名字，就是这样）。

Answer 1

您已经包含了jQuery脚本和CSS包。您添加到 BundleConfig.cs 的行创建了两个包。一个 ScriptBundle 的资源位置（名称）“~/bundles/jqueryui”包含 jQuery UI 脚本，另一个 StyleBundle 的资源位置（ name) "~/Content/themes/base/css" 包含所有 jQuery UI CSS 文件。

行：

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

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

告诉 Razor 将包含在各个包中的文件的捆绑（串联）内容输出为 script，或带有 src 链接到的 script 标签服务器上的一个位置，Asp.Net MVC 系统在该位置提供一个文件，其中包含捆绑包中包含的文件的内容。

在调试模式下，它将默认提供 javascript 包作为单独的未缩小文件，以便于脚本调试。在生产模式下，它将脚本连接 minifies/uglifies 到单个 javascript 文件中以便于调试。

jQuery UI CSS 和脚本的包在哪里？它们的具体名称是什么？

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

asp.net-mvc

bundle

jquery-ui

razor

nuget