Цель
В настоящее время я работаю с 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 для первого рендера?
Диаграмма веб-последовательности
Вот простая диаграмма, описывающая приблизительно мой процесс и то, что я ищу:
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";
});
}
}
Структура моего проекта