Динамическое обновление строк в таблице HTML с помощью UpdatePanel
Я использую ASP.NET AJAX UpdatePanel много в последнее время для некоторых приложений интрасети, над которыми я работаю, и по большей части я использую его для динамического обновления данных или скрытия и отображения элементов управления в форме на основе действий пользователя.
есть одно место, где у меня были проблемы, и мне интересно, есть ли у кого-нибудь советы. Моя форма использует довольно типичный макет на основе таблицы, где таблица используется для отображения сетки меток и поля для заполнения пользователем. (Я уже знаю, что макеты на основе таблиц избегаются некоторыми людьми, и я понимаю плюсы и минусы. Но это выбор, который я сделал, поэтому, пожалуйста, не отвечайте "не используйте макет на основе таблицы".)
теперь моя проблема в том, что бывают моменты, когда я бы как чтобы обернуть UpdatePanel вокруг набора строк, чтобы я мог скрыть и показать их динамически, но UpdatePanel действительно не позволяет вам это делать. Основная проблема заключается в том, что он обертывает div вокруг них, и, насколько я знаю, вы не можете обернуть div вокруг строк таблицы. Это недопустимый HTML.
таким образом, я имею дело с этим, чтобы сделать мои динамические строки частью целой новой таблицы полностью, что нормально, но тогда вам придется иметь дело с выравниванием всех столбцов вручную с таблицей над ней, и это настоящая боль и довольно хрупкая.
Итак, вопрос... кто-нибудь знает какой-либо метод для динамического создания или обновления строк с помощью либо UpdatePanel или что-то подобное? Надеюсь, решение будет почти так же просто, как падение UpdatePanel на странице, но даже если нет, я все равно хотел бы его услышать.
7 ответов
UpdatePanel отображается как тег DIV и поэтому недопустим между строками таблицы. Если все, что вы хотите, это скрыть содержимое при сохранении вашего (очень очень плохого) макета таблицы, включите тег стиля в строку с ASP var там для значения видимости, как это:
<tr style="display: <%= visible %>">
<td></td>
</tr>
затем вы манипулируете видимой переменной по мере необходимости.
тем не менее, удаление правильной компоновки причиняет вам боль здесь.
UpdatePanels (или AJAX postbacks в целом) не должны использоваться для скрытия или отображения элементов. Если вам нужно обновить данные, это одно... но в противном случае просто используйте 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>
если вы динамически создаете элементы управления, вы можете решить, какие вещи отображать или скрывать при создании элементов управления.
вы также можете делать такие вещи:
<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 непосредственно в таблицу.
ответ: в конце концов, нет способа сделать это с помощью UpdatePanel. Лучшее, что вы можете достичь, это обновить всю таблицу, но не отдельные строки.
У меня была та же проблема, и я запнулся на решение.
вы можете обновить части 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;
}
в нашем проекте мы нашли решение этой проблемы. Нам пришлось создавать сложные raports с множеством активных элементов в каждой строке (кнопки для редактирования, принять и т. д.).
мы создали div, который помещается в updatepanel (для обновления всей таблицы при необходимости). В этом div мы создали таблицу с определением заголовка и отдельные таблицы для строк eaach (эти таблицы помещаются в панели обновления). Для создания равных столбцов в каждой строке мы должны использовать классы 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, но работает.