Question

我希望我的用户能够更改正在加载的css文件，以便应用主题。我加载常规css，然后加载另一个＆＃34;主题＆＃34; css之后如此：

<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/dark_theme.css" />

我对如何实现这一目标有基本的了解，但我很有兴趣听到最有效的方法。我可能在用户的模型中有一个名为＆＃34; ThemeName＆＃34;的字符串。并根据控制面板中的选择表单进行更新。我将选择选项与css文件名相同，只需将模型的值插入到视图中，如下所示：

<link rel="stylesheet" href="~/css/site.css" />
@if (User.ThemeName != null) {
    <link rel="stylesheet" href="~/css/{User.ThemeName}.css" />
}

任何建议都将不胜感激。

Answer 1

所以我完全按照我在问题中解释的那样做了。

部分视图：

@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager

@if (SignInManager.IsSignedIn(User))
{
    if (UserManager.GetUserAsync(User).Result.ThemeName != null && UserManager.GetUserAsync(User).Result.ThemeName != "Default")
    {
        <link rel="stylesheet" href="~/css/@(UserManager.GetUserAsync(User).Result.ThemeName).css" />
    }
}

控制器：

// POST: /Manage/ChangeTheme
[HttpPost]
public async Task<IActionResult> ChangeTheme(ChangeThemeViewModel model)
{
    var user = await GetCurrentUserAsync();

    if (user == null)
    {
        return View("Error");
    }

    user.ThemeName = model.Theme;

    await _userManager.UpdateAsync(user);

    return RedirectToAction(nameof(Index));
}

我将通过将ThemeName存储为cookie /会话来扩展此功能，以避免对每个页面请求进行查询，并允许匿名用户利用黑暗主题。

Asp.net核心用户可选CSS

1 个答案: