ASP.NET UpdatePanel Скрытие / отображение строки в зависимости от радиобутона

Question

Это 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

РЕДАКТИРОВАТЬ: Просто не понимаю, почему вместо того, чтобы скрывать / показывать tr он оставляет существующий как есть.И вместо этого прячется / показывает совершенно другой.

Answer 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>

Edit 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>

Answer 2

Наиболее конкретный способ решения вашей проблемы - динамическое добавление элементов управления из кода.

Это может быть довольно болезненно, если в этом нет необходимости, поэтому использование 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 logic.

Поскольку они были созданы для него, элементы управления ASP обычно лучше реагируют на манипуляции со стороны кода. Надеюсь, это поможет.

Answer 3

Попробуйте объявить HtmlControl вашей попыткой изменить

protected HtmlControls.HtmlTableRow test;

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

Answer 4

Попробуйте эту комбинацию для отображения / скрытия строк на стороне сервера с использованием классов 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";            
   }     
}