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 で実装した例。
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;
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 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;
}
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;
}
{
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>
@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>
・・・
<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,
}
}
{
public enum BackgroundColor : byte
{
White = 1,
Black = 2,
}
}
最近のコメント