使用 UpdatePanel 动态刷新 HTML 表中的行

Posted 2023-03-05

【中文标题】使用 UpdatePanel 动态刷新 HTML 表中的行

【英文标题】：Dynamically refreshing rows in an HTML table using an UpdatePanel

【发布时间】：2010-09-26 06:54:27

【问题描述】：

我最近一直在使用 ASP.NET AJAX UpdatePanel 控件来处理我一直在处理的一些 Intranet 应用程序，并且在大多数情况下，我一直在使用它来动态刷新数据或隐藏和显示控件基于用户操作的表单。

有一个地方我遇到了一些麻烦，我想知道是否有人有任何建议。我的表单使用非常典型的基于表格的布局，其中表格用于显示标签和字段的网格供用户填写。 （我已经知道有些人会避开基于表格的布局，我理解其利弊。但这是我做出的选择，所以请不要回答“不要使用基于表格的布局”。）

现在我的问题是，有时我喜欢将 UpdatePanel 包裹在一组行周围，以便我可以动态隐藏和显示它们，但 UpdatePanel 并没有真正让你去做。基本问题是它在它们周围包裹了一个 div，据我所知，您不能在表格行周围包裹一个 div。它不是有效的 html。

所以我一直在处理它的方法是让我的动态行完全成为一个全新表的一部分，这没关系，但是你必须手动将所有列与上面的表对齐，并且是一种真正的痛苦，而且非常脆弱。

所以，问题是......有人知道使用 UpdatePanel 或类似的东西动态生成或刷新行的任何技术吗？希望该解决方案几乎就像在页面上放置一个 UpdatePanel 一样简单，但即使没有，我仍然希望听到它。

【问题讨论】：

ASP.Net Ajax 应该可以像 Telerik 的 Ajax Manager 那样对单个控件进行 ajax 化，但是当我不想使用繁重且昂贵的 Telerik 控件时该怎么办。

【参考方案1】：

UpdatePanel 呈现为 DIV 标记，因此在表行之间无效。如果您只想在保持（非常非常糟糕的）表格布局的同时隐藏内容，请在行中包含一个样式标签，其中包含一个 ASP var 以获得如下可见性值：

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

然后根据需要操作可见变量。

也就是说，忽略适当的布局在这里会伤害您。

【讨论】：

如果你看过我的表格，我想你会明白的。它非常像网格，就像大多数公司数据输入表格一样。在我看来，使用所有 div 和 float 来布置它会非常痛苦。也就是说，谢谢你的提示。

查看精美的表单布局（谷歌搜索）或developer.yahoo.com/yui/grids。没有你想象的那么痛苦。我已经构建了许多 Intranet 应用程序，所有这些应用程序都有表单。

有趣...我只知道手工布置它很困难，但也许有一个好的库，也许我会成为一个皈依者。 ;-) 谢谢。

使用Fieldset标签（花式形式）一点也不差。

对，我看到了。不完全是一个图书馆，而是一种技术。有机会我会试一试。再次感谢。

【参考方案2】：

如果您是动态创建控件，则可以在生成控件时决定显示或隐藏哪些内容。

你也可以这样做：

<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 刷新行作为部分页面更新特别相关。如果我刷新整个页面，那么是的，你所说的就可以了。

【参考方案3】：

UpdatePanels（或一般的 AJAX 回发）不应仅用于隐藏或显示元素。如果您需要更新数据，那是一回事……但除此之外，只需使用 javascript 更改显示 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>

【讨论】：

显示/隐藏的东西实际上只是一个例子。我实际上也在其他领域更新数据......例如刷新一组跨越多行的相关下拉列表。但是感谢 jQuery 示例，这是我要学习的内容列表中的下一个。

jQuery 还可以更轻松地更新表格，因为使用直接的 UpdatePanel 没有好的方法可以在不重新加载/重新绑定整个表格的情况下更新单个行。使用 jQuery，您将能够添加/删除/移动/任何单独的行，如果这是您想要做的。

【参考方案4】：

回答：最后，没有办法使用 UpdatePanel 来做到这一点。您可以实现的最佳效果是刷新整个表格，而不是单个行。

【参考方案5】：

在我们的项目中，我们找到了这个问题的一些解决方案。我们必须创建复杂的报告，每行包含许多活动元素（编辑、接受等按钮）。

我们创建了放置在更新面板中的 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，但可以。

【参考方案6】：

我遇到了同样的问题，我偶然发现了一个解决方案。

如果整个表本身也在更新面板中，您可以更新表的 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>  

【参考方案7】：

ASP 代码：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table >
    <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;

【讨论】：

您好，欢迎来到 SO。请尝试用文字解释您的答案，而不仅仅是代码。由于您回答了一个 3 年前已经回答过多次的问题，请告诉我们您的答案与其他答案有何不同。