Sunday, January 9, 2011

How to pass a value to a popup from an ASP.NET web page

For this demonstration I’m using an ASP.NET web page, WebUserControl and AjaxControlToolKit.

First create ASP.NET web site and add the AjaxControlToolKit into your solution. If you don’t know how to add the AjaxControlToolKit correctly, refer my early article "How to add AJAX control tool kit into ASP.NET web project correctly".


After that add a Web User Control in to your project. Add a TextBox to display the receive value from the web page. Add a button to close the popup.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserCon.ascx.cs" Inherits="UserCon" %>

<asp:Panel ID="pnlPopup" runat="server">
  <asp:TextBox ID="txtDisplay" runat="server"></asp:TextBox>
  <asp:Button ID="btnClose" runat="server" Text="Close" OnClick="btnClose_Click"/>
</asp:Panel>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<ajaxToolkit:ModalPopupExtender ID="mpePopup" runat="server" TargetControlID="lnkDummy"
    PopupControlID="pnlPopup" Enabled="true">
</ajaxToolkit:ModalPopupExtender>


Here I’m using the AJAX “ModalPopupExtender” within the Web User Control. In the above piece of code you can see a Link Button. Just give it as the target control Id of the ModalPopupExtender. There’s no use other than that.

In Web User Control’s code file create a public method to receive the incoming value from the web page.

public void LaunchPopup(string incomingParam)
{
      txtDisplay.Text = incomingParam;
      mpePopup.Show();
}

protected void btnClose_Click(object sender, EventArgs e)
{
      mpePopup.Hide();
}

Then go to the web page and add a Textbox and a button. Make sure to register and add the earlier created Web user control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="UserCon.ascx" TagName="UserCon" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>San Demo Popup</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="aupShowPopup" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtName" runat="server" Text="Sandun"></asp:TextBox>
            <asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />
            <uc1:UserCon ID="ucModal" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <div>
    </div>
    </form>
</body>
</html>


Add the following code in to button’s click event.

protected void btnShowPopup_Click(object sender, EventArgs e)
{
      ucModal.LaunchPopup(txtName.Text.ToString().TrimEnd());
}

Now you can see the entered value of the text box in pop up’s text box when you click the “Show Popup” button.

Good Luck!!!
Happy Programming :)

1 comment:

  1. hi sadun,

    this is really good article about ajax control usage and pass values to the user control modal pop up.and u have organize it very nice. do we need page attribute EnableEventValidation="false" to use this program??

    ReplyDelete