スポンサーリンク
Microsoft Public Affiliate Program (JP)(マイクロソフトアフィリエイトプログラム)
スポンサーリンク
カタログ通販ベルーナ(Belluna)

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

ASP.NET Core
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;
        }
    }
}
 
 
ASP.NET Coreサービスの起動設定処理に、新規作成したUserSettingServiceサービスクラスを追加する。
 
Startup.cs
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>
 ・・・
 

ビューとコントローラーの両方で使う定数。
 
enums.cs
namespace WebAppTest.Common
{
    public enum BackgroundColor : byte
    {
        White = 1,
        Black = 2,
    }
}
 
 
 

コメント

スポンサーリンク
ダイレクトテレショップ 公式通販サイト_キャンペーン
スポンサーリンク
Brandear オークション(ブランディア公式オークション)
タイトルとURLをコピーしました