Melbourne Web Solutions|Design - Providing Web Design and Development for Brevard County, Florida
Contact Search Archive portfolio quotesubmit DesignVsDev AboutTheProcess Services

Raising event from a user control to parent page

by Nicole Wednesday, March 31, 2010 12:49 PM
User controls can be especially beneficial to use in your applications - They can reduce the amount of code on a page, split functionality between pages, and be reused in different parts of the application.

I think that one thing that deters developers from using user controls to their full potential is the problem of passing information from the user control to the parent. Going from the parent to the user control is cake (public properties and methods) but reverse the process and it can become intimidating.

I’m sure I’m not the first developer who really started using user controls once I figured out how to raise events from the user control to the parent page. And I’m here now to teach you exactly how to do just that.

For this example, I have one page EmailPerson.aspx and one user control, SendEmail.ascx. On the EmailPerson page, I have a simple repeater with some fake data, including name, position, and email address. Inside each repeater item is the SendEmail user control.

EmailPerson.aspx ASPX code

  1.     <asp:Label runat="server" ID="lblMessage" Font-Bold="true" ForeColor="Red" />
  2.     <br />
  3.     <br />
  4.     <asp:Repeater runat="server" ID="rptPeople">
  5.         <HeaderTemplate>
  6.             <table cellpadding="0" cellspacing="0" class="table" style="width: 720px">
  7.                 <tr>
  8.                     <td class="tdheading" style="width: 220px;">
  9.                         Name
  10.                     </td>
  11.                     <td class="tdheading" style="width: 300px;">
  12.                         Position
  13.                     </td>
  14.                     <td class="tdheading">
  15.                         Email Address
  16.                     </td>
  17.                 </tr>
  18.         </HeaderTemplate>
  19.         <ItemTemplate>
  20.             <tr>
  21.                 <td>
  22.                     <asp:Label runat="server" ID="lblName" Text='<%#Eval("Name") %>' />
  23.                 </td>
  24.                 <td>
  25.                     <asp:Label runat="server" ID="lblPosition" Text='<%#Eval("Position") %>' />
  26.                 </td>
  27.                 <td>
  28.                     <a href="javascript:;" runat="server" id="hlEmail"></a>
  29.                     <asp:HiddenField runat="server" ID="hfEmailAddress" Value='<%#Eval("Email_Address") %>' />
  30.                 </td>
  31.             </tr>
  32.             <tr>
  33.                 <td colspan="3">
  34.                     <asp:Panel runat="server" ID="pnlSendEmail" Style="display: none;">
  35.                         <asp:SendEmail ID="emailPerson" runat="server" OnNotify="emailPerson_Notify" />
  36.                     </asp:Panel>
  37.                 </td>
  38.             </tr>
  39.         </ItemTemplate>
  40.         <FooterTemplate>
  41.             </table>
  42.         </FooterTemplate>
  43.     </asp:Repeater>


EmailPerson.aspx.cs C# Code

  1. public partial class EmailPerson : System.Web.UI.Page
  2. {
  3.     #region Declarations
  4.  
  5.     DataTable dt = null;
  6.     DataRow dr = null;
  7.  
  8.     #endregion
  9.  
  10.     protected void Page_Load(object sender, EventArgs e)
  11.     {
  12.         if (!IsPostBack)
  13.         {
  14.             BindPersonData();
  15.         }
  16.     }
  17.  
  18.     #region Get and Bind Data
  19.  
  20.     protected DataTable GetPersonData()
  21.     {
  22.         // In the real world, this would be a database call. However, for this example I'm creating a datatable to bind to the repeater
  23.         dt = new DataTable();
  24.  
  25.         DataColumn dc1 = new DataColumn("Name", System.Type.GetType("System.String"));
  26.         dt.Columns.Add(dc1);
  27.  
  28.         DataColumn dc2 = newDataColumn("Position", System.Type.GetType("System.String"));
  29.         dt.Columns.Add(dc2);
  30.  
  31.         DataColumn dc3 = new DataColumn("Email_Address", System.Type.GetType("System.String"));
  32.         dt.Columns.Add(dc3);
  33.  
  34.         // Creating new row
  35.         dr = dt.NewRow();
  36.  
  37.         // Assigning values to each row column. Again, this would usually be a database call
  38.         dr["Name"] = "Hannah Smith";
  39.         dr["Position"] = "Software Developer";
  40.         dr["Email_Address"] = "hannah.smith@thiscompany.com";
  41.         dt.Rows.Add(dr);
  42.  
  43.         // Creating another new row
  44.         dr = dt.NewRow();
  45.  
  46.         // Assign some more values
  47.         dr["Name"] = "Jason Alexander";
  48.         dr["Position"] = "Software Developer";
  49.         dr["Email_Address"] = "jason.alexander@thiscompany.com";
  50.         dt.Rows.Add(dr);
  51.  
  52.         // Creating another new row
  53.         dr = dt.NewRow();
  54.  
  55.         // Assign some more values
  56.         dr["Name"] = "Kevin Miller";
  57.         dr["Position"] = "Software Development Manager";
  58.         dr["Email_Address"] = "kevin.miller@thiscompany.com";
  59.         dt.Rows.Add(dr);
  60.  
  61.         return dt;
  62.     }
  63.  
  64.     protected void BindPersonData()
  65.     {
  66.         rptPeople.DataSource = GetPersonData();
  67.         rptPeople.DataBind();
  68.  
  69.         // Loop through repeater to hook up modal/user control
  70.         foreach (RepeaterItem item in rptPeople.Items)
  71.         {
  72.             if (item.ItemType == ListItemType.AlternatingItem || item.ItemType == ListItemType.Item)
  73.             {
  74.                 // Find the button control for each repeater item
  75.                 HtmlAnchor hlEmail = (HtmlAnchor)item.FindControl("hlEmail");
  76.  
  77.                 string emailAddress = ((HiddenField)item.FindControl("hfEmailAddress")).Value;
  78.  
  79.                 // Customize email button text with person's name
  80.                 hlEmail.InnerText = "Email " + ((Label)item.FindControl("lblName")).Text;
  81.  
  82.                 // Find the SendEmail control for each repeater item
  83.                 SendEmail emailPerson = (SendEmail)item.FindControl("emailPerson");
  84.  
  85.                 // Set SendEmail properties accordingly
  86.                 emailPerson.EmailAddress = emailAddress;
  87.                 emailPerson.PersonName = ((Label)item.FindControl("lblName")).Text;
  88.  
  89.  
  90.                 // Wire up show/hide panel Javascript using client IDs of panel and link
  91.                 hlEmail.Attributes.Add("onclick", "ShowPanel('" + ((Panel)item.FindControl("pnlSendEmail")).ClientID + "','"
  92.                                                                  + hlEmail.ClientID + "');");
  93.             }
  94.         }
  95.  
  96.     }
  97.  
  98.     #endregion
  99.  
  100.     protected void emailPerson_Notify(object sender, EventArgs e)
  101.     {
  102.         // This is the method raised from the user control after it attempts to send the email
  103.        
  104.         // Declare the user control (sender)
  105.         SendEmail sendEmail = (SendEmail)sender;
  106.  
  107.         // Set the label to show the SentMessage from the user control
  108.         lblMessage.Text = sendEmail.SentMessage;
  109.  
  110.         // Keep the correct panel open
  111.       ((Panel)sendEmail.Parent.FindControl("pnlSendEmail")).Attributes.Add("style", "display:block;");
  112.     }
  113.  
  114. }


Let me quickly go through the methods.

On first page load, we call the Get/BindPersonData methods. For the sake of this example, I'm just creating a fake data table and some psuedo data in the get data method. The BindPersonData method is where it gets interesting. After binding the rptPeople repeater, I'm looping through the items to accomplish a few tasks. Lines 83-87, I'm finding the SendEmail control nested in each repeater item (remember, I'm looping through each repeater item respectively). I'm then assigning the EmailAddress and PersonName properties of the SendEmai control based on the label values for that repeater item. For example, the SendEmail.PersonName property will get set to the value of label control lblName for that item.

Lastly, I wire up a Javascript hide/show panel method in line 91, passing in the panel client ID and email hyperlink client ID for each repeater item.

SendEmail.ascx Code

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SendEmail.ascx.cs" Inherits="SendEmail" %>
  2. <asp:UpdatePanel runat="server" ID="UpdatePanel">
  3.     <ContentTemplate>
  4.         <div style="padding-left: 10px;">
  5.             <asp:Label ID="lblMessage" runat="server" Visible="false" ForeColor="Red" />
  6.         </div>
  7.         <table cellpadding="0" cellspacing="0" class="table" style="width: 680px; border-top: solid 1px #b9c9d6; margin: 10px;">
  8.             <tr>
  9.                 <td style="width: 150px; vertical-align: top; padding-left: 10px;">
  10.                     To Email Address:
  11.                     <asp:RegularExpressionValidator runat="server" ErrorMessage="E-mail address invalid."
  12.                         ID="regEx1" ControlToValidate="txtToEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
  13.                         SetFocusOnError="true" ValidationGroup="EmailPerson">*</asp:RegularExpressionValidator>
  14.                 </td>
  15.                 <td style="vertical-align: top;">
  16.                     <asp:TextBox runat="server" ID="txtToEmail" CssClass="textBox" MaxLength="50" Width="360px" />
  17.                 </td>
  18.             </tr>
  19.             <tr>
  20.                 <td style="width: 150px; vertical-align: top; padding-left: 10px;">
  21.                     From Email Address:
  22.                     <asp:RegularExpressionValidator runat="server" ErrorMessage="From email address invalid."
  23.                         ID="RegularExpressionValidator1" ControlToValidate="txtFromEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
  24.                         SetFocusOnError="true" ValidationGroup="EmailPerson">>*</asp:RegularExpressionValidator>
  25.                 </td>
  26.                 <td style="vertical-align: top;">
  27.                     <asp:TextBox runat="server" ID="txtFromEmail" CssClass="textBox" MaxLength="50" Width="360px" />
  28.                 </td>
  29.             </tr>
  30.             <tr>
  31.                 <td style="width: 150px; vertical-align: top; padding-left: 10px;">
  32.                     Email Subject:
  33.                     <asp:RegularExpressionValidator runat="server" ID="regEx2" ControlToValidate="txtEmailSubject"
  34.                         ValidationExpression="[a-zA-Z0-9\s()%&$.!',/:-]{1,70}$" SetFocusOnError="true"
  35.                         ValidationGroup="EmailPerson" ErrorMessage="Email subject - Max 70 characters, no special characters">*</asp:RegularExpressionValidator>
  36.                 </td>
  37.                 <td style="vertical-align: top;">
  38.                     <asp:TextBox runat="server" ID="txtEmailSubject" CssClass="textBox" MaxLength="70"
  39.                         Width="360px" Text="Salary Increase" />
  40.                 </td>
  41.             </tr>
  42.             <tr>
  43.                 <td colspan="2" style="height: 12px;">
  44.                     <hr class="hr" />
  45.                 </td>
  46.             </tr>
  47.             <tr>
  48.                 <td style="vertical-align: top;">
  49.                     <asp:RadioButton runat="server" ID="rbDefaultEmail" Checked="true" GroupName="EmailPerson"
  50.                         Text="Send Default Email" Font-Bold="true" AutoPostBack="true" OnCheckedChanged="ToggleBold" />
  51.                 </td>
  52.                 <td>
  53.                     <div style="padding: 10px; margin: 0px 10px 10px 0px; border: solid 1px #acabab;
  54.                         background: url('../App_Themes/Beach_Theme/images/bg_textbox.gif' ); background-repeat: repeat-x;">
  55.                         <asp:Literal runat="server" ID="litDefaultEmail">Dear <*PersonName*>,
  56.                         <br />
  57.                         You've received a salary increase to $1 million dollars a year. Congratulations!
  58.                         <br />
  59.                         <br />
  60.                         Sincerely,
  61.                         <br />Human Resources</asp:Literal>
  62.                     </div>
  63.                 </td>
  64.             </tr>
  65.             <tr>
  66.                 <td colspan="2" style="height: 12px;">
  67.                 </td>
  68.             </tr>
  69.             <tr>
  70.                 <td style="vertical-align: top;">
  71.                     <asp:RadioButton runat="server" ID="rbCustomEmail" Checked="false" GroupName="EmailPerson"
  72.                         Text="Send Custom Email" AutoPostBack="true" OnCheckedChanged="ToggleBold" />
  73.                 </td>
  74.                 <td>
  75.                     <asp:Editor ID="editorCustomEmail" runat="server" Height="240px" />
  76.                 </td>
  77.             </tr>
  78.             <tr>
  79.                 <td colspan="2" style="height: 22px;">
  80.                 </td>
  81.             </tr>
  82.             <tr>
  83.                 <td>
  84.                 </td>
  85.                 <td align="center">
  86.                     <asp:Button runat="server" ID="btnSendEmail" Text="Send Email" CssClass="button"
  87.                         OnClick="SendPersonEmail" ValidationGroup="EmailPerson"/>
  88.                 </td>
  89.             </tr>
  90.             <tr>
  91.                 <td colspan="2" style="height: 22px;">
  92.                 </td>
  93.             </tr>
  94.         </table>
  95.     </ContentTemplate>
  96.     <Triggers>
  97.         <asp:PostBackTrigger ControlID="btnSendEmail" />
  98.     </Triggers>
  99. </asp:UpdatePanel>
  100.  


SendEmail.ascx.cs C#

  1.  
  2. public partial class SendEmail : System.Web.UI.UserControl
  3. {
  4.     #region Public Properties
  5.  
  6.     public string EmailAddress { get; set; }
  7.  
  8.     public string PersonName { get; set; }
  9.  
  10.     public string SentMessage { get; set; }
  11.  
  12.     #endregion
  13.  
  14.     #region Public Events
  15.  
  16.     // Create a delegate for the notify event
  17.     // This delegate takes in two parameters, the sending object and the System.EventArgs class
  18.     public delegate void NotificationSent(object sender, EventArgs e);
  19.  
  20.     // Create an event for the NotificationSend Delegate above
  21.     public event NotificationSent Notify;
  22.  
  23.     #endregion
  24.  
  25.     protected void Page_Load(object sender, EventArgs e)
  26.     {
  27.         if (!IsPostBack)
  28.         {
  29.             BindEmail();
  30.         }
  31.     }
  32.  
  33.     protected void BindEmail()
  34.     {
  35.         if (this.EmailAddress == string.Empty)
  36.         {
  37.             lblMessage.Text = "There is no e-mail address on file for this requestor. Please enter an e-mail address before sending the compliance notification.";
  38.         }
  39.         else
  40.         {
  41.             // Set to-email textbox to the person's email address
  42.             txtToEmail.Text = this.EmailAddress;
  43.         }
  44.  
  45.         // Replace placeholder with person's name
  46.         litDefaultEmail.Text = litDefaultEmail.Text.Replace("<*PersonName*>", this.PersonName);
  47.  
  48.         editorCustomEmail.Content = litDefaultEmail.Text;
  49.     }
  50.  
  51.     protected void ToggleBold(object sender, EventArgs e)
  52.     {
  53.         if (rbCustomEmail.Checked)
  54.         {
  55.             rbCustomEmail.Font.Bold = true;
  56.             rbDefaultEmail.Font.Bold = false;
  57.         }
  58.         else
  59.         {
  60.             rbCustomEmail.Font.Bold = false;
  61.             rbDefaultEmail.Font.Bold = true;
  62.         }
  63.     }
  64.  
  65.     protected void SendPersonEmail(object sender, EventArgs e)
  66.     {
  67.         if (txtEmailSubject.Text == string.Empty || txtFromEmail.Text == string.Empty || txtToEmail.Text == string.Empty)
  68.         {
  69.             this.SentMessage = "Please complete all fields before sending the email.";
  70.  
  71.             // Call method to trigger event for parent
  72.             UpdateNotificationMessage();
  73.             return;
  74.         }
  75.  
  76.         string emailBody = string.Empty;
  77.  
  78.         // Set email body string
  79.         switch (rbDefaultEmail.Checked)
  80.         {
  81.             case false:
  82.                 emailBody = litDefaultEmail.Text;
  83.                 break;
  84.             default:
  85.                 emailBody = editorCustomEmail.Content;
  86.                 break;
  87.         }
  88.  
  89.         // Set the SentMessage property accordingly based on success or not
  90.         if (EmailMethods.SendEmail(txtToEmail.Text, txtFromEmail.Text, txtEmailSubject.Text, emailBody))
  91.         {
  92.             this.SentMessage = "A notification email has been successfully sent to " + txtToEmail.Text + ".<br />";
  93.         }
  94.         else
  95.         {
  96.             this.SentMessage = "An problem occurred while sending the email to " + txtToEmail.Text + ". The email has not been sent.<br />"
  97.                              + "The site administrator has been notified of this error.";
  98.         }
  99.  
  100.         // Call method to trigger event for parent
  101.         UpdateNotificationMessage();
  102.     }
  103.  
  104.     protected void UpdateNotificationMessage()
  105.     {
  106.         // This method invokes the Notify event for the user control so we can handle it in the parent ASPX page
  107.         // Always check for null before raising the event in case the parent page isn't utilizing it
  108.         if (Notify != null)
  109.             Notify(this, null);
  110.     }
  111.  
  112. }


The C# for the SendEmail user control is fairly straight forward. Take a close look at lines 16-21. To create an event, you first define a public delegate for that event. In this case, the event name is Notify. It appears as OnNotify in the SendEmail user control attributes. The delegate will take in two parameters, the sending object and an instance of the System.EventArgs class. Line 21 actually defines the public event.

The BindEmail method uses the properties assigned to the user control to handle the text box and email text. Keep in mind that if you put a break point on line 35, it would fire 3 times, once for each of the three rows in our repeater. The properties passed in each of those three times would depend on the values being passed in from the repeater (remember the foreach loop?)

The SendPersonEmail method does just that after some server side validation. It also sets the SendEmail.SentMessage property based on email sent success (lines 92 and 96). Lastly and most importantly, it calls the UpdateNotificationMessage() subroutine on line 101, which is where we have our event ready to fire on the parent page. Line 108 checks to make sure that the event is defined in the parent page (OnNotify is null in the SendEmail tag, basically) and then calls the event.

The emailPerson_Notify event on EmailPerson.aspx.cs (starting on line 100) will now fire. In a nutshell, this method creates an instance of the SendEmail control from the sender, grabs the SendEmail.SentMessage property, and then assigns the SentMessage property string value to the message label on the parent page. In essense, the result of the SendPersonEmail method in the SendEmail user control will display on the parent page because the Notify event is fired from the user control and caught on the parent page.

Tags: , ,

ASP.NET | Repeater

Submit to DotNetKicks...
Permalink | Comments (0)
© 2012 Melbourne Web Solutions | Design