带有CheckBox的ASP.NET更新面板 - 无法正常工作

时间:2010-04-15 15:57:40

标签: c# asp.net asp.net-ajax

我正在开发一个简单的演示项目,这样我就可以学习一些关于ASP.NET的AJAX功能的东西。我的问题是,我似乎无法让UpdatePanel与其内部的CheckBox一起正常工作。这是我在.aspx文件中使用的标记:

<%@ 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>&nbsp;</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>&nbsp;&nbsp;<asp:Label runat="server" ID="lblPaypalEmail" Text="Email:" /></td>
                                        <td><asp:TextBox runat="server" ID="tbPaypalEmail" Text="" Width="250px" /></td>
                                    </tr>
                                    <tr><td>&nbsp;</td></tr>
                                </asp:Panel>
                            </ContentTemplate>
                            <Triggers>
                                <asp:ASyncPostBackTrigger ControlID="chkPayPal" />
                            </Triggers>
                        </asp:UpdatePanel>
                        <tr><td>&nbsp;</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>&nbsp;</td></tr>
                    </table>
                </center>
            </div>
        </form>
    </body>
</html>

在我的代码背后,我有:

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

不是像我预期的那样使面板可见,而是在页面顶部添加另一个“PayPal”复选框。有什么想法吗?

1 个答案:

答案 0 :(得分:5)

我可以看到的第一件事是,由于Triggers位于CheckBox,因此您不需要CheckBox设置来查看UpdatePanel。您只需要在Triggers根据其外部内容进行刷新时使用UpdatePanel

我按原样使用了您的代码并对其进行了测试,无法重新创建您的问题,因此必须进行更多操作。你能提供更多代码吗?也许就在它上面定义表的位置?

编辑:我认为问题是Panel是在table中定义的,它会在div代码之间呈现tr。你不应该这样做,因为你制作了一些wackey表。将您的代码更改为:

<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>&nbsp;&nbsp;<asp:Label runat="server" ID="lblPaypalEmail" Text="Email:" /></td> 
                    <td><asp:TextBox runat="server" ID="tbPaypalEmail" Text="" Width="250px" /></td> 
                </tr> 
                <tr><td>&nbsp;</td></tr>
            </table>
        </asp:Panel> 
    </ContentTemplate>             
</asp:UpdatePanel>