user576838
user576838

Reputation: 875

Images, CSS, and JS Not Loading in MVC4 App

I just deployed a new MVC4 app to my server and some of the CSS, JS, and images are not loading. For example, the Chrome console says,

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://beta.vinformative.com/Content/themes/base/jquery-ui-1.8.20.custom.css

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://beta.vinformative.com/Content/select2.css

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://beta.vinformative.com/Scripts/Plugins/select2.js

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://beta.vinformative.com/Scripts/WineCreate.js

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://beta.vinformative.com/Content/images/logo_revisedsmall.png

They are all available on server in the locations they mention. I've been troubleshooting other things all night, so I'm a little blurry eyed and maybe I'm missing something obvious. You can see these errors right on the homepage at beta.vinformative.com as well.

Here is a screenshot of my file layout too from the server: enter image description here

I am using bundling and published the site to file system in release mode, but I wouldn't expect that to effect the images, would it? I'm going to keep at this, but any help would be greatly appreciated! Thanks!

EDIT as requested bundle config: THANKS!

    public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/Libraries/jquery-{version}.js",
                    "~/Scripts/Plugins/jquery.loaderbutton.js",
                    "~/Scripts/Plugins/jquery.form.js"));

        bundles.Add(new ScriptBundle("~/bundles/base").Include(
                    "~/Scripts/Feedback.js",
                    "~/Scripts/Global.js",
                    "~/Scripts/WineSearch.js"
            ));

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

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/Libraries/jquery.validate*"));

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

        bundles.Add(new ScriptBundle("~/bundles/formhelpers").Include(
                "~/Scripts/bootstrap/Form Helpers/bootstrap-formhelpers-countries.js",
                "~/Scripts/bootstrap/Form Helpers/bootstrap-formhelpers-countries.en_US.js",
                "~/Scripts/bootstrap/Form Helpers/bootstrap-formhelpers-phone.js",
                "~/Scripts/bootstrap/Form Helpers/bootstrap-formhelpers-phone.format.js",
                "~/Scripts/bootstrap/Form Helpers/bootstrap-formhelpers-states.js",
                "~/Scripts/bootstrap/Form Helpers/bootstrap-formhelpers-states.en_US.js"
            ));

        bundles.Add(new ScriptBundle("~/bundles/winedetails").Include(
            "~/Scripts/WineDetails.js",
            "~/Scripts/Plugins/jquery.uploadifive.js",
            "~/Scripts/Plugins/jquery.fileDownload.js",
            "~/Scripts/Plugins/jquery.fancybox.js",
            "~/Scripts/Plugins/jquery.fancybox-media.js",
            "~/Scripts/Plugins/jquery.nailthumb.1.1.js",
            "~/Scripts/Plugins/jquery.lazyload.js"
            ));
        // 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 StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/slideout.css"));

        bundles.Add(new StyleBundle("~/Content/themes/bootstrap/css").Include(
                "~/Content/themes/bootstrap/bootstrap.css",
                "~/Content/themes/bootstrap/bootstrap-responsive.css",
                "~/Content/themes/bootstrap/bootstrapSwitch.css",
                "~/Content/themes/bootstrap/bootstrap-notify.css",
                "~/Content/themes/bootstrap/bootstrap-formhelpers.css"
            ));

        bundles.Add(new StyleBundle("~/Content/datatables").Include(
            "~/Content/jquery.dataTables.css",
            "~/Content/jquery.dataTables_themeroller.css"));

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

        bundles.Add(new StyleBundle("~/Content/sitewide").Include(
                "~/Content/themes/base/jquery.ui.autocomplete.css",
                "~/Content/Site.css"
            ));

        bundles.Add(new StyleBundle("~/Content/winedetails").Include(
                "~/Content/uploadifive.css",
                "~/Content/themes/fancybox/jquery.fancybox.css"
            ));

        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"));


    }
}

EDIT # 2

I tried to change my reference in my _layout view with no luck:

from

    <link href="../../Content/themes/base/jquery-ui-1.8.20.custom.css" rel="stylesheet"

to

<link href="@Url.Content("~/Content/themes/base/jquery-ui-1.8.20.custom.css")" rel="stylesheet">

EDIT #3 Web.config

    <?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.4.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    <sectionGroup name="dotNetOpenAuth" type="DotNetOpenAuth.Configuration.DotNetOpenAuthSection, DotNetOpenAuth.Core">
      <section name="messaging" type="DotNetOpenAuth.Configuration.MessagingElement, DotNetOpenAuth.Core" requirePermission="false" allowLocation="true" />
      <section name="reporting" type="DotNetOpenAuth.Configuration.ReportingElement, DotNetOpenAuth.Core" requirePermission="false" allowLocation="true" />
      <section name="openid" type="DotNetOpenAuth.Configuration.OpenIdElement, DotNetOpenAuth.OpenId" requirePermission="false" allowLocation="true" />
      <section name="oauth" type="DotNetOpenAuth.Configuration.OAuthElement, DotNetOpenAuth.OAuth" requirePermission="false" allowLocation="true" />
    </sectionGroup>
    <sectionGroup name="elmah">
      <section name="security" requirePermission="false" type="Elmah.SecuritySectionHandler, Elmah" />
      <section name="errorLog" requirePermission="false" type="Elmah.ErrorLogSectionHandler, Elmah" />
      <section name="errorMail" requirePermission="false" type="Elmah.ErrorMailSectionHandler, Elmah" />
      <section name="errorFilter" requirePermission="false" type="Elmah.ErrorFilterSectionHandler, Elmah" />
    </sectionGroup>
    <section name="web.optimization" type="Web.Optimization.Configuration.OptimizationSection" />
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
  </configSections>
  <connectionStrings>
    <add name="Elmah" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=elmah;Integrated Security=True" providerName="System.Data.SqlClient" />
    <add name="vfContext" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=vf3;Integrated Security=SSPI" providerName="System.Data.SqlClient" />
  </connectionStrings>
  <appSettings>
    <add key="webpages:Version" value="2.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="PreserveLoginUrl" value="true" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.web>
    <customErrors mode="On" defaultRedirect="~/Error/Generic">
      <error statusCode="404" redirect="~/Error/NotFound" />
      <error statusCode="500" redirect="~/Error/internal" />
    </customErrors>
    <compilation debug="true" targetFramework="4.0" />
    <authentication mode="Forms">
      <forms loginUrl="~/Account/Login" timeout="2880" />
    </authentication>
    <pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
      </namespaces>
    </pages>
    <httpModules>
      <add name="ErrorLog" type="Elmah.ErrorLogModule, Elmah" />
      <add name="ErrorMail" type="Elmah.ErrorMailModule, Elmah" />
      <add name="ErrorFilter" type="Elmah.ErrorFilterModule, Elmah" />
    </httpModules>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true">
      <add name="ErrorLog" type="Elmah.ErrorLogModule, Elmah" preCondition="managedHandler" />
      <add name="ErrorMail" type="Elmah.ErrorMailModule, Elmah" preCondition="managedHandler" />
      <add name="ErrorFilter" type="Elmah.ErrorFilterModule, Elmah" preCondition="managedHandler" />
    <remove name="BundleModule" />
    <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
    </modules>
    <handlers>
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <staticContent>
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
      <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
      <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
      <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      <remove fileExtension=".manifest" />
      <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest" />
    </staticContent>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="DotNetOpenAuth.AspNet" publicKeyToken="2780ccd10d57b246" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.2.0.0" newVersion="4.2.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="DotNetOpenAuth.Core" publicKeyToken="2780ccd10d57b246" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.2.0.0" newVersion="4.2.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="RazorEngine" publicKeyToken="9ee697374c7e744a" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-3.0.8.0" newVersion="3.0.8.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Razor" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-2.0.0.0" newVersion="2.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-1.3.0.0" newVersion="1.3.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-4.5.0.0" newVersion="4.5.0.0" />
      </dependentAssembly>
    </assemblyBinding>
    <legacyHMACWarning enabled="0" />
  </runtime>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
  </entityFramework>
  <system.net>
    <defaultProxy enabled="true" />
    <mailSettings>
      <smtp from="[email protected]">
        <network host="smtp.emailsrvr.com" port="2525" userName="[email protected]" password="vinf0rmat1ve" />
      </smtp>
    </mailSettings>
    <settings>
      <!-- This setting causes .NET to check certificate revocation lists (CRL) 
                 before trusting HTTPS certificates.  But this setting tends to not 
                 be allowed in shared hosting environments. -->
      <!--<servicePointManager checkCertificateRevocationList="true"/>-->
    </settings>
  </system.net>
  <dotNetOpenAuth>
    <messaging>
      <untrustedWebRequest>
        <whitelistHosts>
          <!-- Uncomment to enable communication with localhost (should generally not activate in production!) -->
          <!--<add name="localhost" />-->
        </whitelistHosts>
      </untrustedWebRequest>
    </messaging>
    <!-- Allow DotNetOpenAuth to publish usage statistics to library authors to improve the library. -->
    <reporting enabled="true" />
    <openid>
      <relyingParty>
        <security requireSsl="false">
          <!-- Uncomment the trustedProviders tag if your relying party should only accept positive assertions from a closed set of OpenID Providers. -->
          <!--<trustedProviders rejectAssertionsFromUntrustedProviders="true">
                        <add endpoint="https://www.google.com/accounts/o8/ud" />
                    </trustedProviders>-->
        </security>
        <behaviors>
          <!-- The following OPTIONAL behavior allows RPs to use SREG only, but be compatible
                         with OPs that use Attribute Exchange (in various formats). -->
          <add type="DotNetOpenAuth.OpenId.RelyingParty.Behaviors.AXFetchAsSregTransform, DotNetOpenAuth.OpenId.RelyingParty" />
        </behaviors>
      </relyingParty>
    </openid>
  </dotNetOpenAuth>
  <uri>
    <!-- The uri section is necessary to turn on .NET 3.5 support for IDN (international domain names),
             which is necessary for OpenID urls with unicode characters in the domain/host name.
             It is also required to put the Uri class into RFC 3986 escaping mode, which OpenID and OAuth require. -->
    <idn enabled="All" />
    <iriParsing enabled="true" />
  </uri>
  <elmah>
    <!--
        See http://code.google.com/p/elmah/wiki/SecuringErrorLogPages for 
        more information on remote access and securing ELMAH.
    -->
    <errorLog type="Elmah.SqlErrorLog, Elmah" connectionStringName="Elmah"></errorLog>
    <errorMail from="[email protected]" to="[email protected]" subject="ELMAH Error Log Mail"></errorMail>
    <security allowRemoteAccess="false" />
  </elmah>
  <location path="elmah.axd" inheritInChildApplications="false">
    <system.web>
      <httpHandlers>
        <add verb="POST,GET,HEAD" path="elmah.axd" type="Elmah.ErrorLogPageFactory, Elmah" />
      </httpHandlers>
      <!-- 
        See http://code.google.com/p/elmah/wiki/SecuringErrorLogPages for 
        more information on using ASP.NET authorization securing ELMAH.

      <authorization>
        <allow roles="admin" />
        <deny users="*" />  
      </authorization>
      -->
    </system.web>
    <system.webServer>
      <handlers>
        <add name="ELMAH" verb="POST,GET,HEAD" path="elmah.axd" type="Elmah.ErrorLogPageFactory, Elmah" preCondition="integratedMode" />
      </handlers>
    </system.webServer>
  </location>
  <web.optimization>
    <bundles>
      <bundle virtualPath="~/Content/sample" transform="System.Web.Optimization.JsMinify, System.Web.Optimization">
        <content>
          <!-- Add some single files -->
          <!-- <add path="~/Scripts/validation.js" /> -->
          <!-- <add path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" /> -->
          <!-- Add a directory (and its subdirectories) -->
          <!-- <add path="~/Scripts/Plugins" searchPattern="*.js" searchSubdirectories="true" /> -->
        </content>
        <!--
        If you want to apply multiple transformations, 
        you should remove the "transform" attribute from the bundle. 
        -->
        <!--
        <transformations>
          <add type="Web.Optimization.Bundles.CoffeeScript.CoffeeScriptTransform, Web.Optimization.Bundles.CoffeeScript" />
          <add type="System.Web.Optimization.JsMinify, System.Web.Optimization" />
        </transformations>
        -->
      </bundle>
    </bundles>
  </web.optimization>
</configuration>

Only non-bundled CSS and JS and img tags are not rendering.

FIXED! I commented out the following in my node:

  <staticContent>
        <!-- <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
      <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
      <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
      <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />-->
      <remove fileExtension=".manifest" />
      <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest" />
    </staticContent>

Upvotes: 5

Views: 10819

Answers (3)

Paul Schroeder
Paul Schroeder

Reputation: 1601

My fix ended up being to rename my solution file and delete a directory found under the ".vs" folder. Issue precursors - Using VS2019, I created an ASP.NET Core app that had the same name as my solution file. I had meant to create a full-framework asp.net project and so I removed/deleted the ASP.NET Core project from the solution and created a new full-framework with the same name. I believe this caused IIS Express to continue using some of the remnant configuration found under the ".vs\" folder that was telling it to use some ASP.NET Core modules.

This worked for me:

  1. Close Visual Studio
  2. Change my solution name to something different from my web project name
  3. Remove the directory described above that was under the .vs folder
  4. Reopen Visual Studio and run the web project

Upvotes: 0

Metin Atalay
Metin Atalay

Reputation: 1517

I added app.UseStaticFiles(); this code in starup.cs of Configure method, than it is fixed.

Upvotes: 0

user576838
user576838

Reputation: 875

Comment out this under system.webserver in web.config

  <staticContent>
        <!-- <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
      <mimeMap fileExtension=".ogg" mimeType="video/ogg" />
      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
      <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
      <mimeMap fileExtension=".spx" mimeType="audio/ogg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />-->
      <remove fileExtension=".manifest" />
      <mimeMap fileExtension=".manifest" mimeType="text/cache-manifest" />
    </staticContent>

Upvotes: 5

Related Questions