Динамическое обновление строк в таблице HTML с помощью UpdatePanel

UpdatePanel отображается как тег DIV и поэтому недопустим между строками таблицы. Если все, что вам нужно, это скрыть содержимое, сохранив при этом (очень и очень плохой) макет таблицы, включите тег стиля в строку с переменной ASP для значения видимости, например:

<tr style = "display: <%= visible %>">
     <td></td>
</tr>

Затем вы при необходимости манипулируете видимой переменной.

Тем не менее, игнорирование правильного макета вредит вам здесь.

Если вы динамически создаете элементы управления, вы можете решить, какие элементы отображать или скрывать при создании элементов управления.

Вы также можете делать такие вещи:

<table>
    <tr id = "row1" runat = "server">
        <td>Label</td><td>Field</td>
    </tr>
</table>

И из кода позади:

row1.visible = false;

Модификация ответа @Rob Allen, сделайте следующее:

CSS

.hidden_row {
    display: none;
}

ASPX

<tr class = "<%= variable %>">

Та же идея, просто использование класса вместо кодирования CSS непосредственно в таблице.

UpdatePanels (или обратные передачи AJAX в целом) не следует использовать только для скрытия или отображения элементов. Если вам нужно обновить данные, это одно ... но в противном случае просто используйте javascript, чтобы изменить свойство display css.

Если вы используете клиентский фреймворк, такой как jQuery, это делает его еще проще - вы можете сделать что-то вроде этого:

<button onclick = "$('.inactive').toggle();">Toogle Inactive</button>

<table>
<tr class = "inactive"><td>Inactive 1</td></tr>
<tr class = "inactive"><td>Inactive 2</td></tr>
<tr><td>Active 1</td></tr>
<tr><td>Active 2</td></tr>
</table>

Ответ: В конце концов, это невозможно сделать с помощью UpdatePanel. Лучшее, что вы можете достичь, - это обновить всю таблицу, а не отдельные строки.

В нашем проекте мы нашли решение этой проблемы. Нам пришлось создать сложные рапорты с множеством активных элементов в каждой строке (кнопки редактирования, принятия и т. д.).

Мы создали div, который помещается в панель обновлений (для обновления всей таблицы при необходимости). В этом div мы создали таблицу с определением заголовка и отдельными таблицами для каждой строки (эти таблицы помещаются в панели обновления). Для создания одинаковых столбцов в каждой строке мы должны использовать классы css для каждой ячейки таблицы.

Итак, у нас есть что-то вроде этого (в каждой строке у нас есть несколько кнопок, раскрывающихся списков, всплывающих подсказок и т. д., Но чтобы понять идею, я усек ее до одного столбца):

<UpdatePanel>
<DIV>
    <TABLE>
    <TR>
    <TH class = "h1">Name</TH>
    </TR>
    </TABLE>

    <UpdatePanel Id='InnerPanel1'>
        <TABLE>
        <TR>
        <TD class = "h1">John</TD>
        </TR>
        </TABLE>
    </UpdatePanel>
</DIV>
</UpdatePanel>

Это не элегантно и генерирует большой HTML, но работает.

У меня была та же проблема, и я не нашел ее решения.

Вы МОЖЕТЕ обновить TD-части таблицы, если сама таблица также находится внутри Updatepanel !!

Не знаю почему. Меня устраивает.

<asp:UpdatePanel ID = "UpdatePanel1" runat = "server"><ContentTemplate> <table ID = "Table1">
<tr>
<td >
...
</td>
<asp:UpdatePanel ID = "UpdatePanel2" runat = "server" UpdateMode = "Conditional">
<ContentTemplate>
<td >
....
</td>
<td >
...
</td>
<td >
...
</td>
</ContentTemplate>
</asp:UpdatePanel> 

</tr>

 </table></ContentTemplate></asp:UpdatePanel>  

Код asp:

<asp:ScriptManager ID = "ScriptManager1" runat = "server">
</asp:ScriptManager>
<table width = "100%">
    <tr>
        <td style = "width: 300px">
            Employee First Name
        </td>
        <td>
            <asp:TextBox ID = "txtFname" runat = "server"></asp:TextBox>
        </td>
    </tr>
    <asp:UpdatePanel ID = "UpdatePanel1" runat = "server">
        <ContentTemplate>
            <tbody>
                <tr>
                    <td style = "width: 300px">
                        Date Of Birth
                    </td>
                    <td>
                        <asp:TextBox ID = "txtDOB1" runat = "server" OnTextChanged = "txtDOB_TextChanged" AutoPostBack = "true"></asp:TextBox>
                        <asp:CalendarExtender ID = "txtDOB1_CalendarExtender" runat = "server" Enabled = "True"
                            TargetControlID = "txtDOB1">
                        </asp:CalendarExtender>
                    </td>
                </tr>
                <tr>
                    <td style = "width: 300px">
                        Age
                    </td>
                    <td>
                        <asp:TextBox ID = "txtAge" Style = "font-weight: bold; font-size: large" runat = "server"
                            Enabled = "false"></asp:TextBox>
                    </td>
                </tr>
            </tbody>
        </ContentTemplate>
    </asp:UpdatePanel>
    <tr>
        <td align = "right" style = "width: 300px">
            <asp:Button ID = "btnSubmit" runat = "server" CssClass = "button" Text = "Submit" />
        </td>
        <td>
            <asp:Button ID = "btnClear" runat = "server" CssClass = "button" Text = "Reset" />
        </td>
    </tr>
</table>

Код класса:

protected void txtDOB_TextChanged(object sender, EventArgs e)
{
    try
    {
        DateTime Today = DateTime.Now;
        DateTime DOB = Convert.ToDateTime(txtDOB1.Text);
        ArrayList arr = new ArrayList();
        arr = span(Today, DOB);
        arr[0].ToString();//For Years
        arr[1].ToString();//For Months
        arr[2].ToString();//For Days
        txtAge.Text = "Y: " + arr[0].ToString()+",M: "+arr[1].ToString()+",D: "+arr[2].ToString();

    }
    catch (Exception ex)
    {

        lblError.Text = "Error : " + ex.Message ;
    }
}
public ArrayList span(DateTime f, DateTime l)
{
    int days;
    int months;
    int years;

    int fird = f.Day;
    int lasd = l.Day;

    int firm = f.Month;
    int lasm = l.Month;

    if (fird >= lasd)
    {
        days = fird - lasd;
        if (firm >= lasm)
        {
            months = firm - lasm;
            years = f.Year - l.Year;
        }
        else
        {
            months = (firm + 12) - lasm;
            years = f.AddYears(-1).Year - l.Year;
        }
    }
    else
    {
        days = (fird + 30) - lasd;
        if ((firm - 1) >= lasm)
        {
            months = (firm - 1) - lasm;
            years = f.Year - l.Year;
        }
        else
        {
            months = (firm - 1 + 12) - lasm;
            years = f.AddYears(-1).Year - l.Year;
        }
    }


    if (days < 0)
    {
        days = 0 - days;
    }
    if (months < 0)
    {
        months = 0 - months;
    }
    ArrayList ar = new ArrayList();
    ar.Add(years.ToString());
    ar.Add(months.ToString());
    ar.Add(days.ToString());
    return ar;
}