ASP.NET中DropdownList控制Table行(tr)显示隐藏问题求助

问题根源 #

你的ddllistType下拉列表放在了UpdatePanel内部，但需要控制显示状态的trlic行在UpdatePanel外部。ASP.NET的异步回传（AJAX）只会更新UpdatePanel范围内的内容，所以后台修改trlic的样式无法同步到前端页面。另外，trlic的style属性存在语法错误（多了一个转义引号：style="display:none;""），这也会导致样式失效。

修复方案 #

方案1：将目标行纳入UpdatePanel范围

修改前端代码，把trlic行移到UpdatePanel的ContentTemplate中，确保异步回传时能更新该行的状态：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"       
   Inherits="WebApplication18.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sc1" runat="server"></asp:ScriptManager>
        <div>
            <table id="tblid" runat="server">
                <tr id="tr11" runat="server">
                    <td>
                        <asp:Label ID="lblselect" runat="server" Text="Select List Type">  
                        </asp:Label>         
                    </td>
                    <td>
                        <asp:UpdatePanel ID="upd" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:DropDownList ID="ddllistType" runat="server"   
                                    AutoPostBack="true" OnSelectedIndexChanged="ddllistType_SelectedIndexChanged">
                                    <asp:ListItem Text="select" Value="0"></asp:ListItem>
                                    <asp:ListItem Text="Agent" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="Customer" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="Branch" Value="3"></asp:ListItem>
                                </asp:DropDownList>
                                <!-- 将trlic移到UpdatePanel内部 -->
                                <tr id="trlic" runat="server" style="display:none;">
                                    <td>
                                        <asp:Label ID="lblvalue" runat="server" Text="Item Types"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:CheckBoxList ID="cblItemType" runat="server">
                                            <asp:ListItem Text="Premium" Value="1"></asp:ListItem>
                                            <asp:ListItem Text="Budget" Value="2"></asp:ListItem>
                                            <asp:ListItem Text="Normal" Value="3"></asp:ListItem>
                                        </asp:CheckBoxList>
                                    </td>
                                </tr>
                            </ContentTemplate>
                        </asp:UpdatePanel>                        
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

方案2：给目标行单独添加UpdatePanel并设置触发器

如果不想移动trlic的位置，可以为其单独创建一个UpdatePanel，并设置触发器监听ddllistType的选中事件：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"       
   Inherits="WebApplication18.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sc1" runat="server"></asp:ScriptManager>
        <div>
            <table id="tblid" runat="server">
                <tr id="tr11" runat="server">
                    <td>
                        <asp:Label ID="lblselect" runat="server" Text="Select List Type">  
                        </asp:Label>         
                    </td>
                    <td>
                        <asp:UpdatePanel ID="upd" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:DropDownList ID="ddllistType" runat="server"   
                                    AutoPostBack="true" OnSelectedIndexChanged="ddllistType_SelectedIndexChanged">
                                    <asp:ListItem Text="select" Value="0"></asp:ListItem>
                                    <asp:ListItem Text="Agent" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="Customer" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="Branch" Value="3"></asp:ListItem>
                                </asp:DropDownList>
                            </ContentTemplate>
                        </asp:UpdatePanel>                        
                    </td>
                </tr>
                <!-- 为trlic单独创建UpdatePanel -->
                <asp:UpdatePanel ID="updTrlic" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <tr id="trlic" runat="server" style="display:none;">
                            <td>
                                <asp:Label ID="lblvalue" runat="server" Text="Item Types"></asp:Label>
                            </td>
                            <td>
                                <asp:CheckBoxList ID="cblItemType" runat="server">
                                    <asp:ListItem Text="Premium" Value="1"></asp:ListItem>
                                    <asp:ListItem Text="Budget" Value="2"></asp:ListItem>
                                    <asp:ListItem Text="Normal" Value="3"></asp:ListItem>
                                </asp:CheckBoxList>
                            </td>
                        </tr>
                    </ContentTemplate>
                    <Triggers>
                        <!-- 添加触发器，监听下拉列表的选中事件 -->
                        <asp:AsyncPostBackTrigger ControlID="ddllistType" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </table>
        </div>
    </form>
</body>
</html>

优化后台代码 #

可以直接使用控件的Visible属性替代手动添加样式，逻辑更清晰：

protected void ddllistType_SelectedIndexChanged(object sender, EventArgs e)
{
    try
    {
        trlic.Visible = !ddllistType.SelectedValue.Equals("1");
    }
    catch (Exception ex)
    {
        // 建议添加异常日志，方便排查问题
        // Logger.Error(ex.Message, ex);
    }
}

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