渲染jquery与包含​​脚本MVC

时间:2016-09-29 03:26:46

标签: jquery .net asp.net-mvc razor

脚本通常添加在html文件的表单标题部分中:

'menu' => [
    'MAIN NAVIGATION',
    [
        'text' => 'Blog',
        'url'  => 'admin/blog',
        'permission'  => 'create-post', // Here
    ],
    #code
]

'filters' => [
    #code
    //JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter::class,
    App\MyMenuFilter::class,
],

MVC .NET框架,默认情况下它在底部使用它们,在页脚之后采用以下方式:

<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

问题: 我检查了DOM并添加了它们。使用布局底部的渲染,使jQuery功能像.affix一样工作。但是,如果我在视图的顶部包含相同的两个脚本,它就可以工作。 例如:

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

解决方案

DOM (NOT Work):

<body data-target="#mysidebar" data-spy="scroll">
   <section>
    <div class="container">    
       <div id="mysidebar" class="col-md-3">
       ... Sidebar content
       </div>
       <div class="col-md-9">
       ... Content
       </div>
   </section>
</body>
<footer></footer>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>


DOM (Works):

<body data-target="#mysidebar" data-spy="scroll">
   <script src="/Scripts/jquery-3.1.1.min.js"></script> <-- Added them here too make it work!
   <script src="/Scripts/bootstrap.min.js"></script>
   <section>
    <div class="container">    
       <div id="mysidebar" class="col-md-3">
       ... Sidebar content
       </div>
       <div class="col-md-9">
       ... Content
       </div>
   </section>
</body>
<footer></footer>
<script src="/Scripts/jquery-3.1.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

1 个答案:

答案 0 :(得分:0)

建议在页面底部放置一些scritps以减少加载页面所需的时间,除非在页面顶部需要您的脚本,例如:Modernizer

如果直接包含脚本标记,它之所以有用,很可能是你忘了在BundleConfig中添加它,检查BunddleConfig并确保JQuery包含在正确的版本中,也许它包含在特定的更新软件包时已更改的版本

 public static void RegisterBundles(BundleCollection bundles)
        {
            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"));
        }