如何在mvc 5内容页面上使用cdn javascript文件 [英] how to use cdn javascript files on mvc 5 content Pages

查看：60
本文介绍了如何在mvc 5内容页面上使用cdn javascript文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好





我使用的是我在mvc 5应用程序中从themeforest购买的模板，everthing工作正常，除非每当我想要包含一些未附带模板的外部javascript文件，然后javascript将不会再看到模板附带的javascript！下面是我的代码：



BundleConfig.cs：

Hello


I am using a template i bought from themeforest in my mvc 5 application, everthing is working fine except whenever i want to include some external javascript files that didnt come with the template, then the javascript would not see the javascript that came with the template anymore! below is my code:

BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
    {

        bundles.Add(new ScriptBundle("~/bundles/Javascript",
                       @"//code.jquery.com/jquery-1.10.2.js"
                       ).Include(
                        "~/Scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/Javascript",
                       @"//code.jquery.com/ui/1.11.4/jquery-ui.js"
                       ).Include(
                        "~/Scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").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 http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
            "~/Content/themes/base/all.css"));          

        bundles.Add(new ScriptBundle("~/bundles/Javascript").Include(
            "~/DataTables-1.10.10/media/js/jquery.js",
            "~//code.jquery.com/jquery-1.10.2.js",
            "~/DataTables-1.10.10/media/js/jquery.js",
            "~/DataTables-1.10.10/media/js/jquery.dataTables.js"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/accordion.css",
            "~/Content/themes/base/all.css",               
            "~/Content/themes/base/base.css",                
            "~/Content/themes/base/datepicker.css",
            "~/Content/themes/base/dialog.css",               
            "~/Content/themes/base/tabs.css",               
            "~/Content/themes/base/tooltip.css"));

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





_Layout.schtml：





_Layout.schtml:

<pre lang="HTML">
<head>
    <title>Farm Management System</title>
    <!-- start: META -->
    <meta charset="utf-8" />
    <!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- end: META -->


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




    @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/JavaScript")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
        $(function() {
            $(".jqueryui-marker-datepicker").datepicker({
                dateFormat: "dd/mm/yy",
                changeYear: true,
                showOn: "button"
            }).css("display", "inline-block")
                .next("button").button({
                    icons: { primary: "ui-icon-calendar" },
                    label: "Select a date",
                    text: false
                });
        });
    </script>



    @RenderSection("Scripts", required : false)



    <!-- start: MAIN CSS -->

    <link rel="stylesheet" href="~/assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/plugins/font-awesome/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/fonts/style.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/css/main.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/css/main-responsive.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/plugins/iCheck/skins/all.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/plugins/bootstrap-colorpalette/css/bootstrap-colorpalette.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css" type="text/css" />
    <link rel="stylesheet" href="~/assets/css/theme_light.css" type="text/css" id="skin_color"/>
    <link rel="stylesheet" href="~/assets/css/print.css" type="text/css" media="print" />



    <!--[if IE 7]>
        <link rel="stylesheet" href="~/assets/plugins/font-awesome/css/font-awesome-ie7.min.css">
    <![endif]-->
    <!-- end: MAIN CSS -->

    <link rel="shortcut icon" href="favicon.ico" />


    <!-- start: MAIN JAVASCRIPTS -->
    <!--[if lt IE 9]>
        <script src="~/assets/plugins/respond.min.js"></script>
        <script src="~/assets/plugins/excanvas.min.js"></script>
        <script type="text/javascript" src="~/assets/plugins/jQuery-lib/1.10.2/jquery.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js")"></script>
    <!--<![endif]-->
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap/js/bootstrap.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/blockUI/jquery.blockUI.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/iCheck/jquery.icheck.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/less/less-1.5.0.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-cookie/jquery.cookie.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/assets/js/main.js")"></script>


    <!-- end: MAIN JAVASCRIPTS -->

    <script>
        jQuery(document).ready(function () {
            Main.init();
            Index.init();
            FormElements.init();
            FormValidator.init();
            UIButtons.init();
            //TableData.init();
        });
    </script>


    @RenderSection("CSS", required : false)
    @RenderSection("JavaScript", required : false)



</head>





Content.cshtml:





Content.cshtml:

@section JavaScript
{
    <!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
            $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
        });
    </script>
    <!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
}

@section CSS
     {
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes /smoothness/jquery-ui.css">
}







Now on this page, the side menu and menu bar items from _Layout Page no longer working, please, i will appreciate if anyone could show me how to do it right. Thanks




Now on this page, the side menu and menu bar items from _Layout Page no longer working, please, i will appreciate if anyone could show me how to do it right. Thanks

推荐答案

(function() {


(\".jqueryui-marker-datepicker\").datepicker({
dateFormat: \"dd/mm/yy\",
changeYear: true,
showOn: \"button\"
}).css(\"display\", \"inline-block\")
.next(\"button\").button({
icons: { primary: \"ui-icon-calendar\" },
label: \"Select a date\",
text: false
});
}）;
</script>



@RenderSection(\"Scripts\", required : false)



<!-- start: MAIN CSS -->

<link rel=\"stylesheet\" href=\"~/assets/plugins/bootstrap/css/bootstrap.min.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/plugins/font-awesome/css/font-awesome.min.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/fonts/style.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/css/main.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/css/main-responsive.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/plugins/iCheck/skins/all.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/plugins/bootstrap-colorpalette/css/bootstrap-colorpalette.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"~/assets/css/theme_light.css\" type=\"text/css\" id=\"skin_color\"/>
<link rel=\"stylesheet\" href=\"~/assets/css/print.css\" type=\"text/css\" media=\"print\" />



<!--[if IE 7]>
<link rel=\"stylesheet\" href=\"~/assets/plugins/font-awesome/css/font-awesome-ie7.min.css\">
<![endif]-->
<!-- end: MAIN CSS -->

<link rel=\"shortcut icon\" href=\"favicon.ico\" />


<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src=\"~/assets/plugins/respond.min.js\"></script>
<script src=\"~/assets/plugins/excanvas.min.js\"></script>
<script type=\"text/javascript\" src=\"~/assets/plugins/jQuery-lib/1.10.2/jquery.min.js\"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js\")\"></script>
<!--<![endif]-->
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/bootstrap/js/bootstrap.min.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/bootstr ap-hover-dropdown/bootstrap-hover-dropdown.min.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/blockUI/jquery.blockUI.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/iCheck/jquery.icheck.min.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/less/less-1.5.0.min.js\")\"></script>
<script type=\"text/javascrip t\" src=\"@Url.Content(\"~/assets/plugins/jquery-cookie/jquery.cookie.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js\")\"></script>
<script type=\"text/javascript\" src=\"@Url.Content(\"~/assets/js/main.js\")\"></script>


<!-- end: MAIN JAVASCRIPTS -->

<script>
jQuery(document).ready(function () {
Main.init();
Index.init();
FormElements.init();
FormValidator.init();
UIButtons.init();
//TableData.init();
});
</script>


@RenderSection(\"CSS\", required : false)
@RenderSection(\"JavaScript\", required : false)



</head>
(".jqueryui-marker-datepicker").datepicker({ dateFormat: "dd/mm/yy", changeYear: true, showOn: "button" }).css("display", "inline-block") .next("button").button({ icons: { primary: "ui-icon-calendar" }, label: "Select a date", text: false }); }); </script> @RenderSection("Scripts", required : false) <!-- start: MAIN CSS --> <link rel="stylesheet" href="~/assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="~/assets/plugins/font-awesome/css/font-awesome.min.css" type="text/css" /> <link rel="stylesheet" href="~/assets/fonts/style.css" type="text/css" /> <link rel="stylesheet" href="~/assets/css/main.css" type="text/css" /> <link rel="stylesheet" href="~/assets/css/main-responsive.css" type="text/css" /> <link rel="stylesheet" href="~/assets/plugins/iCheck/skins/all.css" type="text/css" /> <link rel="stylesheet" href="~/assets/plugins/bootstrap-colorpalette/css/bootstrap-colorpalette.css" type="text/css" /> <link rel="stylesheet" href="~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css" type="text/css" /> <link rel="stylesheet" href="~/assets/css/theme_light.css" type="text/css" id="skin_color"/> <link rel="stylesheet" href="~/assets/css/print.css" type="text/css" media="print" /> <!--[if IE 7]> <link rel="stylesheet" href="~/assets/plugins/font-awesome/css/font-awesome-ie7.min.css"> <![endif]--> <!-- end: MAIN CSS --> <link rel="shortcut icon" href="favicon.ico" /> <!-- start: MAIN JAVASCRIPTS --> <!--[if lt IE 9]> <script src="~/assets/plugins/respond.min.js"></script> <script src="~/assets/plugins/excanvas.min.js"></script> <script type="text/javascript" src="~/assets/plugins/jQuery-lib/1.10.2/jquery.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script type="text/javascript" src="@Url.Content("~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js")"></script> <!--<![endif]--> <script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap/js/bootstrap.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/blockUI/jquery.blockUI.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/iCheck/jquery.icheck.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/less/less-1.5.0.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/jquery-cookie/jquery.cookie.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/plugins/bootstrap-colorpalette/js/bootstrap-colorpalette.js")"></script> <script type="text/javascript" src="@Url.Content("~/assets/js/main.js")"></script> <!-- end: MAIN JAVASCRIPTS --> <script> jQuery(document).ready(function () { Main.init(); Index.init(); FormElements.init(); FormValidator.init(); UIButtons.init(); //TableData.init(); }); </script> @RenderSection("CSS", required : false) @RenderSection("JavaScript", required : false) </head>





Content.cshtml:





Content.cshtml:

@section JavaScript
{
    <!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>


(function () {


这篇关于如何在mvc 5内容页面上使用cdn javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆