Event Creation of a User Control to the Main Page

In this article we will discuss about how to create and raise the event for user control which is being used on the application.


Introduction: In this Article we will discuss about how to create and raise the event for user control which is being used on the application. So as much as we know about the delegate which is normally known as function pointer in C# by using a delegate we have to raise an event to the user control which will show the content of the event on the main page or .aspx page. Here I am going to show you a simple example of delegate. Here I have one user control and one .aspx page. In which user control have a button only and .aspx page have a label and a dropdown list whenever we select any value from the drop down list and click on the button it will show the name of content at the main page. here we will call a method on main page using delegate.

Now we are going to make the project let us see how it is created follow the steps given below.

Step 1:

  1. Open the Visual Studio 2010.

  2. Open the web site application.

  3. Give any name.

Website Application

Step 2:  Now add a new folder to the site name as controls

  1. Add new item name as Web User Control to that folder.

  2. Click OK.

  3. It will look like as into the website shown below.

Add User Control

Step 3: Now we are going to drag and drop a button control on the Controls/WebUserControl.ascx. We can add the button control to the user control by writing the code given below to the source page of Controls/WebUserControl.ascx file which is given below.

Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="Controls_WebUserControl" %>
<asp:Button ID="Button1" runat="server" Text="Click me!" BackColor="#9999FF" BorderColor="Fuchsia" BorderStyle="Groove" onclick="Button1_Click" />

Step 4: Further you have to write the code in the Controls/WebUserControl.ascx.cs file of the user control.

Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Controls_WebUserControl : System.Web.UI.UserControl
{
   // Delegate declaration
  public delegate void btn_Click(string str);
   // Event declaration
  public event btn_Click btnHandler;
   // Page load
  protected void Page_Load(object sender, EventArgs e)
  {
  }
  protected void Button1_Click(object sender, EventArgs e)
  {
     // Check if event is null
     if (btnHandler != null)
      btnHandler(string.Empty);
     // Write some text to output
      Response.Write("User Control's Button Click <BR/>");
  }
}

Code Description: In the above code we have written simple a delegate and an event handler and on click event of the button we have to check whether the event handler is empty or not if it have any argument then it will raise the event.

Step 5: Now we have to open the source file of default.aspx and write the code given below.

Code :

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%
@ Register Src="~/Controls/WebUserControl.ascx" TagName="WebUserControl" TagPrefix="BC"
%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<
asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
   <p>
   <asp:Label ID="lbl" Text=" Main Page Content : " runat
="server"
BackColor="#0099FF"></asp:Label>
        <asp:DropDownList ID="dropdownselect" runat
="server"
BackColor="#FFCC99" Height="59px" Width="105px">
            <asp:ListItem>Amit</asp:ListItem>
            <asp:ListItem>Alok</asp:ListItem>
            <asp:ListItem>Rajesh</asp:ListItem>
            <asp:ListItem>Manoj</asp:ListItem>
            <asp:ListItem>Manish</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <BC:WebUserControl ID="WebUserControl1" runat="server" />
   </p
>
</asp:Content>

Code Description: Here we have add only one label and a dropdown list to the default page. Further we are using the user control by adding the directive to the source file of default.aspx.

Step 6: In this step we will write the code for the default.aspx.cs page which is given below.

Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
      {
            WebUserControl1.btnHandler += new Controls_WebUserControl.btn_Click(WebUserControl1_btnHandler);
      }
      void WebUserControl1_btnHandler(string str)
      {
           Response.Write("Main Page Event<BR/>Selected Value of drop down list is:    "  +                                        dropdownselect.SelectedItem.Text + "<BR/>");
      }  
}

Code Description: The above code will declare and define event of user control, when user Clicks on button which is inside user control. The given below event raised as I have called raised that event on button click.

Step 7: Now build the application by click on build option.

Before Run:

Before Run

Step 8: Further we have to run the application by pressing F5.

After Run: Select the name from the drop down list.

Select Item

Output : After selection Click the button user control it will raise an event which is shown in the output given below.

Output