似乎无法在 AJAX 回发中隐藏表格行答案

【问题标题】：Cant seem to hide TableRow on AJAX postback似乎无法在 AJAX 回发中隐藏表格行
【发布时间】：2010-01-22 00:15:01
【问题描述】：

我希望在单击复选框时通过 ASP.NET AJAX 隐藏/取消隐藏 TableRow。

我有这个复选框的代码：

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
  <asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages"  AutoPostBack="true"/>
</ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
  </Triggers>
</asp:UpdatePanel>

这个用于 TableRow

  <asp:TableRow runat="server" ID="PagesRow">
    <asp:TableCell VerticalAlign="Middle">Test Row</asp:TableCell>
  </asp:TableRow>

当复选框被点击时调用该方法：

  protected void OnViewPages(object sender, EventArgs e)
  {
    if(cbViewPages.Checked)
    {
      PagesRow.Visible = true;
    }
    else
    {
      PagesRow.Visible = false;
    }
  }

OnViewPages 肯定被调用了，我通过调试器可以看到。如果我删除 AJAX 代码，OnViewPages 会根据需要隐藏/取消隐藏。

为什么这个隐藏/取消隐藏功能不适用于 AJAX 代码？

哇！我有一个部分答案，TableRow 不在更新面板中。但是您不能在 TableRow 周围放置一个 UpdatePanel。所以这是我的新问题，如何在 TableRow 周围放置一个 UpdatePanel？

【问题讨论】：

标签： asp.net ajax tablerow

【解决方案1】：

几个选项。您可以将更新面板放在整个表格周围（这是 Petras 的建议）。您也可以使用 JavaScript 来执行此操作。如果在您的复选框被选中/取消选中时触发，只需调用

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "setRowVisibility", "setRowVisibility(" & IIf(cbViewPages.Checked, "true", "false") & ");", True)

这将调用您可以在页面上定义的 JavaScript 函数，如下所示：

function setRowVisiblity(visible) {
  var row = document.getElementById('<%=PagesRow.ClientID %>');
  if (visible) {
    row.style.display = 'table-row';
  } else {
    row.style.display = 'none';
  }
}

这比使用和更新面板要高效得多，但工作量要多一些。我更喜欢效率，但这只是我。 :)

【讨论】：

【解决方案2】：

解决方案如下： ASPX 页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

<asp:ScriptManager ID="scriptMgr" runat="server" />


<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
  <asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages"  AutoPostBack="true"/>


<asp:Table runat="server">

<asp:TableRow>
<asp:TableCell>123</asp:TableCell>
</asp:TableRow>

<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell>Row To Hide</asp:TableCell>
</asp:TableRow>
</asp:Table>

</ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
  </Triggers>
</asp:UpdatePanel>


</form>
</body>
</html>

页面背后的代码：

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;

public partial class index : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
  }

  protected void OnViewPages(object sender, EventArgs e)
  {
    if(cbViewPages.Checked)
    {
      PagesRow.Visible = true;
    }
    else
    {
      PagesRow.Visible = false;
    }
  }
}

【讨论】：