Question

我正在开发一个Blazor服务器端SPA客户端应用程序，该应用程序通过HTTP请求与MVC服务器上的API控制器进行通信。

在发出HTTP请求时，应在客户端和服务器的Startup.cs中添加什么以使路由正常工作？以及如何配置路由？

Answer 1

好... BlazingPizza示例是Blazor WebAssembly应用程序。它在客户端浏览器上执行。该解决方案包含三个项目：共享（由其他两个项目共享）；客户端（在客户端浏览器上执行）；和服务器（托管应用程序和Web Api的项目）。现在，您想将此应用程序转换为Blazor Server应用程序，对吗？

这样做，您将很安全： 1.转到Visual Studio并创建Blazor Server应用程序（从“创建新的Blazor应用程序”对话框中）。点击“创建”按钮后，将为您创建并配置一个新的服务器端Blazor应用程序。运行该应用程序并查看其功能，查看Startup类以了解如何配置您的应用程序，等等。

意识到这一点：这是一个Asp.Net Core应用程序，在服务器上运行，并通过SignaleR将HTML内容发送到连接的客户端。重要的是，您必须意识到这（是在浏览器中看到的HTML）是Blazor Server应用程序的客户端，但是代码执行仅在服务器上发生，因此，如果您将Web Api应用程序用于应用程序，它在服务器上执行；换句话说，您可以从服务器对服务器进行Web Api调用。这是合法的，有时甚至是必要的...

要将Web Api项目添加到您的应用程序，请执行以下操作：右键单击解决方案名称，选择 Add -> New Project ...。在“添加新项目”窗口中，选择“ Asp.Net Core Web应用程序”。在“创建新的Asp.Net Core Web应用程序”窗口中，选择API项目模板，然后单击“创建”按钮。使用名为WeatherForecastController的控制器为您创建并配置了一个新的Web Api项目。
您将要从Blazor Server应用程序调用Web Api端点，对吗？因此，从Blazor Server应用程序添加对Web Api项目的引用。现在轮到你可以执行从您的Blazor服务器到Web Api端点的HTTP调用。

我上面所描述的是您如何执行上面评论中所要求的。但这只是开始。开始使用它，如果您还有其他问题，请打开新的问题线索，我将尽力帮助您。

Answer 2

如果使用Balzor Server App，则应设置Startup类。注意：这种类型的Blazor在服务器上执行。请注意，创建这种类型的Blazor时，会自动提供以下代码

Startup.cs

public class Startup
    {
        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.AddSingleton<WeatherForecastService>();
        }

        // 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();

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

如果使用Balzor WebAssembly App，则应设置Startup类。注意：此类Blazor在客户端浏览器上执行。请注意，创建此类Blazor时会自动提供以下代码。另请注意，Blazor应用程序托管在服务器上，因此解决方案中包含三个项目：共享，客户端和服务器，您可以在其中定义Web Api控制器。

Client.Startup.cs

public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }

Server.Startup.cs

public class Startup
    {
        // 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.AddMvc();
            services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseResponseCompression();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseBlazorDebugging();
            }

            app.UseStaticFiles();
            app.UseClientSideBlazorFiles<Client.Startup>();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapDefaultControllerRoute();
                endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
            });
        }
    }

注意：由于“ Blazor服务器端SPA客户端应用程序”尚不清楚您在说哪种类型的Blazor，因此我已经向您展示了两者。再一次，创建应用程序时会自动为您创建此设置。

要从Blazor WebAssembly进行HTTP调用，请将HttpClient服务注入到组件中，并根据需要调用该服务的方法：

@inject HttpClient HttpClient

请注意，默认情况下，HttpClient服务已添加到DI容器中

要从Blazor Server进行HTTP调用，您需要执行上面显示的相同操作，并且以相同的方式调用Web Api，不同之处在于必须手动将HttpService添加到DI容器中。它不会自动提供，因为在该执行模式下从Blazor服务器调用Web Api并不常见（您的Blazor应用在您的Web Api所在的同一服务器上运行）。

还请注意，建议使用IHttpClientFactory生成HttpClient。

在Blazor服务器端客户端项目中配置路由

2 个答案:

Startup.cs

Client.Startup.cs

Server.Startup.cs