ModalDialogHelper Control in ASP.NET 1.1 and 2.0

• Download source files - 4.92 Kb
• Download demo project - 25.6 Kb
• Download demo project in .NET 2.0 - 22.3 Kb
• Download demo project of new version in .NET 1.1 - 26.7 Kb

Introduction

This article shows an implementation of a server side control to transfer data between a modal dialog page and its invoker page.

Several days ago, I wrote an article "Transfer arguments between a modal page and an invoker page in ASP.NET 1.1". In that article, I had shown how to transfer an argument to a modal dialog and get the return value when the dialog is closed; I just want to explain how to implement that. Now, I wrap it into a server side control in ASP.NET 1.1. If you want to understand the way to implement this problem, you can check out my previous article the link of which is given above. Now, just follow me to see how to use this control :-). Download the source code and compile it. Create a new web application named TestDialogHelper. In WebForm1.aspx’s design window, right-click the toolbox and select "Add/Remove Item" to add the "DialogHelperControl.dll" that you have compiled. Then, an icon will be displayed in your toolbox like shown below:

Drop it to your page, now you will see how the control looks at design-time:

We want to invoke WebForm2.aspx as a modal dialog when we click Button1 on WebForm1.aspx. So, WebForm1.aspx is an invoker page. OK, set its ParentType to "InvokerPage" in the property grid:

You should write the code to open the dialog page in the Click event of Button2, this control has an open method named "ShowDialog", and you can get the return value in the event "OnDialogReturn". See the code below:

private void DialogHelperControl1_OnDialogReturn(string str)
{
    this.TextBox1.Text = str;
}

private void Button1_Click(object sender, 
                                System.EventArgs e)
{
    this.DialogHelperControl1.ShowDialog("WebForm2.aspx",
                                TextBox2.Text,500,300,false);
}

Here, your invoker page is completed. So easy! Now, you should build your dialog page "WebForm2.aspx". In this page, we implement a simple Add method and return the sum to the invoker page when it is closed. Set the property of the dialog helper control in the dialog page, like shown below:

And in WebForm2.aspx, you can get the argument which is transferred from the invoker page in the event "OnArgumentSubmit". When all the things are done in this page, you should call the control’s "ReturnAndCloseDialog" method or "CloseDialog" method to return to the invoker page.

private void Button1_Click(object sender, System.EventArgs e)
{
    TextBox3.Text = (Convert.ToInt32(TextBox1.Text)+
                      Convert.ToInt32(TextBox2.Text)).ToString();
}

private void Button2_Click(object sender, System.EventArgs e)
{
    this.DialogHelperControl1.ReturnAndCloseDialog(TextBox3.Text);
}

private void Button3_Click(object sender, System.EventArgs e)
{
    this.DialogHelperControl1.CloseDialog();
}

private void DialogHelperControl1_OnArgumentSubmit(string str)
{
    this.TextBox1.Text = str;
}

Here, all the processes of transferring are done. If you download the demo project, you will find two sub-folders in your unpackaged folder. Make a folder "TestDialogHelper" as a virtual folder with the same name as in your IIS, and the control’s project in another folder "DialogHelperControl". Open the solution, now you can compile the code and run it.

[Updated]: My friend asked me why not set the element's value in the client on dialog return, because in many cases, we only need the return value to be put into an element's value (as <input>) in the client. So, I added two properties to implement this function. "AutoPostBackWhenDialogReturn" controls whether the page will submit when the user closes the dialog. "ClientScriptOnDialogReturn" is just the client script code to execute when the user closes the dialog. You will not use <script> and </script> to wrap the code. In fact, it is the code of the client function "__ClientScriptOnDialogReturn" which is registered in the "OnLoad" event of the control.

Please let me know if there are bugs in this article. Your feedback and advice are most welcome.

History

• 2005-08-22: Created version 1.
• 2005-08-25: Added functions that allow the user to execute the script on the client on dialog return.
• 2006-05-18: Added property DialogType that allows a user to open a dialog in two ways: modal and modeless.