Post
Ask Question

Custom Controls with User Controls in ASP.Net: Part 4

Introduction

Continuous from Part - 3, in previous article we have learn how User Controls exposes the properties. Now in this article we will discuss how to expose the event from a User Control. Exposing events is useful when we need to pass information up to the containing page. For example, we want to create a custom tab strip with a User control. When a user clicks a tab, we want to change the content displayed in the page as given below in image.

A good example on MINDCRACKER given below that is using User Control event exposing.

Custom1.gif

Look at above picture, this image is belongs to MINDCRACKER Polls. In above image you can see two tabs named Poll and Result that is created (can be created) by using User Control Even exposing. There is nothing like AJAX used.

Now let's take a look to create above one ourselves.

TabStrip.ascx File Code

 <%@ 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("Poll")
            tabs.Add("Result")

            ' 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>

The tab strip is created with the help of a DataList control. The DataList control displays links for each of the items created in the Page_Load() event handler. Notice that the TabStrip control exposes an event named TabClick. This event is raised in the dlstTabStrip_SelectedIndexChanged() event handler when a user clicks a tab.

The page given below uses the TabStrip control to display different content depending on the tab selected.

Default.aspx File Code

 <%@ Page Language="VB" CodeFile="Default.aspx.vb" Inherits="_Default"%>

<%@ Register TagPrefix="user" TagName="TabStrip" Src="~/TabStrip.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:#3399ff;
            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>MINDCRACKER POLLS</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="Poll" runat="server">
            <b>Silverlight vs Flash</b><br />
            Will Silverlight overtake Flash.<br /><br />
            More Details will go from here.<br /><br /><br /><br />
        </asp:View>
        <asp:View ID="Result" runat="server">
            <b>Silverlight vs Flash</b><br />
            Will Silverlight overtake Flash.<br /><br />
            More Details will go from here.<br /><br /><br /><br />
        </asp:View>
    </asp:MultiView>
    </div>

    </div>
    </form>
</body>
</html>

The page given above includes an event handler for the TabStrip control's TabClick event. When we click a tab, the index of the selected tab is retrieved from the tab strip, and the View control with the matching index is displayed.

Custom2.gif

Now think how cool it is.

Note: Continue in next part.

HAVE A GREAT CODING!


Similar Articles