Friday, May 15, 2009

AJAX - Panel

There is no doubt that the easiest way to implement AJAX in a Web Page is by using UpdatePanel, but is this way efficient? If you have a simple page, then you can use UpdatePanel and maybe you will have no issue on ussing that - DO NOT say it is fine to use it, I just said you will find no javascript error; However, nowadays most of us use MasterPages to build complete applications and there you will find issues. Let's see an example:

MasterPage.aspx

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>




This master page has two ContentPlaceHolder, so the Page that will use it will have two Contents too.




Default.aspx


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">



</asp:Content>



<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

</asp:Content>








Now, if we try to put one Panel Control for both Content, we realize almost inmediately that we are not allowed to do so. No other alternative, just put a PanelControl in the first Content, now our code will look like this:


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">


            <ContentTemplate>



            </ContentTemplate>

           </asp:UpdatePanel>                 
</asp:Content>








Everything works fine except that you have no control on the other content controls, so we add a new Panel for the the second Content.


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">


            <ContentTemplate>



            </ContentTemplate>

           </asp:UpdatePanel>                 
</asp:Content>




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">



    <asp:UpdatePanel ID="UpdatePanel2" runat="server">



    <ContentTemplate>

    <asp:Button ID="cmdQuit" runat="server" OnClick="cmdQuit_Click"


        Style="position: static; height: 28px;" Text="Quit" UseSubmitBehavior="True"


        Width="100px" />

             </ContentTemplate>


           </asp:UpdatePanel>                 


</asp:Content>







Now, you have control on the other content's controls. That was pretty easy!, However, Imagine you have a Quit button in the second content, and it needs to do a redirect to another page in order to quit the option, but not the application. Sooner you will realize that;

Response.redirect doesn't work now, there is a JavaScript issue, so our Response.redirect which is in the server side never gets executed. That has also a solution. You just need to add this into your config.web page.



<httpModules>

  <add type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" name="ScriptModule" />


</httpModules>




Now it works. However, there is something that cannot convince me at the end. The reason is here: http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
and I pretty agree with this, so now I will be working on find a more efficient way of doing the same.

No comments:

Post a Comment