How to Prevent moving to next tabpanel in Ajax Tab Container

See more:

ASP.NET

Hi
I have used Ajax Tab Container in my Page Which Has some 5 Tab Panels.
What i want in this is ,
Whenever user click on another tab i want to make sure that the current tab data is saved or not if not i want to give a user an alert to save the current tab data like yes/no.
if he clicks yes he should not go to the clicked tab panel, else he should move to next panel.


here is the code for my tab container

<asp:TabContainer ID="TabContainer" runat="server" width="800px"
       ActiveTabIndex="1" >

   <asp:TabPanel ID="tabpnl1" runat="server" >
   <HeaderTemplate>
   tabpanel1
   </HeaderTemplate>
       <ContentTemplate>
           <br />
           <br />
           
           <br />
           <asp:Button ID="Btnsave" runat="server" Text="Save" />
       </ContentTemplate>
   </asp:TabPanel>
    <asp:TabPanel  ID="tabpanel2" runat="server">
   <HeaderTemplate>
   tabpanel2
   </HeaderTemplate>
   <ContentTemplate>
       <br />
       
        <br />
        <asp:Button ID="BtnSave" runat="server" Text="Save" />
   </ContentTemplate>
   </asp:TabPanel>
    <asp:TabPanel  ID="tabpanel3" runat="server">
   <HeaderTemplate>
  tabpanel3
   </HeaderTemplate>
   <ContentTemplate>
       <br />
       <br /> &nbsp;<asp:Button ID="BtnSave" runat="server" Text="Save" />
   </ContentTemplate>
   </asp:TabPanel>
    <asp:TabPanel  ID="tabpanel4" runat="server">
   <HeaderTemplate>
 tabpanel4
   </HeaderTemplate>
   <ContentTemplate>
        <br />
     
         <br />
         <asp:Button ID="Btnsave" runat="server" Text="Save" />
   </ContentTemplate>
   </asp:TabPanel>
   <asp:TabPanel  ID="tabpanel5" runat="server">
   <HeaderTemplate>
 tabpanel5
   </HeaderTemplate>
   <ContentTemplate>
        <br />
      
         <br />
         <asp:Button ID="BtnSave" runat="server" Text="Save" />
   </ContentTemplate>
   </asp:TabPanel>
   
   
   </asp:TabContainer>

How to Do this. Please Advice.
Please