概要
ASP .NET CoreでSaaSを開発していた際に、
設定情報でCSSやらを切り替えたいと思って調べたことの備忘録。
環境
・Azure App Service
・Visual Studio 2019 Community
・ASP .NET Core 3.1
※プロジェクトはノーマルなWebアプリケーションで作成
参考
このページを見て作成しました。
ASP.NET Core でのビューへの依存関係の挿入
やりたかったこと
Azure App Serviceのアプリケーション設定(またはプロジェクト内のappsettings.json)で指定した値に応じて、
Webアプリが読み込むCSSや表示するロゴを変える。
→CSSや画像ファイル以外は同一コードにして、
見た目が少し違う(例えば違うブランディングをした)Webアプリを作成し
設定で簡単に切り替えられるようにする。
手順
①設定
まず、Azure App Serviceのアプリケーション設定に値を定義します。
キーも値も任意なのですが、ここでは
キー:ProductType
値:Hapikuro
とします。
②読み込むCSSを変える
_Layout.cshtmlでCSSを読み込んでいるので、
このファイルの先頭にまずは以下のコードを記述します。
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
string productType = Configuration["ProductType"];
}
CSS読込みの箇所を分岐させます。
@if (productType == "Hapikuro")
{
<link rel="stylesheet" href="~/css/site_hapikuro.css" />
}
else
{
<link rel="stylesheet" href="~/css/site.css" />
}
この方法だと簡単にできるんですが、
(よく考えたら・・・いやよく考えなくても)このままデプロイしちゃうと
問題な部分がありますね・・・。それはまた別の機会に書きます。