ASP.NET Tutorial/Custom Controls/Action
Exposing Events from a User Control
File: Control.ascx
<%@ Control Language="C#" ClassName="TabStrip" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
public event EventHandler TabClick;
public int SelectedIndex
{
get { return dlstTabStrip.SelectedIndex; }
}
void Page_Load()
{
if (!Page.IsPostBack)
{
List<string> tabs = new List<string>();
tabs.Add("A");
tabs.Add("B");
tabs.Add("C");
dlstTabStrip.DataSource = tabs;
dlstTabStrip.DataBind();
dlstTabStrip.SelectedIndex = 0;
}
}
protected void dlstTabStrip_SelectedIndexChanged(object sender, EventArgs e)
{
if (TabClick != null)
TabClick(this, EventArgs.Empty);
}
</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>
File: Default.aspx
<%@ Page Language="C#" %>
<%@ Register TagPrefix="user" TagName="TabStrip" Src="~/Control.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
protected void TabStrip1_TabClick(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = TabStrip1.SelectedIndex;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<style type="text/css">
.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>
Use action (Event) in custom control
<%@ Page Language="VB" %>
<%@ Register TagPrefix="ACME" Namespace="MyCustomControls" Assembly="CustomControls"%>
<script runat="server">
sub Submit(Sender as Object, e as EventArgs)
"do nothing
end sub
sub ChangeIt(Sender as Object, e as EventArgs)
Response.write("Event handled!")
end sub
</script>
<html><body>
<form runat=server>
The custom control produces the following output:
<ACME:CustomControl id="MyControl" runat="server"
Message="Hello world!"
OnTextChanged="ChangeIt" />
<asp:Button runat="server"
Text="Submit"
OnClick="Submit" />
</form>
</body></html>
File: CustomControl.cs
using System;
using System.Web;
using System.Web.UI;
using System.Collections.Specialized;
namespace MyCustomControls {
public class CustomControl : Control, IPostBackDataHandler {
public event EventHandler TextChanged;
protected virtual void OnTextChanged(EventArgs e) {
TextChanged(this, e);
}
public bool LoadPostData(String PostDataKey, NameValueCollection Values) {
string strOldValue = this.Message;
string strNewValue = Values[PostDataKey];
if (strOldValue != strNewValue) {
this.Message = strNewValue;
return true;
}
return false;
}
public void RaisePostDataChangedEvent() {
OnTextChanged(EventArgs.Empty);
}
public string Message {
get {
return ViewState["Message"].ToString();
}
set {
ViewState["Message"] = value;
}
}
protected override void Render(HtmlTextWriter Output) {
Output.Write("<input name=" + this.UniqueID + " type=text value=\"" + this.Message + "\">");
}
}
}
File: CustomControl.vb
Imports System
Imports System.Web
Imports System.Web.UI
Imports System.Collections.Specialized
Namespace MyCustomControls
Public Class CustomControl : Inherits Control : Implements IPostBackDataHandler
public Event TextChanged(obj as object, e as eventargs)
protected sub OnTextChanged(e as EventArgs)
RaiseEvent TextChanged(Me, e)
end sub
Public Function LoadPostData(PostDataKey As String, Values As NameValueCollection) As Boolean Implements IPostBackDataHandler.LoadPostData
dim strOldValue as String = Me.Message
dim strNewValue as String = Values(postDataKey)
if not strOldValue = strNewValue
Me.Message = strNewValue
return true
end if
return false
End Function
Public Sub RaisePostDataChangedEvent() Implements IPostBackDataHandler.RaisePostDataChangedEvent
OnTextChanged(EventArgs.Empty)
end sub
public property Message as string
Get
Message = ViewState("Message").ToString
End Get
Set
ViewState("Message") = value
End Set
end property
Protected Overrides Sub Render(Output as HtmlTextWriter)
Output.Write("<input name=" & Me.UniqueID & " type=text value=""" & Me.Message & """>")
End Sub
End Class
End Namespace