堆栈内存溢出
  简体   繁体   English

在IIS 8上部署ASP.Net MVC应用程序时未呈现CSS和JS文件（Windows 8）

[英]CSS & JS files not rendered when deploy of ASP.Net MVC application on IIS 8 (Windows 8)

 原文  2015-04-24 13:23:50  6   3    javascript/ css/ asp.net-mvc-4/ razor/ bundling-and-minification

问题描述

I'm having an issue when deploying my Asp.NET MVC 5 web application on a remote IIS 8 ! 在远程IIS 8上部署我的Asp.NET MVC 5 Web应用程序时遇到问题！ when i'm starting the server, the application works well, but no css or js file is working ! 当我启动服务器时，应用程序运行良好，但没有css或js文件正常工作！

my local machine : 我的本地机器： 在此输入图像描述

my remote machine : 我的远程机器：

在此输入图像描述

my view when I click on view page source (in the browser) : 我单击视图页面源（在浏览器中）时的视图： 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log in - My MVC Admin Template</title>
    <link href="/Test/Deploy/Content/Theme?v=A1Wwh5B5yTT6Q-34hA0bU7wzaNpIMgCZT8xJ-IAWWVY1" rel="stylesheet"/>

    <script src="/Test/Deploy/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>


 </head>
<body class="bootstrap-admin-with-small-navbar">
<div class="container">
    <div class="row">
     <div class="row">
       <form action="/Test/Deploy/" class="bootstrap-admin-login-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="C7q6oci5GoiOMjIeCGgn9-U4lMlx54WJz8117lyBbFcbDak6TzJE2z3kKeBkvyJTJxg6viMGh8dOxCUV2qUP87bZBWyXgMsx3g9Tozmxoc41" />        
        <h1>Login</h1>
         <div class="form-group">
            <input class="form-control" type="text" name="Email" placeholder="Email">
             <span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
             </div>
             <div class="form-group">
        <input class="form-control" type="password" name="Password" placeholder="Password">
        <span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <div>
            <div class="checkbox">
                <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true" /><input name="RememberMe" type="hidden" value="false" />
                <label for="RememberMe">Remember me?</label>
            </div>
        </div>
    </div>
    <button class="btn btn-lg btn-primary" type="submit">Submit</button>
  </form>
   </div>
    </div>
    <div class="row">
        <hr>
        <footer role="contentinfo">
            <p>&copy;  2015 -  <a href="" target="_blank">Test</a></p>
        </footer>
    </div>
</div>

<script src="/Test/Deploy/bundles/jquery?v="></script>

<script src="/Test/Deploy/bundles/bootstrap?v=a0JlrK3HWJYO4CANWtnjZQ6r-FHTgFewh3ItuNGmfr41"></script>


<script src="/Test/Deploy/bundles/jqueryval?v=NOVQDySGO89wzMzO5x7mWS4C_uAdynpZe_Lk2y-xEM41"></script>



<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-45396411-1', 'azurewebsites.net');
    ga('send', 'pageview');

</script>

my BundleConfig.cs : 我的BundleConfig.cs： 

    public class BundleConfig
{
    public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
    {
        if (ignoreList == null)
            throw new ArgumentNullException("ignoreList");
        ignoreList.Ignore("*.intellisense.js");
        ignoreList.Ignore("*-vsdoc.js");
        ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
        //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
        ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
    }

    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();
        AddDefaultIgnorePatterns(bundles.IgnoreList);
        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/jquery").Include(
            "~/Scripts/jquery-{version}.js"));

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

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/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/twitter-bootstrap-hover-dropdown.js"
            ));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/Theme/base/css").Include(
            "~/Content/Theme/base/jquery.ui.core.css",
            "~/Content/Theme/base/jquery.ui.resizable.css",
            "~/Content/Theme/base/jquery.ui.selectable.css",
            "~/Content/Theme/base/jquery.ui.accordion.css",
            "~/Content/Theme/base/jquery.ui.autocomplete.css",
            "~/Content/Theme/base/jquery.ui.button.css",
            "~/Content/Theme/base/jquery.ui.dialog.css",
            "~/Content/Theme/base/jquery.ui.slider.css",
            "~/Content/Theme/base/jquery.ui.tabs.css",
            "~/Content/Theme/base/jquery.ui.datepicker.css",
            "~/Content/Theme/base/jquery.ui.progressbar.css",
            "~/Content/Theme/base/jquery.ui.theme.css"));

        //Calendar css file
        bundles.Add(new StyleBundle("~/Content/fullcalendarcss").Include(
            "~/Content/themes/jquery.ui.all.css",
            "~/Content/fullcalendar.css"));

        //Calendar Script file
        bundles.Add(new ScriptBundle("~/bundles/fullcalendarjs").Include(
            "~/Scripts/jquery-ui-1.10.4.min.js",
            "~/Scripts/fullcalendar.min.js"));

        bundles.Add(new ScriptBundle("~/bundles/vendors").Include(
            "~/Content/Theme/vendors/uniform/jquery.uniform.js"
            , "~/Content/Theme/vendors/chosen.jquery.js"
            , "~/Content/Theme/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/wysihtml5.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/core-b3.js"
            , "~/Content/Theme/vendors/twitter-bootstrap-wizard/jquery.bootstrap.wizard-for.bootstrap3.js"
            , "~/Content/Theme/vendors/boostrap3-typeahead/bootstrap3-typeahead.js"
            , "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart.js"
            , "~/Content/Theme/vendors/ckeditor/ckeditor.js"
            , "~/Content/Theme/vendors/tinymce/js/tinymce/tinymce.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/wysihtml5.js"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/javascripts/bootstrap-wysihtml5/core-b3.js"
            , "~/Content/Theme/vendors/jGrowl/jquery.jgrowl.js"
            , "~/Content/Theme/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"
            , "~/Content/Theme/vendors/sparkline/jquery.sparkline.js"
            , "~/Content/Theme/vendors/tablesorter/js/jquery.tablesorter.js"
            , "~/Content/Theme/vendors/flot/jquery.flot.js"
            , "~/Content/Theme/vendors/flot/jquery.flot.selection.js"
            , "~/Content/Theme/vendors/flot/jquery.flot.resize.js"
            , "~/Content/Theme/vendors/fullcalendar/fullcalendar.js"
            ));

        bundles.Add(new StyleBundle("~/Content/Theme").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/css/bootstrap-admin-theme.css",
            "~/Content/Theme/css/site.css"));

        bundles.Add(new StyleBundle("~/Content/Vendors").Include(
            "~/Content/Theme/vendors/bootstrap-datepicker/css/datepicker.css"
            , "~/Content/Theme/css/datepicker.fixes.css"
            , "~/Content/Theme/vendors/uniform/themes/default/css/uniform.default.min.css"
            , "~/Content/Theme/css/uniform.default.fixes.css"
            , "~/Content/Theme/vendors/chosen.min.css"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/stylesheets/bootstrap-wysihtml5/core-b3.css"
            , "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart.css"
            , "~/Content/Theme/vendors/easypiechart/jquery.easy-pie-chart_custom.css"
            ,
            "~/Content/Theme/vendors/bootstrap-wysihtml5-rails-b3/vendor/assets/stylesheets/bootstrap-wysihtml5/core-b3.css"
            , "~/Content/Theme/vendors/jGrowl/jquery.jgrowl.css"
            , "~/Content/Theme/vendors/bootstrap-datepicker/css/datepicker.css"
            , "~/Content/Theme/vendors/fullcalendar/fullcalendar.css"));
    }
}

my login page : 我的登录页面： 

@model LoginViewModel
@{
  ViewBag.Title = "Log in";
 }

 <div class="row">
     @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "bootstrap-admin-login-form" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <h1>Login</h1>
    <div class="form-group">
        <input class="form-control" type="text" name="Email" placeholder="Email">
        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
    </div>
    <div class="form-group">
        <input class="form-control" type="password" name="Password" placeholder="Password">
        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
    </div>
    <div class="form-group">
        <div>
            <div class="checkbox">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>
        </div>
    </div>
    <button class="btn btn-lg btn-primary" type="submit">Submit</button>
}
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
 }

in my Web.Config file i put this: 在我的Web.Config文件中我把它： 

 <system.webServer>
   <modules runAllManagedModulesForAllRequests="true">
     <remove name="BundleModule" />
     <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
     <remove name="FormsAuthentication" />
     <remove name="ApplicationInsightsWebTracking" />
     <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Extensibility.Web.RequestTracking.WebRequestTrackingModule, Microsoft.ApplicationInsights.Extensibility.Web" preCondition="managedHandler" />
   </modules>
   <validation validateIntegratedModeConfiguration="false" />
 </system.webServer>

I saw a lot of solutions on the web, both on server and project side ! 我在网络上看到了很多解决方案，包括服务器和项目方面！ I enabled the static content in windows features. 我启用了Windows功能中的静态内容 。 I changed the BundleConfig.cs file as told here Bundler not including .min files , but nothing worked for me ! 我更改了BundleConfig.cs文件，因为Bundler不包括.min文件 ，但没有任何对我有用 ！

NB: One of my pages has some styles defined in the razor file, it's rendering well ! 注意： 我的一个页面在剃刀文件中定义了一些样式，它渲染得很好！ so I think that the problem is somewhere within the bundle file ! 所以我认为问题出在捆绑文件中的某个地方！

can anyone help me please ? 有人可以帮我吗？

<==== EDIT =====> <====编辑=====>

I just put in my Web.Config file : 我只是放入我的Web.Config文件： 

  <compilation debug="false" targetFramework="4.5" />

and the result in my local machine is without styles (just like the remote one) if it can help someone to understand... 我的本地机器的结果是没有样式（就像远程的那样），如果它可以帮助别人理解......

3 个解决方案

解决方案1
 2 已采纳  2015-04-24 15:36:02

I solved the problem! 我解决了这个问题！

Thanks to Bundling & minification not applying css & js using Asp.net 4.0 C# ! 感谢Bundling＆minification不使用Asp.net 4.0 C＃应用css和js ！

All I had to do is to change in my bundleConfig.cs file the name from : 我所要做的就是在我的bundleConfig.cs文件中更改名称： 

  bundles.Add(new StyleBundle("~/Content/Theme").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/css/bootstrap-admin-theme.css",
            "~/Content/Theme/css/site.css"));

to 至 

  bundles.Add(new StyleBundle("~/Content/allcss").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme.css",
            "~/Content/Theme/style/bootstrap-admin-theme.css",
            "~/Content/Theme/style/site.css"));

解决方案2
 2  2015-07-10 10:26:19

The answer by the author is correct but its not helpful. 作者的答案是正确的，但没有帮助。 I had to look a little more deeper to solve this issue. 我不得不更深入地解决这个问题。 I found that when you release the application to production or whatever reason and your bundle.config file is not configured properly then you will have CSS/JS not rendered problem. 我发现，当您将应用程序发布到生产或任何原因并且您的bundle.config文件配置不正确时，您将遇到CSS / JS问题。 In order to solve this i had to make some changes in bundle.config file. 为了解决这个问题，我不得不在bundle.config文件中进行一些更改。 All the style files in the same folder go under one Virtual path and if you have other CSS files that are located under different folder you have to create a new bundle for those. 同一文件夹中的所有样式文件都位于一个虚拟路径下，如果您有其他CSS文件位于不同的文件夹下，则必须为这些文件创建新的包。 eg i had my custom css called "site.css" and "bootstrap.css" in same folder so i created 例如，我将自定义的css称为“site.css”和“bootstrap.css”，因此我创建了该文件夹 

bundles.Add(new StyleBundle("~/Content/allcss").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"

                  ));`

Then i also had font-awsome which i wanted to include in the project. 然后我也有font-awsome，我想包含在项目中。 so i created another bundle 所以我创建了另一个包 

bundles.Add(new StyleBundle("~/Content/css/font-awsome").Include(
                 "~/Content/css/font-awesome.css"
            ));

And afterwards i add both paths to my Layout.cshtml file. 然后我将两个路径添加到我的Layout.cshtml文件中。 

 @Styles.Render("~/Content/allcss")
@Styles.Render("~/Content/css/font-awsome")

Works like a charm. 奇迹般有效。

解决方案3
 0  2015-04-24 13:28:30

If the website is SSL secured, make sure you have a fully qualified address for your resources. 如果网站受SSL保护，请确保您拥有资源的完全限定地址。 That is the first thing that comes to my mind. 这是我想到的第一件事。

-G -G

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何缓存在IIS上服务的ASP.NET MVC应用程序的js和css文件？ - How to cache js and css files of ASP.NET MVC application served on IIS? 在ASP.NET MVC中管理js和CSS文件 - Managing js and css files in ASP.NET MVC Asp.Net MVC中JS和CSS的最小化 - minification Of JS And CSS In Asp.Net MVC .js 和 .css 的语法错误 - ASP.NET MVC 5 - SyntaxError with .js and .css - ASP.NET MVC 5 ASP.NET 4.6 WEB API，不提供静态文件（.js，.css）IIS Express Visual Studio - ASP.NET 4.6 WEB API, Not serving static files(.js, .css) IIS express visual studio asp.net中的gzip CSS和JS文件 - gzip css and js files in asp.net ASP.NET MVC 应用程序无法从 cshtml 文件调用 JS 或 CSS 文件 - ASP.NET MVC app cant call JS or CSS files from cshtml file 如何动态创建css / js / html文件并使用ASP.NET MVC在运行时提供服务 - How to dynamically create css/js/html files and serve back at runtime with ASP.NET MVC 强制浏览器在 asp.net 应用程序中获取最新的 js 和 css 文件 - force browsers to get latest js and css files in asp.net application 在ASP.Net MVC视图中使用javascript和CSS文件？ - using javascript and css files in ASP.Net MVC View?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM