DropDownList选择值后无刷新显示勾选图标问题（含ASP.NET代码）

我来帮你搞定这个无刷新显示勾选图标的问题！你用UpdatePanel没生效大概率是配置上的小疏漏，咱们一步步来调整：

ASP.NET的UpdatePanel依赖ScriptManager才能实现无刷新回发，而且控件的嵌套关系一定要对。给你一个标准的配置模板：

<!-- 必须先放ScriptManager，放在页面最上方（比如form标签内的第一个控件） -->
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<!-- 包裹需要无刷新更新的控件 -->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <!-- 你的DropDownList -->
        <asp:DropDownList ID="cmbExpectedMarks1" runat="server" AutoPostBack="true" 
            OnSelectedIndexChanged="cmbExpectedMarks1_SelectedIndexChanged">
            <asp:ListItem Text="Average" Value="Average"></asp:ListItem>
            <asp:ListItem Text="Above Average" Value="AboveAverage"></asp:ListItem>
            <asp:ListItem Text="Excellent" Value="Excellent"></asp:ListItem>
        </asp:DropDownList>

        <!-- 用来显示勾选图标的Image控件，初始设为不可见 -->
        <asp:Image ID="imgCheckIcon" runat="server" Visible="false" 
            ImageUrl="~/Assets/check-icon.png" AlternateText="已选中" />
    </ContentTemplate>
    <!-- 可选：如果DropDownList不在UpdatePanel内部，就加这个触发器；如果已经在里面，这部分可以省略 -->
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cmbExpectedMarks1" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

在SelectedIndexChanged事件中，只要用户选中了任意选项，就把勾选图标设为可见就行：

protected void cmbExpectedMarks1_SelectedIndexChanged(object sender, EventArgs e)
{
    // 只要选中的不是空值（或者你可以判断是否选中了默认项），就显示图标
    if (!string.IsNullOrWhiteSpace(cmbExpectedMarks1.SelectedValue))
    {
        imgCheckIcon.Visible = true;
        // 进阶玩法：还能根据不同选项显示不同样式的图标
        // switch(cmbExpectedMarks1.SelectedValue)
        // {
        //     case "Average":
        //         imgCheckIcon.ImageUrl = "~/Assets/check-blue.png";
        //         break;
        //     case "Excellent":
        //         imgCheckIcon.ImageUrl = "~/Assets/check-green.png";
        //         break;
        // }
    }
    else
    {
        imgCheckIcon.Visible = false;
    }
    // 因为UpdatePanel用了Conditional模式，手动触发更新
    UpdatePanel1.Update();
}

1. 千万别漏了ScriptManager：没有这个控件，UpdatePanel完全不会工作，这是新手最容易忘的点！
2. 确认AutoPostBack是true：有时候不小心写成false，DropDownList选值后根本不会触发回发
3. 检查图片路径：如果图标不显示，先确认ImageUrl的路径是对的，用~/开头表示网站根目录更稳妥
4. 避免JS冲突：如果页面里有其他前端框架（比如jQuery），要确保它们和ASP.NET的AJAX脚本不冲突，可以暂时去掉其他脚本测试
5. UpdateMode的选择：用Conditional模式更高效，记得后台要调用UpdatePanel.Update()；如果用Always，会自动更新，但没必要的控件也会被刷新

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