Search code examples
c#htmlasp.net-mvc-4razorplesk

Images won't load in asp.net mvc 4


I never upload ASP.NET MVC 4 on Plesk, work with ASP.NET Core 5 MVC.

I have to develop a project with ASP.NET MVC 4 due to my boss's order. I don't have any problem with localhost and can run the project without any single bug on localhost, but when I upload the project on a remote host by Plesk, No image files, whether JPEG or PNG, are shown and they all give me a 404 error.

I use bundles to resolve address CSS and JS files by modify BundleConfig like this:

public class BundleConfig
{
    // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
    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 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").Include(
                  "~/Scripts/bootstrap.min.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.min.css",
                  "~/Content/site.min.css",
                  "~/Content/userCustom.min.css",
                  "~/UsePanel.min.css"));

        bundles.Add(new StyleBundle("~/bundles/HomeStyle").Include(
            "~/Content/bootstrap.min.css",
            "~/assets/css/animate.min.css",
            "~/assets/css/fontawesome-all.min.css",
            "~/assets/css/slick.css",
            "~/assets/css/default.css",
            "~/assets/css/style.css",
            "~/assets/css/responsive.css"));

        bundles.Add(new Bundle("~/bundles/HomeJs").Include(
            "~/Scripts/bootstrap.min.js",
            "~/assets/js/jquery.countdown.min.js",
            "~/assets/js/jquery.appear.js",
            "~/assets/js/slick.min.js",
            "~/assets/js/ajax-form.js",
            "~/assets/js/jquery.easing.js",
            "~/assets/js/chart.min.js",
            "~/assets/js/custom-chart.js",
            "~/assets/js/wow.min.js",
            "~/assets/js/main.js"
        ));

    }
}

and use this Razor syntax to bind styles and javascript those needed for index.cshtml:

@Styles.Render("~/bundles/HomeStyle")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/HomeJs")

until here, everything goes well as expected, but I have several image files in index page, for example:

    <div class="footer-shape-wrap">
                <img src="~/assets/img/images/footer_shape01.png" alt="" class="alltuchtopdown">
                <img src="~/assets/img/images/footer_shape02.png" alt="" class="leftToRight">
</div>

and

<div class="footer-area footer-bg" style="background-image: url('@Url.Content("~/assets/img/bg/footer_bg.png")');"></div>

As I mentioned before, when I run the project on localhost, all the CSS, JS and image files are loaded and there is no problem.

But the situation is different with the remote host (Plesk). None of the image files are loaded on the remote server, or rather, they all give a 404 error and it seems that the server does not recognize the path of my file.

This is my root solution:
enter image description here

I've already searched all these articles and couldn't find a solution to this problem in any of them. I would be grateful if you could help me solve this problem.

  1. https://www.codeproject.com/Tips/1081630/How-to-Access-Static-Content-Files-in-MVC-Applicat
  2. Using ASP.NET routing to serve static files
  3. https://blog.aelterman.com/2011/01/31/using-asp-net-4-0-extension-less-routing-on-iis-7-5/
  4. How to serve static files from ASP.NET-MVC 4 app?
  5. Using a wwwroot folder (ASP.NET Core style) in ASP.NET 4.5 project

In addition, the settings I made in the web config in this regard are also like this.

    <?xml version="1.0"?>
<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>
  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.7.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <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" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>
  <appSettings>
    <add key="webpages:Enabled" value="false" />
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.webServer>
  <modules runAllManagedModulesForAllRequests="true"/>
    <defaultDocument>
      <files>
        <clear />
        <add value="Home/Index" />
      </files>
    </defaultDocument>
    <staticContent>
            <clientCache cacheControlMaxAge="7.00:00:00" cacheControlMode="UseMaxAge" />
            <mimeMap fileExtension=".lottie" mimeType="application/json" />
            <mimeMap fileExtension=".png" mimeType="image/png" />
        </staticContent>
        <rewrite>
           <rules>
               <rule name="HTTP to HTTPS redirect" stopProcessing="true">
                   <match url="(.*)" />
                   <conditions>
                       <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                   </conditions>
                   <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Permanent" />
               </rule>
               <rule name="wwwRootFix" stopProcessing="true">
                  <match url="(.*)" />
                  <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <add input="{APPL_PHYSICAL_PATH}wwwroot\{R:1}" matchType="IsFile" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    <add input="{REQUEST_URI}" pattern="^/(assets)" negate="true" />
                  </conditions>
                  <action type="Redirect" url="/assets/{R:1}" />
                </rule>
           </rules>
           <outboundRules>
               <rule name="Add Strict-Transport-Security when HTTPS" enabled="true">
                   <match serverVariable="RESPONSE_Strict_Transport_Security" pattern=".*" />
                   <conditions>
                       <add input="{HTTPS}" pattern="on" ignoreCase="true" />
                   </conditions>
                   <action type="Rewrite" value="max-age=31536000" />
               </rule>
           </outboundRules>
       </rewrite>
    <handlers>
      <remove name="BlockViewHandler" />
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>
  <system.web>
  
    <customErrors mode="Off" />
    <compilation tempDirectory="D:\Inetpub\vhosts\wintron.net\tmp">
      <assemblies>
        <add assembly="System.Web.Mvc, Version=5.2.7.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      </assemblies>
    </compilation>
  </system.web>
</configuration>

Solution

  • It seems there are some problems with my web.config: I just removed some tags and realized that some settings conflict with the host server.

        <?xml version="1.0"?>
    <configuration>
      <configSections>
        <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
          <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
          <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
        </sectionGroup>
      </configSections>
      <system.web.webPages.razor>
        <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.7.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
          <namespaces>
            <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" />
          </namespaces>
        </pages>
      </system.web.webPages.razor>
      <runtime>
        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
          <dependentAssembly>
            <assemblyIdentity name="Antlr3.Runtime" publicKeyToken="eb42632606e9261f" />
            <bindingRedirect oldVersion="0.0.0.0-3.5.0.2" newVersion="3.5.0.2" />
          </dependentAssembly>
          <dependentAssembly>
            <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
            <bindingRedirect oldVersion="0.0.0.0-12.0.0.0" newVersion="12.0.0.0" />
          </dependentAssembly>
          <dependentAssembly>
            <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
            <bindingRedirect oldVersion="0.0.0.0-1.6.5135.21930" newVersion="1.6.5135.21930" />
          </dependentAssembly>
          <dependentAssembly>
            <assemblyIdentity name="Z.EntityFramework.Extensions" publicKeyToken="59b66d028979105b" culture="neutral" />
            <bindingRedirect oldVersion="0.0.0.0-4.0.67.0" newVersion="4.0.67.0" />
          </dependentAssembly>
          <dependentAssembly>
            <assemblyIdentity name="System.Runtime.CompilerServices.Unsafe" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
            <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
          </dependentAssembly>
          <dependentAssembly>
            <assemblyIdentity name="System.Memory" publicKeyToken="cc7b13ffcd2ddd51" culture="neutral" />
            <bindingRedirect oldVersion="0.0.0.0-4.0.1.2" newVersion="4.0.1.2" />
          </dependentAssembly>
          <dependentAssembly>
            <assemblyIdentity name="AngleSharp" publicKeyToken="e83494dcdc6d31ea" culture="neutral" />
            <bindingRedirect oldVersion="0.0.0.0-0.17.1.0" newVersion="0.17.1.0" />
          </dependentAssembly>
        </assemblyBinding>
      </runtime>
      <system.web>
        <customErrors mode="Off" />
        <compilation tempDirectory="D:\Inetpub\vhosts\wintron.net\tmp">
        </compilation>
      </system.web>
    </configuration>
    

    As you can see I remove these sections:

    <appSettings>
        <add key="webpages:Enabled" value="false" />
        <add key="webpages:Version" value="3.0.0.0" />
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />
      </appSettings>
    

    and remove this:

    <staticContent>
                    <clientCache cacheControlMaxAge="7.00:00:00" cacheControlMode="UseMaxAge" />
                    <mimeMap fileExtension=".lottie" mimeType="application/json" />
                    <mimeMap fileExtension=".png" mimeType="image/png" />
    </staticContent>
    

    and again remove this:

    <rule name="wwwRootFix" stopProcessing="true">
                  <match url="(.*)" />
                  <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    <add input="{APPL_PHYSICAL_PATH}wwwroot\{R:1}" matchType="IsFile" />
                    <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    <add input="{REQUEST_URI}" pattern="^/(assets)" negate="true" />
                  </conditions>
                  <action type="Redirect" url="/assets/{R:1}" />
                </rule>
    

    after this all images file load for me on the Plesk server.