ASP.NET UpdatePanel根据Radiobutton隐藏/显示行

时间:2011-06-29 11:22:10

标签: asp.net ajax

这是RadioButton

<tr class="choose">
    <td>
        Are you a director or company secretary of this nonprofit?
    </td>
    <td>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:RadioButtonList ID="isDirector" RepeatDirection="Horizontal" runat="server"
                    AutoPostBack="True" OnSelectedIndexChanged="isDirector_CheckedChanged">
                    <asp:ListItem Text="Yes" Value="True" Selected></asp:ListItem>
                    <asp:ListItem Text="No" Value="False"></asp:ListItem>
                </asp:RadioButtonList>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:RequiredFieldValidator ID="isDirectorCompleted" Display="None" runat="server"
            ErrorMessage="Are you company director/secretary must be selected." ControlToValidate="isDirector"></asp:RequiredFieldValidator>
    </td>
</tr>

然后这是我试图隐藏的行

<asp:UpdatePanel ID="UpdatePanel9" runat="server">
    <ContentTemplate>
        <tr runat="server" id="test">
            <td class="title">
                Director First Name:
            </td>
            <td>
                <asp:TextBox ID="DirectorfirstNametxt" runat="server" MaxLength="100" CssClass="input"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" Display="None" runat="server"
                    ErrorMessage="Director First Name is required." ControlToValidate="DirectorfirstNametxt"></asp:RequiredFieldValidator>
            </td>
        </tr>
    </ContentTemplate>
</asp:UpdatePanel>

我基本上想要隐藏/显示整个TR,但基本上它什么都不做,并且取决于使用updatemode="conditional"它似乎工作但在屏幕上添加了额外的tr。

protected void isDirector_CheckedChanged(object sender, EventArgs e)
{
    if(isDirector.SelectedValue == "True")
    {
        test.Visible = false;

    }
    else
    {
        test.Visible = true;

    }
}

但现在正在工作,因为我想隐藏/显示基本<tr runat="server" id="test">而不添加额外的trs

编辑:只是不明白为什么而不是隐藏/显示它离开现有的原样。而是隐藏/显示完全不同的一个。

4 个答案:

答案 0 :(得分:1)

尝试声明您尝试修改的HtmlControl

protected HtmlControls.HtmlTableRow test;

private void isDirector_CheckedChanged(object sender, EventArgs e)
{
    if(isDirector.SelectedValue == "True")
    {
        test.Visible = false;
    }
    else
    {
        test.Visible = true;
    }
}

答案 1 :(得分:1)

说实话,我觉得桌子搞砸了你。

您创建的标记基本上是:

<table>
    <div id="theUpdatePanel">
        <tr><td>...</td></tr>
    </div>
</table>

并且<div>无效。您应该尝试将内容放入<div>。我还使第二个更新面板成为条件,并触发单选按钮。

<asp:UpdatePanel ID="UpdatePanel9" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div runat="server" id="test">
            Director First Name:
            <asp:TextBox ID="DirectorfirstNametxt" runat="server" MaxLength="100" CssClass="input"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" Display="None" runat="server"
                ErrorMessage="Director First Name is required." ControlToValidate="DirectorfirstNametxt"></asp:RequiredFieldValidator>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="isDirector" EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>

编辑1: 根据HTML规范,<table>元素不能直接包含<div>元素。 UpdatePanel呈现为<div>,从而生成无效标记。

以下两者均有效:

<div id="theUpdatePanel">
    <table>
        <tr><td>asdf</td></tr>
    </table>
</div>

或:

<table>
    <tr><td>    <div id="theUpdatePanel1">foo</div>    </td></tr>
    <tr><td>    <div id="theUpdatePanel2">bar</div>    </td></tr>
</table>

编辑2 - 这个怎么样?

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr class="choose">
    <td>
        Are you a director or company secretary of this nonprofit?
    </td>
    <td>

                <asp:RadioButtonList ID="isDirector" RepeatDirection="Horizontal" runat="server"
                    AutoPostBack="True" OnSelectedIndexChanged="isDirector_CheckedChanged">
                    <asp:ListItem Text="Yes" Value="True" Selected></asp:ListItem>
                    <asp:ListItem Text="No" Value="False"></asp:ListItem>
                </asp:RadioButtonList>

        <asp:RequiredFieldValidator ID="isDirectorCompleted" Display="None" runat="server"
            ErrorMessage="Are you company director/secretary must be selected." ControlToValidate="isDirector"></asp:RequiredFieldValidator>
    </td>
</tr>
            <tr runat="server" id="test">
            <td class="title">
                Director First Name:
            </td>
            <td>
                <asp:TextBox ID="DirectorfirstNametxt" runat="server" MaxLength="100" CssClass="input"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator5" Display="None" runat="server"
                    ErrorMessage="Director First Name is required." ControlToValidate="DirectorfirstNametxt"></asp:RequiredFieldValidator>
            </td>
        </tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

答案 2 :(得分:1)

解决问题的最具体方法是从后面的代码中动态添加控件。

如果没有必要,这可能是一种痛苦,因此使用ASP:Table,ASP:TableRow等而不是HTML控件也可能会解决您的问题。

示例:

    <asp:Table ID="Table1" runat="server">
        <asp:TableRow runat="server" ID="test">
            <asp:TableCell runat="server">
            <asp:TextBox ID="DirectorfirstNametxt" runat="server" MaxLength="100" CssClass="input"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" Display="None" runat="server" ErrorMessage="Director First Name is required." ControlToValidate="DirectorfirstNametxt"/>
            </asp:TableCell>  
        </asp:TableRow>
    </asp:Table>

然后按照 test.Visible = false 逻辑进行操作。

因为它们是为它构建的,所以ASP控件通常会更好地响应后面代码的操作。希望这会有所帮助。

答案 3 :(得分:0)

尝试使用此类组合来使用CSS类显示/隐藏服务器端的行。您必须更改控件上的“class”属性,并明确说明该设置。

CSS:

tr.HideRows > td
{
  display:none; 
}

tr.ShowRows > td
{
  display:inline;  
}

HTML:

<tr id="test" runat="server" class="HideRows">
  <td>
  </td>
</tr>

来源:

protected void isDirector_CheckedChanged(object sender, EventArgs e)     
{         
   if(isDirector.SelectedValue == "True")         
   {             
      this.Test.Attributes("class") = "ShowRows";              
   }         
   else         
   {             
      this.Test.Attributes("class") = "HideRows";            
   }     
}