title: How to stop the page postback using updatepanel
body: <p>I am using C#, Ajax for coding.</p>
  
  <p>Please see below code which I am using for ajax implementation.</p>
  
  <pre><code>&lt;div id="column2Container"&gt;
              &lt;ajax:ScriptManager ID="ScriptManager1" runat="server"&gt;
              &lt;/ajax:ScriptManager&gt;
              &lt;div id="column2"&gt;
                   &lt;ajax:UpdateProgress ID="uprogDestinationsTabs" runat="server" AssociatedUpdatePanelID="upDestinationTabs"&gt;
                      &lt;ProgressTemplate&gt;
                          &lt;span style="display: block; text-align: center"&gt;
                              &lt;p style="font-family: Verdana; font-size: larger; font-weight: bold;"&gt;
                                  &lt;img src="/Images/ajax-loader-circle-thickbox.gif" alt="Processing..." /&gt;&lt;br /&gt;
                                  &lt;br /&gt;
                                  Processing...&lt;/p&gt;
                          &lt;/span&gt;
                      &lt;/ProgressTemplate&gt;
                  &lt;/ajax:UpdateProgress&gt;
                  &lt;ajax:UpdatePanel ID="upDestinationTabs" runat="server" RenderMode="Inline" UpdateMode="Conditional"&gt;
                      &lt;ContentTemplate&gt;
                          &lt;CCIT.Web:DestinationTabs runat="server" /&gt;
                      &lt;/ContentTemplate&gt;
                  &lt;/ajax:UpdatePanel&gt;
              &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Actually what I am trying to do is that, you can see there is an .net usercontrol used inside updatepanel i.e. <code>&lt;CCIT.Web:DestinationTabs runat="server" /&gt;</code> this user control will render below html</p>
  
  <pre><code>&lt;ul class="tabHead tabs-nav"&gt;
      &lt;li class="tabLeftEnd"&gt;&lt;/li&gt;
      &lt;li id="tab-1"&gt;
      &lt;a class="load-fragment" href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/index.aspx"&gt;&lt;span&gt;Overview&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="tabs-selected" id="tab-2"&gt;
      &lt;a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/guide.aspx"&gt;&lt;span&gt;Guide&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-3"&gt;
      &lt;a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/flightschedule.aspx"&gt;&lt;span&gt;Flight Schedule&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-4"&gt;
      &lt;a href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/specialOffers.aspx"&gt;&lt;span&gt;Special Offers&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li id="tab-5"&gt;
      &lt;a class="load-fragment" href="/english/destinations_offers/destinations/asiapacific/india/newdelhi/photo.aspx"&gt;&lt;span&gt;Photos&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="tabRightEnd"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Please suggest what is wrong in the above ajax implementation as the above code is not working for me.</p>
  
  <p>Thanks.</p>
  
  <p>Best Regards,
  MS</p>