如何在ASP Razor中实现无提交按钮的用户主题切换

我完全理解你的痛点——每次切换主题还要点提交按钮确实有点繁琐，咱们可以通过JavaScript结合Cookie存储来实现选中下拉选项立刻切换主题的效果，同时还能记住用户的选择，下次打开页面自动应用。下面给你两种方案，你可以根据需求选：

方案一：自动提交表单（简单易实现） #

这个方案不用改太多现有代码，只是让下拉框改变时自动提交表单，省去点击按钮的步骤，同时用Cookie保存用户的主题选择，刷新页面也能保持。

1. 改造Layout.cshtml的后端逻辑 #

先修改主题判断和CSS加载的代码，优先从Cookie读取用户的主题选择，Post请求时更新Cookie：

var totalMessage = "";
// 优先从Cookie取主题，默认设为白色模式（值为2）
var theme = Request.Cookies["Theme"]?.Value ?? "2";

if (IsPost)
{
    theme = Request["number"];
    // 把主题选择存在Cookie里，有效期30天
    Response.Cookies.Append("Theme", theme, new CookieOptions { 
        Expires = DateTime.Now.AddDays(30),
        Path = "/" // 确保全站都能读取到这个Cookie
    });
}

// 根据主题加载对应CSS
if (theme == "1")
{
    totalMessage = "dark mode";
    @Styles.Render("~/Styles/defaultdark.css")
    @Styles.Render("~/Styles/regaldark.css")
    @Styles.Render("~/Styles/globaldark.css")
}
else
{
    totalMessage = "white mode";
    @Styles.Render("~/Styles/1/defaultwhite.css")
    @Styles.Render("~/Styles/1/regalwhite.css")
    @Styles.Render("~/Styles/1/globalwhite.css")
}

2. 改造表单HTML #

去掉提交按钮，给下拉框加onchange事件，选中选项时自动提交表单，同时给当前选中的主题选项加上selected属性：

<form id="themeForm" action="" method="post">
    <p>
        <select name="number" onchange="document.getElementById('themeForm').submit();">
            <option value="">dear user select your favorit theme</option>
            <option value="1" @(theme == "1" ? "selected" : "")>dark mode</option>
            <option value="2" @(theme == "2" ? "selected" : "")>white mode</option>
        </select>
    </p>
</form>
<p>@totalMessage</p>

这样用户选中下拉选项后，页面会自动提交刷新，立刻应用新主题，而且下次打开页面会自动加载用户之前选的主题。

方案二：无刷新动态切换主题（用户体验更佳） #

如果不想页面刷新，咱们可以用JavaScript动态替换CSS文件，同时把主题选择存在Cookie里，全程无刷新，体验更流畅。

1. 改造Layout.cshtml的后端逻辑 #

还是先处理Cookie读取和默认主题，然后把主题CSS放在一个容器里，方便JS替换：

var totalMessage = "";
var theme = Request.Cookies["Theme"]?.Value ?? "2";

if (IsPost)
{
    theme = Request["number"];
    Response.Cookies.Append("Theme", theme, new CookieOptions { 
        Expires = DateTime.Now.AddDays(30),
        Path = "/"
    });
}

totalMessage = theme == "1" ? "dark mode" : "white mode";

2. 主题CSS容器与下拉框HTML #

把主题CSS放在一个带ID的容器里，同时改造下拉框，去掉表单，用JS处理切换：

<!-- 主题CSS容器，用于JS动态替换 -->
<div id="themeStylesContainer">
    @if (theme == "1")
    {
        <link rel="stylesheet" href="@Url.Content("~/Styles/defaultdark.css")">
        <link rel="stylesheet" href="@Url.Content("~/Styles/regaldark.css")">
        <link rel="stylesheet" href="@Url.Content("~/Styles/globaldark.css")">
    }
    else
    {
        <link rel="stylesheet" href="@Url.Content("~/Styles/1/defaultwhite.css")">
        <link rel="stylesheet" href="@Url.Content("~/Styles/1/regalwhite.css")">
        <link rel="stylesheet" href="@Url.Content("~/Styles/1/globalwhite.css")">
    }
</div>

<!-- 主题选择下拉框 -->
<p>
    <select id="themeSelector">
        <option value="">dear user select your favorit theme</option>
        <option value="1" @(theme == "1" ? "selected" : "")>dark mode</option>
        <option value="2" @(theme == "2" ? "selected" : "")>white mode</option>
    </select>
</p>
<p id="themeMessage">@totalMessage</p>

3. 添加JavaScript切换逻辑 #

在页面底部（或者布局文件的脚本区域）添加这段JS，实现无刷新切换：

document.addEventListener('DOMContentLoaded', function() {
    const themeSelector = document.getElementById('themeSelector');
    const themeStylesContainer = document.getElementById('themeStylesContainer');
    const themeMessage = document.getElementById('themeMessage');
    
    themeSelector.addEventListener('change', function() {
        const selectedTheme = this.value;
        if (!selectedTheme) return;
        
        // 更新提示文本
        themeMessage.textContent = selectedTheme === '1' ? 'dark mode' : 'white mode';
        
        // 定义不同主题对应的CSS文件路径
        let cssFiles = [];
        if (selectedTheme === '1') {
            cssFiles = [
                '@Url.Content("~/Styles/defaultdark.css")',
                '@Url.Content("~/Styles/regaldark.css")',
                '@Url.Content("~/Styles/globaldark.css")'
            ];
        } else {
            cssFiles = [
                '@Url.Content("~/Styles/1/defaultwhite.css")',
                '@Url.Content("~/Styles/1/regalwhite.css")',
                '@Url.Content("~/Styles/1/globalwhite.css")'
            ];
        }
        
        // 清空旧的CSS，添加新的CSS文件
        themeStylesContainer.innerHTML = '';
        cssFiles.forEach(file => {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = file;
            themeStylesContainer.appendChild(link);
        });
        
        // 保存主题选择到Cookie
        const expiryDate = new Date();
        expiryDate.setDate(expiryDate.getDate() + 30);
        document.cookie = `Theme=${selectedTheme}; expires=${expiryDate.toUTCString()}; path=/`;
    });
});

这个方案中，用户选中主题后页面不会刷新，立刻加载新的CSS文件，体验更流畅，而且同样会记住用户的选择。

内容的提问来源于stack exchange，提问作者m.zrn