Razor Pages中实现Bootstrap下拉选择联动Input Group图标切换

一、后端C#获取选中值并渲染图标 #

先在PageModel类中通过[BindProperty]绑定下拉框的值，这样表单提交时就能拿到选中的天气类型：

public class YourPageModel : PageModel
{
    [BindProperty]
    public string Weather { get; set; }

    // 表单提交触发的方法
    public IActionResult OnPost()
    {
        // 此时Weather就是下拉框选中的值，可用于后端逻辑处理
        return Page();
    }
}

然后修改前端代码，通过Razor语法根据选中值动态渲染图标（这里用Bootstrap Icons示例，可替换为你使用的图标库）：

<div class="input-group">
    <span class="input-group-text">
        @{
            // 用switch匹配天气和对应图标类
            var iconClass = Weather switch
            {
                "Sunny" => "bi bi-sun",
                "Partially Cloudy" => "bi bi-cloud-sun",
                "Windy" => "bi bi-wind",
                "Cloudy" => "bi bi-cloud",
                "Drizzle" => "bi bi-cloud-drizzle",
                "Rainy" => "bi bi-cloud-rain",
                "Stormy" => "bi bi-cloud-lightning",
                _ => ""
            };
        }
        <i class="@iconClass"></i>
    </span>
    <select id="weather" class="form-control" asp-for="Weather">
        <option selected disabled>Current Weather</option>
        <option value="Sunny">Sunny</option>
        <option value="Partially Cloudy">Partially Cloudy</option>
        <option value="Windy">Windy</option>
        <option value="Cloudy">Cloudy</option>
        <option value="Drizzle">Drizzle</option>
        <option value="Rainy">Rainy</option>
        <option value="Stormy">Stormy</option>          
    </select>
</div>

二、前端即时切换图标（无需提交表单） #

如果想要选中天气后立刻更新图标，不用等待表单提交，直接用JavaScript实现：

<div class="input-group">
    <span class="input-group-text" id="weather-icon-wrap">
        <i class=""></i>
    </span>
    <select id="weather" class="form-control">
        <option selected disabled>Current Weather</option>
        <option value="Sunny">Sunny</option>
        <option value="Partially Cloudy">Partially Cloudy</option>
        <option value="Windy">Windy</option>
        <option value="Cloudy">Cloudy</option>
        <option value="Drizzle">Drizzle</option>
        <option value="Rainy">Rainy</option>
        <option value="Stormy">Stormy</option>          
    </select>
</div>

<script>
    const weatherSelect = document.getElementById('weather');
    const iconElement = document.getElementById('weather-icon-wrap').querySelector('i');
    
    // 定义天气与图标类的映射关系
    const weatherIconMap = {
        'Sunny': 'bi bi-sun',
        'Partially Cloudy': 'bi bi-cloud-sun',
        'Windy': 'bi bi-wind',
        'Cloudy': 'bi bi-cloud',
        'Drizzle': 'bi bi-cloud-drizzle',
        'Rainy': 'bi bi-cloud-rain',
        'Stormy': 'bi bi-cloud-lightning'
    };
    
    // 监听下拉框变化事件
    weatherSelect.addEventListener('change', function() {
        const selectedWeather = this.value;
        iconElement.className = weatherIconMap[selectedWeather] || '';
    });
</script>

注意事项 #

• 示例中使用Bootstrap Icons，若你用其他图标库（如Font Awesome），替换对应图标类名即可。
• 后端绑定方式适合需要提交表单保存数据的场景，前端JS方式适合即时交互需求，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者iiky