How to stop the page postback using updatepanel

Question

Hi Guys,

I am using C#, Ajax for coding.

Please see below code which I am using for ajax implementation.

<div id="column2Container">
            <ajax:ScriptManager ID="ScriptManager1" runat="server">
            </ajax:ScriptManager>
            <div id="column2">
                 <ajax:UpdateProgress ID="uprogDestinationsTabs" runat="server" AssociatedUpdatePanelID="upDestinationTabs">
                    <ProgressTemplate>
                        <span style="display: block; text-align: center">
                            <p style="font-family: Verdana; font-size: larger; font-weight: bold;">
                                <img src="/Images/ajax-loader-circle-thickbox.gif" alt="Processing..." /><br />
                                <br />
                                Processing...</p>
                        </span>
                    </ProgressTemplate>
                </ajax:UpdateProgress>
                <ajax:UpdatePanel ID="upDestinationTabs" runat="server" RenderMode="Inline" UpdateMode="Conditional">
                    <ContentTemplate>
                        <CCIT.Web:DestinationTabs runat="server" />
                    </ContentTemplate>
                </ajax:UpdatePanel>
            </div>
</div>  

Actually what I am trying to do is that, you can see there is an .net usercontrol used inside updatepanel i.e. <CCIT.Web:DestinationTabs runat="server" /> this user control will render below html

<ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li id="tab-1">
    <a class="load-fragment" href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"><span>Overview</span></a>
    </li>
    <li class="tabs-selected" id="tab-2">
    <a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"><span>Guide</span></a>
    </li>
    <li id="tab-3">
    <a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"><span>Flight Schedule</span></a>
    </li>
    <li id="tab-4">
    <a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"><span>Special Offers</span></a>
    </li>
    <li id="tab-5">
    <a class="load-fragment" href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx"><span>Photos</span></a>
    </li>
    <li class="tabRightEnd"></li>
</ul>

Now what I am trying to do is that when ever user will click any of these links that should be handled from Ajax, I mean there would not be any page postback while loading these pages i.e. why I am trying to use update panel.

Please suggest what is wrong in the above ajax implementation as the above code is not working for me.

Thanks.

Best Regards, MS

Answer 1

I think you are misunderstanding what a postback is. A postback is when the contents of a form are sent to the server for processing. When a user clicks on one of your links it isn't a postback. Nothing is being sent back to the server - they are just navigating to a new page.

Having the links in an updatepanel is not going to prevent the screen from refreshing or 'flickering' when the user navigates to a new page. The only time this would make a difference is if you were causing a postback (ex. clicking a button).

The only way to prevent the screen from refreshing while navigating from page to page would be to get the contents of a page using AJAX (not an update panel) and load that into a div.

You could use jquery's load function to do this:

1) Add a reference to jquery to your page

<script src="<%=ResolveUrl("~/Scripts/jquery-1.4.1.min.js") %>" type="text/javascript" />

2) Add a div to your page called called divContent

<div id="divContent"></div>

3) Add this bit of javascript to your page

<script type="text/javascript">
    function LoadPage(url) {
        $('#divContent').load(url, 'divContent');
    }
</script>

4) Make your links look like this:

<a href="javascript: LoadPage('path/to/page.aspx');"><span>Guide</span></a>