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

В последнее время я часто использую элемент управления ASP.NET AJAX UpdatePanel для некоторых приложений для интрасети, над которыми я работал, и по большей части использую его для динамического обновления данных или скрытия и отображения элементов управления в форме на основе действия пользователя.

Есть одно место, где у меня были небольшие проблемы, и мне интересно, есть ли у кого-нибудь совет. Моя форма использует довольно типичный макет на основе таблицы, где таблица используется для отображения сетки меток и полей для заполнения пользователем. (Я уже знаю, что некоторые макеты на основе таблиц не соблюдаются, и я понимаю плюсы и минусы. Но я сделал такой выбор, поэтому, пожалуйста, не отвечайте «Не используйте макет на основе таблицы».)

Теперь моя проблема в том, что бывают случаи, когда я хочу обернуть UpdatePanel вокруг ряда строк, чтобы я мог скрывать и отображать их динамически, но UpdatePanel на самом деле не позволяет вам этого делать. Основная проблема заключается в том, что он оборачивает div вокруг них, и, насколько я знаю, вы не можете обернуть div вокруг строк таблицы. Это не правильный HTML.

Таким образом, способ, которым я имел дело с этим, состоит в том, чтобы сделать мои динамические строки частью всей новой таблицы полностью, что нормально, но тогда вам придется иметь дело с выравниванием всех столбцов вручную с таблицей над ней, и это реально боль и довольно хрупкая.

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

10.12.2008 17:08:23
В ASP.Net Ajax должно быть что-то, что позволяет адаптировать отдельные элементы управления, как это делает Ajax Manager в Telerik, но что делать, когда я не хочу использовать тяжелые и дорогостоящие элементы управления Telerik.
user606274 7.02.2011 10:42:18
7 ОТВЕТОВ

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

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

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

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

5
10.12.2008 17:15:27
Если бы вы увидели мою форму, я думаю, вы бы поняли. Он очень похож на сетку, как и большинство корпоративных форм ввода данных. По моему мнению, это очень болезненно. Тем не менее, спасибо за совет.
jeremcc 10.12.2008 17:18:41
проверить макет необычных форм (Google) или developer.yahoo.com/yui/grids . Это не такая большая боль, как вы думаете. Я построил много приложений для интрасети, все из которых имеют формы.
Rob Allen 10.12.2008 17:22:09
Интересно ... Я просто знаю, что выложить это вручную сложно, но, возможно, с хорошей библиотекой, может, я стану новообращенным. ;-) Спасибо.
jeremcc 10.12.2008 17:25:21
Совсем неплохо с тэгом Fieldset (причудливые формы).
Rob Allen 10.12.2008 18:03:40
Хорошо, я видел это. Не совсем библиотека, а техника. Я попробую, когда у меня будет шанс. Еще раз спасибо.
jeremcc 10.12.2008 18:09:12

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

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

<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 непосредственно в таблицу.

2
11.12.2008 23:36:07
Вопрос, в частности, связан с использованием UpdatePanel для обновления строк как частичного обновления страницы. Если бы я обновлял всю страницу, то да, то, что вы говорите, было бы хорошо.
jeremcc 12.12.2008 20:08:25

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>
3
11.12.2008 23:40:01
Показ / скрытие - это всего лишь один пример. У меня есть и другие области, где я также обновляю данные ... например, обновляю набор связанных раскрывающихся списков, охватывающих несколько строк. Но спасибо за пример jQuery, он следующий в моем списке вещей для изучения.
jeremcc 12.12.2008 20:11:19
jQuery также упростит обновление таблицы, так как с простой UpdatePanel нет хорошего способа обновить отдельные строки без перезагрузки / перепривязки всей таблицы. С помощью jQuery вы сможете добавлять / удалять / перемещать / любые отдельные строки, если вы этого хотите.
Daniel Schaffer 12.12.2008 20:38:32
РЕШЕНИЕ

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

2
19.02.2009 07:37:40

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

Мы создали 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, но работает.

0
19.04.2011 22:56:35

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

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

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

<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>  
2
26.05.2012 08:19:47

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;
}
2
7.11.2012 08:54:59
Привет и добро пожаловать в ТАК. Пожалуйста, попробуйте объяснить свой ответ словами, а не только кодом. И поскольку вы отвечаете на трехлетний вопрос, на который уже несколько раз отвечали ранее, расскажите нам, чем ваш ответ отличается от других ответов.
Olle Sjögren 7.11.2012 08:50:50