Stone Coast Web Design's Weblog

Navigation

Search

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

| |

E-mail

Total Posts: 112
This Year: 50
This Month: 4
This Week: 0
Comments: 0

Thursday, May 22, 2008

Exposing Events from a User Control

Thursday, May 22, 2008 9:41:16 AM (Eastern Standard Time, UTC-05:00) ( )

You can expose events from a user control. After you expose the event, you can handle the event in the page that contains the user control. Exposing events is useful when you need to pass information up to the containing page. In this example, we create a custom tab strip with a user control. When a user clicks a tab, the content is changed.

The TabStrip control exposes an event named TabClick. This event is raised in the dlstTabStrip_SelectedIndexChanged() event handler when a tab is clicked.

Here is a working demo.

** TabStripUserControl.ascx **

<%@ Control Language="VB" ClassName="TabStrip" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
 
    Public Event TabClick As EventHandler
 
    ''' <summary>
    ''' The index of the selected tab
    ''' </summary>
    Public ReadOnly Property SelectedIndex() As Integer
        Get
            Return dlstTabStrip.SelectedIndex
        End Get
    End Property
 
    ''' <summary>
    ''' Create the tabs
    ''' </summary>
    Private Sub Page_Load()
        If Not Page.IsPostBack Then
            ' Create the tabs
            Dim tabs As New List(Of String)()
            tabs.Add("Products")
            tabs.Add("Services")
            tabs.Add("About")
 
            ' Bind tabs to the DataList
            dlstTabStrip.DataSource = tabs
            dlstTabStrip.DataBind()
 
            ' Select first tab
            dlstTabStrip.SelectedIndex = 0
        End If
    End Sub
 
    ''' <summary>
    ''' This method executes when a user clicks a tab
    ''' </summary>
    Protected Sub dlstTabStrip_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        RaiseEvent TabClick(Me, EventArgs.Empty)
    End Sub

</script>

<asp:DataList   
    id="dlstTabStrip"
    RepeatDirection="Horizontal"
    OnSelectedIndexChanged="dlstTabStrip_SelectedIndexChanged"
    CssClass="tabs"
    ItemStyle-CssClass="tab"
    SelectedItemStyle-CssClass="selectedTab"
    Runat="server">
    <ItemTemplate>
    <asp:LinkButton
        id="lnkTab"
        Text='<%# Container.DataItem %>'
        CommandName="Select"
        Runat="server" />
    </ItemTemplate>
</asp:DataList>

** TabStrip.aspx **

<%@ Page Language="VB" %>
<%@ Register TagPrefix="user" TagName="TabStrip" Src="TabStripUserControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
 
    Protected Sub TabStrip1_TabClick(ByVal sender As Object, ByVal e As EventArgs)
        MultiView1.ActiveViewIndex = TabStrip1.SelectedIndex
    End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <style type="text/css">
        html
        {
            background-color:silver;
            font:14px Georgia,Serif;
        }
        .tabs a
        {
            color:blue;
            text-decoration:none;
            font:14px Arial,Sans-Serif;            
        }
        .tab
        {
            background-color:#eeeeee;
            padding:5px;
            border:Solid 1px black;
            border-bottom:none;
        }
        .selectedTab
        {
            background-color:white;
            padding:5px;
            border:Solid 1px black;
            border-bottom:none;
        }
        .views
        {
            background-color:white;
            width:400px;
            border:Solid 1px black;
            padding:10px;
        }
    </style>
    <title>Show TabStrip</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <user:TabStrip
        ID="TabStrip1"
        OnTabClick="TabStrip1_TabClick" 
        Runat="Server" />
        
    <div class="views">
    <asp:MultiView
        id="MultiView1"
        ActiveViewIndex="0"
        Runat="server">
        <asp:View ID="Products" runat="server">
            <h1>Products</h1>
            We sell a variety of useful products...
        </asp:View>
        <asp:View ID="Services" runat="server">
            <h1>Services</h1>
            We offer a number of services...
        </asp:View>
        <asp:View ID="About" runat="server">
            <h1>About</h1>
            We were the first company to offer products and services...
        </asp:View>
    </asp:MultiView>
    </div>
        
    </div>
    </form>
</body>
</html>

Comments [0] | Trackback |

Name
E-mail
Home page

	Remember Me
Comment (HTML not allowed)
Enter the code shown (prevents robots):

Mostly Web Development

Navigation

Search

Categories

On this page

Archive

Blogroll