使用 AJAX 通过 asp.net 发送创建新用户的详细信息

Question

通过 ajax 将用户名和密码发送到 .net 中的代码隐藏页面的最佳方式是什么。

我有一个 index.aspx 页面，如下所示：

                    <asp:TemplatedWizardStep>
                        <CustomNavigationTemplate>


                            <div style="margin-bottom:7px;text-align:left;">To create an account, simply send us your e-mail address. A password will be sent to this address upon submission.</div>
                            <table border="0" cellpadding="3" cellspacing="0" style="width:99%;">
                                <tr>
                                    <td style="text-align:left; vertical-align:middle;width:90px;">E-Mail:</td>
                                    <td style="text-align:left; vertical-align:middle;">

                                        <asp:TextBox ID="UserName" runat="server" CssClass="newUserTextbox"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:left; vertical-align:middle;width:90px;padding-top:5px;">Screen name:</td>
                                    <td style="text-align:left; vertical-align:middle;padding-top:5px;">
                                        <asp:TextBox ID="ScreenName" runat="server" CssClass="newUserTextbox"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:left; vertical-align:middle;">&nbsp;</td>
                                    <td style="text-align:right; vertical-align:middle;padding-top:5px;">
                                            <asp:imagebutton ID="CreateUser" CommandName="CreateUser" Enabled="true"  runat="server" AlternateText="OK" ImageUrl="powerstats/inc/img/ok_up.png"></asp:imagebutton>

                                            <a href="javascript:InitializeLogin()"><img src="powerstats/inc/img/cancel_up.png" style="cursor:pointer;" onmouseover="SwapImageIndex(this,'cancel_ov.png')" onmouseout="SwapImageIndex(this,'cancel_up.png')" /></a>
                                    </td>
                                </tr>
                            </table>                                   
                        </CustomNavigationTemplate>
                    </asp:TemplatedWizardStep>

我希望单击 imagebutton 并向后端页面发送一个带有用户名和屏幕名（以及最终密码）的 ajax 调用。如果我这样做 onClick=X 页面会刷新。如果出现问题，我希望页面不要刷新并发送警报。

Answer 1

您需要使用UpdatePanel 和ScriptManager。如果提交发生在 UpdatePanel 内，它只会通过 AJAX 返回 UpdatePanel 本身内的内容。

如果你想处理可能出现的错误，你可以使用AsyncPostBackError Event 的ScriptManager。有关错误处理的完整示例，请参阅 MSDN page。

代码看起来像（+ 你的错误处理逻辑）：

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TemplatedWizardStep>
    <CustomNavigationTemplate>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
               /* Your login controls here ...
                  Make sure to include all the fields 
                  to be refreshed + the submit button */
            </ContentTemplate>
        </asp:UpdatePanel>
    </CustomNavigationTemplate>
</asp:TemplatedWizardStep>