Question

当点击一个复选框时，我想通过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不在Update面板中。但是你无法在TableRow周围放置一个UpdatePanel。这是我的新问题，你如何在TableRow周围放置一个UpdatePanel？

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

这比使用和更新面板更有效率 MUCH ，但它的工作要多一些。我更喜欢效率，但那只是我。：）

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

似乎无法在AJAX回发上隐藏Table Row

2 个答案: