ASP.NET Update Panel with CheckBox - Not Working Properly
Question
I'm working on a simple demo project so that I can learn some things about ASP.NET's AJAX capabilities. My problem is that I can't seem to get an UpdatePanel to work properly with a CheckBox inside of it. Here is the markup I'm using in my .aspx file:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanel.aspx.cs" Inherits="Testing.UpdatePanel" %>
<!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>
<title></title>
<style type="text/css">
td
{
font-family:Arial;
font-size:10pt;
}
#mainTable
{
background-color:#e3f3ff;
border:3px;
border-color:#000000;
border-style:solid;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<table id="mainTable">
<tr><td> </td></tr>
<asp:ScriptManager ID="SM1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<tr>
<td><asp:CheckBox ID="chkPaypal" runat="server" Text="Paypal" OnCheckedChanged="PayPal_CheckedChanged" AutoPostBack="true" /></td>
</tr>
<asp:Panel ID="pnlPayPal" runat="server" Visible="false">
<tr>
<td> <asp:Label runat="server" ID="lblPaypalEmail" Text="Email:" /></td>
<td><asp:TextBox runat="server" ID="tbPaypalEmail" Text="" Width="250px" /></td>
</tr>
<tr><td> </td></tr>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:ASyncPostBackTrigger ControlID="chkPayPal" />
</Triggers>
</asp:UpdatePanel>
<tr><td> </td></tr>
<tr>
<td colspan="2">
<center>
<asp:Button ID="btnRegister" runat="server" onclick="btnRegister_Click"
Text="Register" Height="30px" Width="80px" />
</center>
</td>
</tr>
<tr><td> </td></tr>
</table>
</center>
</div>
</form>
</body>
</html>
In my code behind, I have:
using System;
namespace Testing
{
public partial class UpdatePanel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnRegister_Click(object sender, EventArgs e)
{
}
protected void PayPal_CheckedChanged(object sender, EventArgs e)
{
pnlPayPal.Visible = chkPaypal.Checked;
}
}
}
Instead of making the panel visible as I anticipate, it is adding another "PayPal" checkbox at the top of the page. Any ideas?
1 answers
solution1
5 ACCPTED 2010-04-15 16:10:39
First thing I can see is you don't need the Triggers setup to look at your CheckBox since the CheckBox is in the UpdatePanel . You only need to use Triggers when you want the UpdatePanel to refresh based on something outside of it.
I have taken your code as is and tested it and cannot recreate your problem so there must be more going on. Can you supply more code? Maybe just above it where the table is being defined?
EDIT: I think the problem is your Panel is defined in a table which is rendering a div between your tr tags. You shoudn't do that because your making some wackey tables. Change your code to:
<asp:ScriptManager ID="SM1" runat="server" />
<table>
<tr>
<td><asp:CheckBox ID="chkPaypal" runat="server" Text="Paypal" OnCheckedChanged="PayPal_CheckedChanged" AutoPostBack="true" /></td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:ASyncPostBackTrigger ControlID="chkPayPal" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlPayPal" runat="server" Visible="false">
<table>
<tr>
<td> <asp:Label runat="server" ID="lblPaypalEmail" Text="Email:" /></td>
<td><asp:TextBox runat="server" ID="tbPaypalEmail" Text="" Width="250px" /></td>
</tr>
<tr><td> </td></tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.