Thursday, March 22, 2012

ASP.NET: How to pass value back from user control to the page with events

Problem
This is simple tutorial how to pass a value back from user control to the page with event. In this example textbox value is passed back to the label on default page

Solution
After creating a new web site with default page create a simple user control called InputBox. Inputbox should have one TextBox and two buttons

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="InputBox.ascx.cs" Inherits="Testi.InputBox" %>
<table>
    <tr>
        <td colspan="2">
            <asp:Label ID="lblUserInput" runat="server" Text="User input:"></asp:Label>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:TextBox ID="txtUserInput" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Button ID="btnOk" runat="server" Text="OK" onclick="btnOk_Click" />
        </td>
        <td>
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" 
                onclick="btnCancel_Click" />
        </td>
    </tr>
</table>

Open user control code-behind and create a new EventArgs class

public class InputEventArgs : EventArgs
{
    public string UserInput{ get; set; }
}
Then add two events to the user control which uses InputEventArgs

    public event EventHandler<InputEventArgs> OKClicked;
    public event EventHandler<InputEventArgs> CancelClicked;

Add following code to the OK and Cancel -button event handlers to fill InputEventArgs:

        protected void btnOk_Click(object sender, EventArgs e)
        {
            // Create a new event argument when OK is clicked
            if (OKClicked != null)
            {
                EventHandler<InputEventArgs> tmp = OKClicked;
                if (tmp != null)
                {
                    // Take value from textbox 
                    tmp(this, new InputEventArgs() { UserInput = txtUserInput.Text });
                }
            }
        }

        protected void btnCancel_Click(object sender, EventArgs e)
        {
            // Create a new event argument when Cancel is clicked
            if (CancelClicked != null)
            {
                EventHandler<InputEventArgs> tmp = CancelClicked;
                if (tmp != null)
                {
                    tmp(this, new InputEventArgs() { UserInput = null });
                }
            }
        }
Now you can open your default.aspx page and register user control

<%@ Register TagPrefix="Test" TagName="InputBox" Src="InputBox.ascx" %>

Add the user control and result label inside form

        <table>
            <tr>
                <td>
                    <b>For example you can place this user control inside modal confirmation...</b>
                </td>
            </tr>
            <tr>
                <td>
                    <Test:InputBox ID="inputBox" runat="server" OnOKClicked="InputBox_OKClicked" 

OnCancelClicked="InputBox_CancelClicked" />
                </td>
            </tr>
            <tr>
                <td>
                    <b>Display input value from user control:</b>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblInputBoxResult" runat="server" Text=""></asp:Label>
                </td>
            </tr>
        </table>


Then open default page code-behind and create two event handlers to handle clicks from user control

        protected void InputBox_OKClicked(object sender, InputEventArgs e)
        {
            lblInputBoxResult.Text = e.UserInput;
        }

        protected void InputBox_CancelClicked(object sender, InputEventArgs e)
        {
            lblInputBoxResult.Text = "User clicked cancel";
        }


Now you can run and test if value from user control is passed to the event handler at default page...

2 comments:

  1. Great post thank you. This is very useful for getting a response back from a User Control to the calling page.

    The only error I had with this was in the code behind in the ASPX page. "InputEventArgs" should be "EventArgs".

    ReplyDelete
  2. If I want to pass more than one value back, how would that be done? I'm trying to pass 4 back, but only the last one is being passed.

    Thanks, this was a big help.

    ReplyDelete