AccordionPane in ajax

.css

 .accheader
    {
        background-color:#2E4D7B;
        border:1px solid #2F4F4F;
        color:White;
        cursor:pointer;
        font-family: Arial,Sans-Serif;
        font-size:12px;
        font-weight:bold;
        margin-top:5px;
        padding:5px;
        width:730px;
       
       
   
    }
    .accheaderselected
    {
        background-color:#5078B3;
        border:1px solid #2F4F4F;
        color:White;
        cursor:pointer;
        font-family:Arial,Sans-Serif;
        font-size:12px;
        font-weight:bold;
        margin-top:5px;
        padding:5px;
        width:730px;
    }
    .acccontent
    {
        background-color:#D3DEEF;
        border-color:-moz-use-text-color #2F4F4F #2F4F4F;
        border-right: 1px dashed #2F4F4F;
        border-style: none dashed dashed;
        border-width: medium 1px 1px;
        padding: 10px 5px 5px;
        width:715px;
       
    }
 

.aspx


div class="accordation">
    <asp:Accordion ID="Accordion1" runat="server"
        FramesPerSecond="40" RequireOpenedPane="false" SuppressHeaderPostbacks="True"
        TransitionDuration="255" Enabled="true" HeaderCssClass="accheader"
        HeaderSelectedCssClass="accheaderselected" ContentCssClass="acccontent" FadeTransitions="true" AutoSize="Limit" SelectedIndex="0">
        <Panes>
            <asp:AccordionPane ID="AccordionPane1" runat="server">
            <Header><a href="" class="href">Articles</a></Header>
            <Content >
            <ul>
            <li>Animation/ Multimedia</li>
            <li>Engineering/ Technology</li>
           </ul>
             </Content>           
            </asp:AccordionPane>
        </Panes>
      </asp:Accordion>
</div>
  

read more

Ajax Progress bar

.ASPX
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
    </Triggers>
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Panel ID="Panel2" runat="server">
     <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="true">
        <ProgressTemplate >
       <div style="background-color: Gray; filter:alpha(opacity=60); opacity:0.60; width: 100%; top: 0px; left: 0px; position: fixed; height: 100%;">           
        </div>
        <div style="margin:auto;
              font-family:Trebuchet MS;
              filter: alpha(opacity=100);
              opacity: 1;
              font-size:small;
              vertical-align: middle;
              top: 45%;
              position: fixed;
              right: 45%;
              color: #275721;
              text-align: center;
              background-color: White;
              height: 100px;">
               <table style=" background-color: White; font-family: Sans-Serif; text-align: center; border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 0px;">
                <tr>
                <td style=" text-align: inherit;"><img src="load.GIF" alt="Loading"  /></td>
                <td style=" text-align: inherit;"><span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">Loading...</span></td>
                </tr>
                </table>
              </div>
        </ProgressTemplate>
        </asp:UpdateProgress>
         </asp:Panel>
    </ContentTemplate>
    </asp:UpdatePanel>


.CS

protected void Button1_Click(object sender, EventArgs e)
    {       
        System.Threading.Thread.Sleep(5000);
    }

image:- http://i.stack.imgur.com/veWrm.gif

read more

Ajax Popup extender

 .CSS

 .pop
        {
            background-color: #666699;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
        .popcontainer
        {
        background-color:Blue;
        border:2px solid #000000;
        padding: 0px 0px 0px 0px;
        width:800px;
       
        }
        .poptitle
        {
            background: url(../images/titlebar.jpg);
            height: 29px;
            }
           
            .titleleft
        {
            float:left;
            padding-left:5px;
            padding-top:5px;
            font-family:Arial, Helvetica, sans-serif;
            font-weight:bold;
            font-size:12px;
            color:#FFFFFF;
        }
            .titleright
        {
            background:url(../images/cross.png);
            background-position:right;
            background-repeat:no-repeat;
            height:15px;
            width:16px;
            float:right;
            cursor:pointer;
            margin-right:5px;
            margin-top:5px;
           
        }
        .popbody
        {
            padding:15px 15px 15px 15px;
            font-family:Arial;
            font-weight:bold;
            font-size:12px;
            color:#000000;
            line-height:15pt;
            clear:both;
            padding:20px;
        }
        .popbutton
        {
            margin:10px;
        }



Detailsview in Popup

.ASPX

<asp:Panel ID="pnlpop" runat="server" style="display:none">   
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="detailsviewstu" />
    </Triggers>
    <ContentTemplate>
         <div class="popcontainer">
                    <div class="poptitle">
                         <div class="titleleft">Student Details</div>
                              <div class="titleright" onclick="get('btnclose').click()">
                              </div>
                                </div>
                                    <div class="popbody" style="color: #FFFFFF">
                                        <asp:DetailsView ID="detailseditstu" runat="server" Height="50px" Width="90%"
                                            AutoGenerateRows="False" DataKeyNames="Stu_id" CellPadding="8"
                                            CellSpacing="8" ondatabound="detailseditstu_DataBound">
                       <Fields>
                          
                        
                           <asp:TemplateField HeaderText="City">
                               <EditItemTemplate>
                                   <asp:DropDownList ID="dropcity" runat="server" AutoPostBack="True"
                                       DataTextField="City_name" DataValueField="City_id" Width="200px">
                                   </asp:DropDownList>
                               </EditItemTemplate>
                               <InsertItemTemplate>
                                   <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                               </InsertItemTemplate>
                               <ItemTemplate>
                                   <asp:Label ID="Label5" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                               </ItemTemplate>
                               <HeaderStyle CssClass="stat" />
                               <ItemStyle CssClass="stat1" />
                           </asp:TemplateField>
                                                    
                       </Fields>
                                        </asp:DetailsView>
                                     </div>
                                 <div class="popbutton">
                              <asp:Button ID="btnok" runat="server" Text="ok" />
                            <asp:Button ID="btnclose" runat="server" Text="close" onclick="btnclose_Click"/>
                         </div>
                      </div>
   
    </ContentTemplate>
    </asp:UpdatePanel>
    </asp:Panel>
    <asp:Button ID="btnshow" runat="server" Text="Button" style="display:none"/>
    <asp:ModalPopupExtender ID="mdlpop" runat="server" TargetControlID="btnshow" PopupControlID="pnlpop" OkControlID="btnok"
    CancelControlID="btnclose" BackgroundCssClass="pop">
    </asp:ModalPopupExtender>
               

            </div>
            <div class="content_box_bottom">
            </div>
           
        </div>



.CS

protected void btnedits_Click(object sender, EventArgs e)
    {
        detailseditstu.ChangeMode(DetailsViewMode.Edit);
        binddetailspop();
        mdlpop.Show();
        bind_country();
    }
    protected void btnclose_Click(object sender, EventArgs e)
    {
        mdlpop.Hide();
        binddetails();
    }


Images :- http://www.mediafire.com/download/u7f7j1b629ius9e/img.rar

read more