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>