ASP.NET MVC5捆绑如何退回到我的托管库，如果谷歌jQueryUI的失败，使用捆绑？

问题描述 投票：1回答：1

我创建一个asp.net MVC应用程序。我创造了我的脚本和样式束和我使用谷歌的CDN每个束。我有两个问题：1。如何和我在哪里创建一个回落的情况下，谷歌的jQuery和jQueryUI的CDN失败？ 2.我一定要创建一个回落的每捆（即对stylebundles为好）？

这是我的bundleConfig.cs：

bundles.Add(new ScriptBundle("~/bundles/jqueryui", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js").Include(
"~/Scripts/jquery-ui-{version}.js"));


        bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval", "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js").Include(
                    "~/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 https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js").Include(
                  "~/Scripts/bootstrap.js"));

        bundles.Add(new StyleBundle("~/Content/css", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css").Include(
 "~/Content/themes/base/core.css",
 "~/Content/themes/base/resizable.css",
 "~/Content/themes/base/selectable.css",
 "~/Content/themes/base/accordion.css",
 "~/Content/themes/base/autocomplete.css",
 "~/Content/themes/base/button.css",
 "~/Content/themes/base/dialog.css",
 "~/Content/themes/base/slider.css",
 "~/Content/themes/base/tabs.css",
 "~/Content/themes/base/datepicker.css",
 "~/Content/themes/base/progressbar.css",
 "~/Content/themes/base/theme.css"));



        BundleTable.EnableOptimizations = true;
        bundles.UseCdn = true;
    }

这是我的layout.cshtml

 <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")


    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

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

jquery asp.net-mvc
1个回答
0
投票

在我看来，它不会使一个很有意义把CDN的一个包，see here。只要确保你使用的是缩小的版本。

见下面的例子，用于将回退：

把引导CSS和Modernizr的在你的HTML的<head>：

<html>
<head>
    /* Referencing bootstrap CSS from CDN */
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    /* Referencing Modernizr from CDN */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

而在你的<body>的底部添加这些JS引用：

<body>
    .
    .
    .

    /* Modernizer fallback */
    <script>if (typeof Modernizr === 'undefined') { document.write('<script src="/Scripts/modernizr-2.8.3.min.js"><\/script>'); }</script>

    /* jQuery CDN and fallback */
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="/Scripts/jquery-3.3.1.min.js"><\/script>');</script>

    /* jQuery UI CDN and fallback */
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
    <script>if (typeof jQuery.ui === 'undefined') { document.write('<script src="/Scripts/jquery-ui.min.js"><\/script>'); }</script>

    /* popper CDN and fallback, this is only needed for bootstrap 4, remove for bootstrap 3 */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script>if (typeof (Popper) === 'undefined') { document.write('<script src="/Script/umd/popper.min.js"><\/script>') }</script>

    /* bootstrap CDN and fallback */
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>window.jQuery.fn.modal || document.write('<script src="/Scripts/bootstrap.min.js"><\/script>')</script>

    /* fallback for bootstrap stylesheet */
    <script>(function ($) { $(function () { if ($('body').css('color') !== 'rgb(33, 37, 41)') { $('head').prepend('<link rel="stylesheet" href="/Content/bootstrap.min.css">'); } }); })(window.jQuery);</script>

    /* jQuery Validate CDN and fallback */
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script>if (typeof $().validate === 'undefined') { document.write('<script src="/Scripts/jquery.validate.min.js"><\/script>'); }</script>
</body>

我还建议让从Bootstrap 3 official page您引导CDN，因为这些的CDN具有integrity和crossorigin属性，这验证了CDN文件的可靠性。（与同为你的jQuery和jQuery.ui），see this for more info。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

更新

如果你想要把CDN在束（？不知道为什么），这是怎么做的，从MS Documentation：

//添加链接的jQuery的CDN

var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

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

这是你如何把它添加到您的网页：

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

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.