ASP.NET Core で読み込む cssファイルを動的に変更する

HTMLの<head>で読み込まれるcssファイルをJavaScriptで変更する場合、 HTMLドキュメントが全て読み込まれた後じゃないとJavaScriptは実行されないので、画面初期表示される前にcssファイルをJavaScriptから変更することはできない。

画面初期表示のcssファイルをログインユーザー毎に変更したい場合、サーバーサイドで切り替える必要がある。
ASP.NET Core は、HTMLの<head>は _Layout.cshtml ビューに書かれているので、 _Layout.cshtml に依存関係の挿入（@inject）とRazor処理を追加することで実装できる。下記は ASP.NET Core 2.2 で実装した例。

依存関係の挿入（@inject）で使うサービスクラスを作成する。

UserSettingService.cs


using System.Security.Claims;
using Microsoft.AspNetCore.Identity;
using WebAppTest.Data;
using WebAppTest.Common;
 
namespace WebAppTest.Services
{
    public class UserSettingService
    {
        private readonly ApplicationDbContext _context;
        private readonly UserManager<IdentityUser> _userManager;
        private readonly SignInManager<IdentityUser> _signInManager;
 
        public UserSettingService(
            ApplicationDbContext context,
            UserManager<IdentityUser> userManager,
            SignInManager<IdentityUser> signInManager)
        {
            _context = context;
            _userManager = userManager;
            _signInManager = signInManager;
        }
 
        public BackgroundColor BackgroundColor(ClaimsPrincipal user)
        {
            if (!_signInManager.IsSignedIn(user))
            {
                return Common.BackgroundColor.White;
            }
            ユーザー処理、DB処理ごにょごにょ・・・
            return BackgroundColor.Black;
        }
    }
}

using System.Security.Claims;

using Microsoft.AspNetCore.Identity;

using WebAppTest.Data;

using WebAppTest.Common;

namespace WebAppTest.Services

{

public class UserSettingService

{

private readonly ApplicationDbContext _context;

private readonly UserManager<IdentityUser> _userManager;

private readonly SignInManager<IdentityUser> _signInManager;

public UserSettingService(

ApplicationDbContext context,

UserManager<IdentityUser> userManager,

SignInManager<IdentityUser> signInManager)

{

_context = context;

_userManager = userManager;

_signInManager = signInManager;

}

public BackgroundColor BackgroundColor(ClaimsPrincipal user)

{

if (!_signInManager.IsSignedIn(user))

{

return Common.BackgroundColor.White;

}

ユーザー処理、DB処理ごにょごにょ・・・

return BackgroundColor.Black;

}

ASP.NET Coreサービスの起動設定処理に、新規作成したUserSettingServiceサービスクラスを追加する。

Startup.cs


public void ConfigureServices(IServiceCollection services)
{
     一般的なサービス起動設定・・・
 
    services.AddTransient<UserSettingService>();
 
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

public void ConfigureServices(IServiceCollection services)

{

一般的なサービス起動設定・・・

services.AddTransient<UserSettingService>();

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

}

_Layout.cshtmlビューに、@using、@inject、@if を追加し、サーバーサイドで、ログインユーザー毎にcssファイル（site.css / site-black.css）を切り替える処理を実装する。

_Layout.cshtml


@using WebAppTest.Common
@using WebAppTest.Services
@inject UserSettingService UserSetting
<!DOCTYPE html>
<html>
<head>
    <meta charset=”utf-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>WebAppTest</title>
    <environment include=”Development”>
        <link rel=”stylesheet” href=”~/lib/bootstrap/dist/css/bootstrap.css” />
    </environment>
    <environment exclude=”Development”>
        <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”
              asp-fallback-href=”~/lib/bootstrap/dist/css/bootstrap.min.css”
              asp-fallback-test-class=”sr-only” asp-fallback-test-property=”position” asp-fallback-test-value=”absolute”
              crossorigin=”anonymous”
              integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” />
    </environment>
    @if (UserSetting.BackgroundColor(User) == BackgroundColor.White)
    {
        <link id=”cssfile” rel=”stylesheet” href=”~/css/site.css” />
    }
    else
    {
        <link id=”cssfile” rel=”stylesheet” href=”~/css/site-black.css” />
    }
</head>
<body>
 ・・・

@using WebAppTest.Common

@using WebAppTest.Services

@inject UserSettingService UserSetting

<!DOCTYPE html>

<html>

<head>

<title>WebAppTest</title>

</environment>

asp-fallback-href=”~/lib/bootstrap/dist/css/bootstrap.min.css”

asp-fallback-test-class=”sr-only” asp-fallback-test-property=”position” asp-fallback-test-value=”absolute”

crossorigin=”anonymous”

integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” />

</environment>

@if (UserSetting.BackgroundColor(User) == BackgroundColor.White)

{

}

else

{

}

</head>

<body>

・・・

ビューとコントローラーの両方で使う定数。

enums.cs


namespace WebAppTest.Common
{
    public enum BackgroundColor : byte
    {
        White = 1,
        Black = 2,
    }
}

namespace WebAppTest.Common

{

public enum BackgroundColor : byte

{

White = 1,

Black = 2,

}

参考
ASP.NET Core でのビューへの依存関係の挿入