ASP.Net AJAX ModalPopupExtender: Performing an Asynchronous Postback

The ModalPopupExtender in the AjaxControlToolkit is great for showing a modal dialog in ASP.Net web sites. Recently I needed to have my dialog perform some server-side code when the user hit the 'Ok' button. This would require a postback which I wanted to be asynchronous so it would be seamless for the user.

I did this in two notable steps. Firstly, in order to have my button perform a postback, I didn't specify it in the OkControlID attribute on the ModalPopupExtender - if it is not specified as the OkControlID, the button behaves as normal. So I could then hook up a click handler in my server-side code and a postback is performed.

Secondly I put all the controls involved into an UpdatePanel - the target control, the popup panel and the ModalPopupExtender. This means that any postbacks performed by the popup will be asynchronous...mmm asynchronous.

And that's all there is to it! Example code below.

Jimmy

<asp:UpdatePanel ID="updMessage" runat="server">
    <ContentTemplate>
        <asp:LinkButton runat="server" ID="lnkContactUser" Text="Contact" OnClick="lnkContactUser_Click"></asp:LinkButton>
    <asp:Panel ID="pnlContactUser" runat="server">
        <asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
        <asp:TextBox ID="txtMessage" TextMode="multiline" Width="200px" Height="150px" runat="server"></asp:TextBox>
        <asp:Button ID="btnSend" runat="server" Text="send" OnClick="btnSend_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="cancel" />
    </asp:Panel>
    <ajax:ModalPopupExtender
        ID="ModalPopupExtender"
        runat="server"
        TargetControlID="lnkContactUser"
        PopupControlID="pnlContactUser"
        BackgroundCssClass="modalBackground"
        CancelControlID="btnCancel"
        />
    </ContentTemplate>
</asp:UpdatePanel>

 

Related posts

Comments

Add comment


 

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

September 9. 2010 09:35

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2010