Passing Parameter To User Control On A Modal Popup
This is the most demanded scenario for the one who are using Asp.net AJAX Control Toolkit, I mean I have seen most of the people asking for this feature on asp.net forum.
Unfortunately, we have no such functionality provided in Modal Popup because the control get rendered once the page is loaded and the Modal Popup is just a JavaScript which work is just to display a div which is hidden.
Here is a little work around for those who wants to pass parameter to user control using Modal Popup. Basically, the idea is to keep the user control in a separate page and call that page using JavaScript and put the response on the a Modal Popup Div.
Remember, as this is only a JavaScript we need to set the parameter using JavaScript or we need to save the parameters on Page_Load in any Hidden field and access that later from JavaScript.
To start, I have created two pages and a user control following is the naming stuff for them
- Default.aspx (Contains Modal Popup)
- ControlCaller.aspx (Contains User Control)
- Controls.ascx (User Control)
Default.aspx page html will look like as follows
1: <form id="form1" runat="server">
2: <div>
3:
4: <asp:ScriptManager ID="ScriptManager1" runat="server">
5: </asp:ScriptManager>
6: <asp:Button ID="Button1" runat="server" Text="Show Popup" OnClientClick="setupParam()" />
7:
8: </div>
9: <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlControl" TargetControlID="Button1">
10: </cc1:ModalPopupExtender>
11: <asp:Panel ID="pnlControl" runat="server">
12:
13: </asp:Panel>
14:
15: <asp:HiddenField ID="hf_username" runat="server" />
16: <asp:HiddenField ID="hf_password" runat="server" />
17: <asp:HiddenField ID="hf_registredDate" runat="server" />
18:
19: </form>
Keep in mind that the three hidden fields I have taken here are for the Parameters.
Now Let’s see what we have in ControlCaller.aspx
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ControlCaller.aspx.cs" Inherits="LearnWebApp.ControlCaller" %>
2: <%@ Register src="Controls/Control.ascx" tagname="Control" tagprefix="uc1" %>
3: <uc1:Control ID="Control1" runat="server" />
Just user control implementation and nothing else. Please make sure to remove all the head, html and form tags.
Following is the html of Control.ascx
1: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Control.ascx.cs" Inherits="LearnWebApp.Controls.Control" %>
2: User Name :
3: <asp:Label ID="lblUserID" runat="server" Text="Label"></asp:Label>
4: <br />
5: Registered Date :
6: <asp:Label ID="lblDate" runat="server" Text="Label"></asp:Label>
7: <br />
8: Password:
9: <asp:Label ID="lblPassword" runat="server" Text="Label"></asp:Label>
And here is the code behind of the Control
1: private string _userName;
2: private string _RegisteredDate;
3: private string _Password;
4:
5: public string userName
6: {
7: get { return _userName; }
8: set { _userName = value; }
9: }
10: public string RegisteredDate
11: {
12: get { return _RegisteredDate; }
13: set { _RegisteredDate = value; }
14: }
15: public string Password
16: {
17: get { return _Password; }
18: set { _Password = value; }
19: }
20: protected void Page_Load(object sender, EventArgs e)
21: {
22: if (!Page.IsPostBack)
23: {
24: lblDate.Text = _RegisteredDate;
25: lblPassword.Text = _Password;
26: lblUserID.Text = _userName;
27: }
28: }
Please bear in mind, that the properties we have taken here are for the parameters as you can see I am also setting these properties on label at Page_Load.
and here we have the script which we need to add on the default.aspx head section
1: <script language="javascript">
2: var request = false;
3: try {
4: request = new XMLHttpRequest();
5: } catch (trymicrosoft) {
6: try {
7: request = new ActiveXObject("Msxml2.XMLHTTP");
8: } catch (othermicrosoft) {
9: try {
10: request = new ActiveXObject("Microsoft.XMLHTTP");
11: } catch (failed) {
12: request = false;
13: }
14: }
15: }
16:
17: function GetResult() {
18: var divComm = document.getElementById('pnlControl');
19: divComm.innerHTML = "Please wait processing your request!!!";
20: var rnd = Math.random() * 1000000;
21: var url = 'ControlCaller.aspx?userName=' +document.getElementById("hf_username").value + "&password=" + document.getElementById("hf_password").value + "&Date="+ document.getElementById("hf_registredDate").value +'&rnd=' + rnd;
22: request.open("GET", url, true);
23: request.onreadystatechange = GetResultComplete;
24: request.send(null);
25: }
26: function GetResultComplete() {
27: if (request.readyState == 4) {
28: //alert(request.responseText);
29: if (request.status == 200) {
30: var divComm = document.getElementById('pnlControl');
31: if (divComm) {
32: divComm.innerHTML = request.responseText;
33: }
34: }
35: }
36: }
37: function setupParam()
38: {
39: document.getElementById("hf_username").value = "User is for test !!!";
40: document.getElementById("hf_password").value = "testing.....";
41: document.getElementById("hf_registredDate").value = "10/04/84";
42: GetResult();
43:
44: }
45: </script>
Notice the setupParam() function, we are setting our parameter here and then call the GetResult function which is making an AJAX call to the page we have created. That’s it by using this method we can have parameterized user control inside Modal Popup.
You can download the full Visual Studio 2008 Project from here.