ASP. NET Core + SPA: как динамически загружать CSS файлы? - PullRequest
0 голосов
/ 15 января 2020

Цель

В настоящее время я работаю с ASP. NET Core + Vue, и я пытаюсь добавить динамич c загрузка файла CSS на основе параметра заголовка.

Таким образом, если значение заголовка style1, загружается файл CSS, а если style2, загружается другой файл CSS.

Текущее решение

В настоящее время я делаю API-запрос от внешнего интерфейса после загрузки DOM и изменяю файл CSS с помощью Javascript, например, так (в рамках created life hook):

let headerStyling = await getStyle();

if (headerStyling === "basic") {
  require("./css/basic.css");
} else if (headerStyling === "advanced") {
  require("./css/advanced.css");
} else {
  require("./css/base.css");
}

Вопрос

Как заставить ASP. NET получить значение заголовка первого запроса и передать соответствующий файл CSS для первого рендера?

Диаграмма веб-последовательности

Вот простая диаграмма, описывающая приблизительно мой процесс и то, что я ищу: enter image description here

enter image description here

Startup.cs

Мой 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.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSession();
        services.AddControllersWithViews();

        // Add AddRazorPages if the app uses Razor Pages.
        services.AddRazorPages();

        // In production, the Vue files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/dist";
        });
    }

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

        app.UseSession();

        // Middleware to get styling header
        app.Use(async (context, next) =>
        {
            // get style header from request
            if (context.Request.Headers.TryGetValue("styling", out var styling))
            {
                context.Session.SetString("styling", styling);
            }
            await next();
        });

        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");

            if (env.IsDevelopment())
            {
                endpoints.MapToVueCliProxy(
                    "{*path}",
                    new SpaOptions { SourcePath = "ClientApp" },
                    npmScript: "serve",
                    regex: "Compiled successfully");
            }

            // Add MapRazorPages if the app uses Razor Pages. Since Endpoint Routing includes support for many frameworks, adding Razor Pages is now opt -in.
            endpoints.MapRazorPages();
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";
        });
    }
}

Структура моего проекта

enter image description here enter image description here

...