使用ajax制作流程引导页

Question

现在要做一个分步骤的修改密码的页面，用到了UpdatePanel控件。如图，打开这个页面只显示UpdatePanel1（灰色选中的框），当点击下一步，网页部分刷新（整个页面不闪动），显示下面白色的panel框。请问aspx页面代码怎么写？
附上自己写的代码：
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1"  runat="server" >
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
        </Triggers>
        <ContentTemplate>
            <table id="Table0" class="style1" style="width: 460px; background-color: #FFFFFF">
                <tr>
                    <td>
                        <table id="Table1" style="height: 60px; width: 160px;">
                            <tr>
                                <td align="right">
                                    旧密码：
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table id="Table2" style="height: 60px; width: 300px">
                            <tr>
                                <td align="left">
                                    <asp:TextBox ID="TextBox1" runat="server" Height="25px" Width="160px" TextMode="Password"></asp:TextBox>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td height="60px">
                        <asp:Button ID="Button1" runat="server" Height="35px" Text="下一步" Width="91px" OnClick="Button1_Click" />
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" CssClass="style1" runat="server">
    <ContentTemplate>
        <table id="Table3" style="width: 470px; background-color: #FFFFFF">
            <tr>
                <td align="right" width="165px" height="60px">
                    新密码：
                </td>
                <td align="left" width="305px" height="60px">
                    <asp:TextBox ID="TextBox2" runat="server" Height="25px" Width="160px" TextMode="Password"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td align="right" width="165px" height="60px">
                    确认密码：
                </td>
                <td align="left" width="305px" height="60px">
                    <asp:TextBox ID="TextBox3" runat="server" Height="25px" Width="160px" TextMode="Password"></asp:TextBox>
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox2"
                        ControlToValidate="TextBox3" ErrorMessage="两次密码不同!" ForeColor="Red"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td width="305px" height="60px">
                    <asp:Button ID="Button2" runat="server" Height="31px" Text="确认" Width="97px" OnClick="Button2_Click" />
                </td>
            </tr>
        </table>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>AjaxUpdatePanelASP

Answer 1

给table加上 runat="server"属性，这样在.cs页面就可以调用table了；点击下一步的后台代码中处理完以后加上
table0.Attributes.Add("style", "display:none");
table3.Attributes.Add("style", "display:block");既然你已经用了UpdatePanel控件，那么你的下一步点击按钮就不会有页面刷新的效果。

Answer 2

让UpdatePanel2中的Table3 runat=serverthis.Table3.Visible = true;

Answer 3

我在table0和table3的属性里添加了 runat=server
后台.CS代码如下：    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
        this.UpdatePanel1.Visible = true;
        this.UpdatePanel2.Visible = false;//默认显示上面部分
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Member member = new Member();
        member.Name = Session["Name"].ToString().Trim();
        member.Password = this.TextBox1.Text.ToString().Trim();
        if (MemberInfo.MemberQueryPwd(member) == 1)
        {
            Table0.Attributes.Add("style", "display:none");
            Table3.Attributes.Add("style", "display:block");//这样写点击下一步table0隐藏了，但是table3并没有显示出来
        }
        else
            Response.Write("error!");
    }
请问如何显示出updatepanel2来，莫非我Page_Load有错误？
还有updatepanel1的button1
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
       </Triggers>
这样写对么？