Blazor page rendering twice

Question

UPDATE 2: Adding Mainlayout.razor and NavMenu.razor

MainLayout.razor

@inherits LayoutComponentBase


    
        
    

    
        
            About
        

        
            @Body

NavMenu.razor


    HR Test App
    



    
        
            
                 Home
            
        
        
            
                 Employee Data
            
        
        
            
                 Employee Hierarchy
            
        
        
            
                 Department/Location
            
        
        
            
                 Department Data
            
        
    


@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

UPDATE: Adding my startup.cs and program.cs files and screenshots

Shot #1: This is the page as shown after beginning the debugging Initial page after starting debug

Shot #2: If I scroll the page you will see the that everything is duplicated. Same page when I start scrolling

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using BO;
using Blazored.Modal;

namespace BlazorHRTestApp
{
    public class Startup
    {
        public static string HRDataConn { get; set; }

        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddBlazoredModal();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            //Set the connection strings
            AppSettings.ConnectionString = Configuration.GetConnectionString("HRData");

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }
}

Program.cs

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorHRTestApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup();
                });
    }
}

So I noticed that my Blazor app is rendering each page twice and I am lost as to why. I checked some other posts and changed my render-mode to "Server" as seen below in my _Hosts.js file:

@page "/"
@namespace BlazorHRTestApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}




    
    
    BlazorHRTestApp
    
    
    
    
    
    


    

    
        
            An error has occurred. This application may no longer respond until reloaded.
        
        
            An unhandled exception has occurred. See browser dev tools for details.
        
        Reload
        🗙

And here is my Index.razor file as an example of a file that is being rendered twice:

@page "/"

Human Resources

This is a Blazor test to check to see how well Blazor works.



@code {

}

I have looked into the lifecycle, but can't seem to see anything in my code. And this is happening during debug on my laptop.

crmcode2012 · Accepted Answer

So I decided to run a test and created a blank Blazor project and added my files in and this issue went away. I have had several issues with the laptop so it is possible something happened in a crash that caused this issue.

If this presents itself again, I will come back but add more files from the start.

Thanks for any and all help.

Blazor page rendering twice

Answers (1)

Related Questions