Lecture – AJAX – TabPanel and Accordian

AJAX – TabPanel and Accordion Container Controls

Prerequisites

Lecture – AJAX – Getting Started

Summary

Demonstrates use of the Tab Panel and the Accordian controls in Ajax

Topics Covered in this Video;

-Container Controls
-Accordian
-Panes
-Tab Controls

Video 

Reference Materials

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EditAccordian.aspx.cs" Inherits="COP4834Spring2014WebForms.EditAccordian" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
    <div style="margin-left:10%">
        <asp:Label ID="Label1" runat="server" Text="Button Response"></asp:Label>    
    <ajaxToolkit:Accordion ID="Accordion1" runat="server" >
        <Panes>
        <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server" >
            <Header><h1>Accordian Pane 1</h1></Header>
            <Content>This<br/>is<br/>the<br/>contents<br/>of<br/>Pane<br/>1 <br/>
                <asp:Button ID="btn1" runat="server" Text="Button Panel 1" OnClick="btn1_Click" />
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
            <Header><h1>Accordian Pane 2</h1></Header>
            <Content>This<br/>is<br/>the<br/>contents<br/>of<br/>Pane<br/>2
                <asp:Button ID="btn2" runat="server" Text="Button Panel 2" OnClick="btn2_Click" />
            </Content>
        </ajaxToolkit:AccordionPane>            
        </Panes>
    </ajaxToolkit:Accordion>
        <asp:Button ID="btnOutside" runat="server" Text="Outside Panel" OnClick="btnOutside_Click" />
     </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>

___________________________________________________________________________________
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace COP4834Spring2014WebForms
{
    public partial class EditAccordian : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void btnOutside_Click(object sender, EventArgs e)
        {
            Label1.Text = "Button Outside Pressed";
        }
        protected void btn1_Click(object sender, EventArgs e)
        {
            Label1.Text = "Button 1 Pressed";
        }
        protected void btn2_Click(object sender, EventArgs e)
        {
            Label1.Text = "Button 2 Pressed";
        }
    }
} 
_________________________________________________________________________

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EditTabDialog.aspx.cs" Inherits="COP4834Spring2014WebForms.Pages.EditTabDialog" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
    <div style="margin-left:10%; margin-right:10%">
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
        <ajaxToolkit:TabPanel ID="tp1" HeaderText="Tab Panel 1" runat="server">
            <ContentTemplate>
                This is the contents of tab panel 1
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel ID="tp2" HeaderText="Tab Panel 2" runat="server">
            <ContentTemplate>
                This is the contents of tab panel 2
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
        </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>

Additional Information

COP 4834 Lectures Page