Cant seem to hide TableRow on AJAX postback
I wolud like to hide/unhide a TableRow through ASP.NET AJAX when a checkbox is clicked.
I have this code for the checkbox:
<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>
and this for the TableRow
<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell VerticalAlign="Middle">Test Row</asp:TableCell>
</asp:TableRow>
This method is called when the checkbox is clicked:
protected void OnViewPages(object sender, EventArgs e)
{
if(cbViewPages.Checked)
{
PagesRow.Visible = true;
}
else
{
PagesRow.Visible = false;
}
}
OnViewPages is definitely called, I can see that through the debugger. And if I remove the AJAX code, O开发者_开发问答nViewPages is hidden/unhidden as required.
Why doesn't this hide/unhide functionality work with the AJAX code?
Doh! I have a partial answer, the TableRow is not in the Update panel. But you cant put an UpdatePanel around a TableRow. So that's my new question, how do you put an UpdatePanel around a TableRow?
A couple of options. You could put the update panel around the entire table (this is what Petras is suggesting). You could also use JavaScript to do this. In the event that fires when your checkbox is checked/unchecked, just call
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "setRowVisibility", "setRowVisibility(" & IIf(cbViewPages.Checked, "true", "false") & ");", True)
This will call a JavaScript function you can define on your page like this:
function setRowVisiblity(visible) {
var row = document.getElementById('<%=PagesRow.ClientID %>');
if (visible) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
}
This is MUCH more efficient than using and Update Panel, but it's a little more work. I prefer efficiency, but that's just me. :)
Here's the solution: ASPX page
<%@ 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>
Code behind page:
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;
}
}
}
加载中,请稍侯......
精彩评论