Blazor页面渲染两次

Question

UPDATE 2：添加Mainlayout.razor和NavMenu.razor

主布局.razor

---

@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>

---

NavMenu.razor

---

<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">HR Test App</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HRemployeedisplaydata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Employee Data
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HRemployeedisplayhierarchy">
<span class="oi oi-list-rich" aria-hidden="true"></span> Employee Hierarchy
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HRdepartmentlocation">
<span class="oi oi-list-rich" aria-hidden="true"></span> Department/Location
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="HRdepartments">
<span class="oi oi-list-rich" aria-hidden="true"></span> Department Data
</NavLink>
</li>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}

---

更新：添加我的startup.cs和program.cs文件和屏幕截图

镜头#1：这是调试开始后显示的页面启动调试后的初始页面

镜头#2：如果我滚动页面，你会看到所有内容都是重复的。当我开始滚动时，页面相同

启动.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");
});
}
}
}

---

程序.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<Startup>();
});
}
}

---

所以我注意到我的Blazor应用程序对每个页面进行了两次渲染，我不知道为什么。我查看了一些其他帖子，并将我的渲染模式更改为"；服务器"；如下所示，在我的_Hosts.js文件中：

---

@page "/"
@namespace BlazorHRTestApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorHRTestApp</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazorHRTestApp.styles.css" rel="stylesheet" />
<link href="_content/Blazored.Typeahead/blazored-typeahead.css" rel="stylesheet" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
<component type="typeof(App)" render-mode="Server" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="_content/Blazored.Typeahead/blazored-typeahead.js"></script>
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
</body>
</html>

---

这里是我的Index.razor文件，作为一个被渲染两次的文件的例子：

@page "/"
<h1>Human Resources</h1>
<span>This is a Blazor test to check to see how well Blazor works.</span>
<br />
@code {
}

---

我已经研究了生命周期，但似乎在我的代码中看不到任何东西。这是在我的笔记本电脑调试期间发生的。

Answer 1

所以我决定运行一个测试，创建了一个空白的Blazor项目，并在中添加了我的文件，这个问题就消失了。我的笔记本电脑出现了几个问题，所以可能是在崩溃中发生了什么事情导致了这个问题。

如果这种情况再次出现，我会回来，但会从一开始添加更多文件。

谢谢你的帮助。