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

时间:2008-12-10 17:08:23

标签: asp.net html ajax asp.net-ajax updatepanel

我最近一直在使用ASP.NET AJAX UpdatePanel控件来处理我一直在研究的一些内部网应用程序,并且在大多数情况下,我一直在使用它来动态刷新数据或隐藏和显示控件。基于用户行为的表格。

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

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

所以我处理它的方式是让我的动态行完全成为一个全新表的一部分,这是好的,但是你必须处理所有列与它上面的表手动对齐,并且是一个真正的痛苦,非常脆弱。

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

7 个答案:

答案 0 :(得分:5)

UpdatePanel呈现为DIV标记,因此表行之间无效。如果你想要的只是隐藏内容,同时保持你的(非常非常糟糕的)表格布局,那么在行中包含一个样式标记,其中包含ASP var,如下所示:

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

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

那就是说,在适当的布局旁边擦伤会让你受伤。

答案 1 :(得分:3)

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>

答案 2 :(得分:2)

答案:最后,使用UpdatePanel无法做到这一点。您可以实现的最好方法是刷新整个表,但不是单个行。

答案 3 :(得分:2)

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;
}

答案 4 :(得分:2)

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

如果整个表本身也在Updatepanel内,您可以更新表的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>  

答案 5 :(得分: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编码到表中。

答案 6 :(得分:0)

在我们的项目中,我们找到了这个问题的一些解决方案。我们必须创建复杂的raport,每行中有许多活动元素(用于编辑,接受等的按钮)。

我们创建了放在updatepanel中的div(用于在需要时更新整个表)。在这个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,但有效。