Static files not rendering ASP .NET MVC (.NET Framework 4.8) - Asp.net

viking
April 26, 2023
336 views
1 vote
2 Answers

I am trying to troubleshoot an issue where the browser does not render static files received from the server when I run the application with 200 status codes for all files. The page appears blank on load. The page title and favicon are visible though.

Network requests screenshot

Here is my BundleConfig.cs file:

using System.Web.Optimization;

namespace XYZ.Web
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.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 ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

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

            // Set EnableOptimizations to false for debugging. For more information,
            // visit http://go.microsoft.com/fwlink/?LinkId=301862
            BundleTable.EnableOptimizations = true;
        }
    }
}

Here is the global.asax.cs file :

using Autofac;
using Autofac.Integration.Mvc;
using XYZ.Library.Services;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace XYZ.Web
{
    public class WebApiApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            RegisterAutofac();
        }
        private void RegisterAutofac()
        {
            var builder = new ContainerBuilder();
            //Register MVC controllers
            builder.RegisterControllers(typeof(WebApiApplication).Assembly);

            //Register IUserService
            builder.RegisterType<UserService>().As<IUserService>().InstancePerRequest();

            //Set the dependency resolver to Autofac
            var container = builder.Build();
            DependencyResolver.SetResolver(new AutofacDependencyResolver(container));
        }
    }
}

Here is my Views/Home/Index.cshtml file that provides the HTML markup:

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet" async>
    <link async rel="stylesheet" href="/css/ionicons.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/style.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" async />
    <title>XYZ/title>
    <link href="/static/css/main.c764a889.chunk.css" rel="stylesheet">
</head>
<body>
    <script type="text/javascript">
        window.XYZ= {};
        window.XYZ.apiBaseUrl = '/api';
        window.XYZ.loginUrl = '/';
        window.XYZ.version = '2.2';
        window.XYZ.tokenUrl = '/Login';
    </script>
    <noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div>
    <script type="text/javascript" src="/static/js/main.1cf49c64.chunk.js"></script>
</body>
</html>

Here is a screenshot of my solution’s structure:

project solution structure

Here is a screenshot showing the static files

static files

My RouteConfig.cs code:

using System.Web.Mvc;
using System.Web.Routing;

namespace XYZ.Web
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" }
        );
        }
    }
}

What could be wrong in my code?

I’ve tried changing the static files and checking if all project files are present in the solution. I also tried to run the application with BundleTable.EnableOptimizations set to false but it didn’t work.

Answers

Chosen as BEST ANSWER

I found the issue and it was a small error on my side. I fixed the issue by correctly referencing all required static files in the Views/Home/Index.cshtml file. The updated Index.cshtml file is

@{ Layout = null; }<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="/manifest.json" />
    <title>Parsing Portal</title>
    <link href="/static/css/2.83a79fa7.chunk.css" rel="stylesheet" />
    <link href="/static/css/main.c764a889.chunk.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/static/js/2.35ccfd07.chunk.js"></script>
    <script src="/static/js/main.1cf49c64.chunk.js"></script>
  </body>
</html>