ABP Razor Pages ile Kullanıcı Bazlı Tema Tercihi Uygulaması
🎯 Amaç
Bu yazıda, ABP Framework kullanan bir Single Layer Razor Pages projesinde kullanıcıya özel ayarların nasıl yönetileceğini öğreneceğiz. Örnek senaryo olarak kullanıcıların açık veya koyu tema tercihini uygulama arayüzüne yansıttığımız bir yapı geliştireceğiz.
🧩 Bu uygulamayla neler yapacağız?
- Her kullanıcı kendi tema tercihini seçebilecek
- Seçilen tema veritabanında kullanıcıya özel olarak saklanacak
- Kullanıcı uygulamaya tekrar girdiğinde, seçtiği tema otomatik olarak yüklenecek
Bu senaryo, kişisel ayarların kullanıcı bazlı nasıl yönetileceğini ve ABP Framework’ün ISettingManager
servisiyle nasıl çalıştığını pratik bir şekilde gösterecek.
📁 Proje Yapısı
UserBasedSetting.Web/
├── Pages/
│ ├── Index.cshtml / Index.cshtml.cs
│ └── Settings.cshtml / Settings.cshtml.cs
├── Settings/
│ ├── UserSettings.cs
│ └── UserThemeSettingDefinitionProvider.cs
└── UserBasedSettingWebModule.cs
📌 1. Ayar Anahtarının Tanımı
public static class UserSettings
{
public const string PreferredTheme = "AbpUserBasedSetting.User.PreferredTheme";
}
🧠 2. Ayar Tanımını Kaydet (UserThemeSettingDefinitionProvider)
public class UserThemeSettingDefinitionProvider : SettingDefinitionProvider
{
public override void Define(ISettingDefinitionContext context)
{
context.Add(
new SettingDefinition(
UserSettings.PreferredTheme,
defaultValue: "light",
isVisibleToClients: true
)
);
}
}
⚙️ 3. Ayar Sağlayıcısını Module Sınıfında Kaydet
Configure<AbpSettingOptions>(options =>
{
options.DefinitionProviders.Add<UserThemeSettingDefinitionProvider>();
});
💾 4. Tema Seçimi Sayfası (Settings.cshtml)
📄 Pages/Settings.cshtml
@page
@model AbpUserBasedSetting.Pages.SettingsModel
@{
}
<h3>Theme Preferences</h3>
<form method="post">
<select name="theme" asp-for="Theme">
<option value="light">Light Theme</option>
<option value="dark">Dark Theme</option>
</select>
<button type="submit">Save</button>
</form>
📄 Pages/Settings.cshtml.cs
[Authorize]
public class SettingsModel : PageModel
{
private readonly ISettingManager _settingManager;
private readonly ICurrentUser _currentUser;
public SettingsModel(ISettingManager settingManager, ICurrentUser currentUser)
{
_settingManager = settingManager;
_currentUser = currentUser;
}
[BindProperty]
public string Theme { get; set; }
public async Task OnGetAsync()
{
if (_currentUser.IsAuthenticated)
{
Theme = await _settingManager.GetOrNullForUserAsync(UserSettings.PreferredTheme, _currentUser.Id.Value);
}
}
public async Task<IActionResult> OnPostAsync()
{
if (_currentUser.IsAuthenticated)
{
await _settingManager.SetForUserAsync(_currentUser.Id.Value, UserSettings.PreferredTheme, Theme);
}
return RedirectToPage("/Index");
}
}
🏠 5. Tema Uygulaması (Ana Sayfa Index.cshtml)
📄 Pages/Index.cshtml
@{
var theme = Model.Theme ?? "light";
}
<a href="/settings" class="btn btn-primary mb-2 mt-2 ml-2 @theme">Settings</a>
📄 Pages/Index.cshtml.cs
public class IndexModel : AbpPageModel
{
private readonly ISettingManager _settingManager;
private readonly ICurrentUser _currentUser;
public IndexModel(ISettingManager settingManager, ICurrentUser currentUser)
{
_settingManager = settingManager;
_currentUser = currentUser;
}
public string Theme { get; set; }
public async Task OnGetAsync()
{
if (_currentUser.IsAuthenticated)
{
Theme = await _settingManager.GetOrNullForUserAsync(UserSettings.PreferredTheme, _currentUser.Id.Value);
}
Theme ??= "light";
}
}
📄 Pages/Index.cshtml.css
a.light {
background-color: white;
color: black;
}
a.dark {
background-color: #121212;
color: white;
}
🔍 Nasıl Çalışır?
AbpUserBasedSetting.User.PreferredTheme adlı özel bir ayar tanımlanır.
/Settings sayfasında kullanıcı tema tercihini belirler.
Tercih ISettingManager.SetForUserAsync ile kullanıcıya özel kaydedilir.
/Index sayfası açıldığında tema tercihi uygulanır.
🚀 Kurulum Adımları
- Repoyu Klonla
git clone https://github.com/icagatay/AbpUserBasedSetting.git
cd AbpUserBasedSetting
- Veritabanı Güncelle ve Projeyi Başlat
dotnet ef database update
dotnet run
🎉 Sonuç
Bu örnekle, ABP Framework’te ISettingManager kullanarak kullanıcı bazlı ayarların nasıl geliştirileceğini pratik bir şekilde uyguladık. Benzer şekilde dil tercihi, e-posta bildirim tercihi gibi birçok kişisel ayarı da aynı yöntemle yönetebilirsiniz.
Comments
No one has commented yet, be the first to comment!