Click here to Skip to main content
15,041,025 members
Articles / Web Development / ASP.NET
Article
Posted 22 Aug 2005

Stats

1.1M views
2.2K downloads
74 bookmarked

ModalDialogHelper Control in ASP.NET 1.1 and 2.0

Rate me:
Please Sign up or sign in to vote.
4.53/5 (17 votes)
16 Jun 20063 min read
An ASP.NET control that helps you to transfer data between a dialog page and its invoker page.

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:

Image 1

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

Image 2

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:

Image 3

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:

C#
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:

Image 4

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.

C#
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.

Image 5

Image 6

Image 7

[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.

Image 8

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Rouser
Web Developer
China China
When I encounter a problem, I am charmed.
When I make it out, I am cordial.

Enjoy your coding !

Comments and Discussions

 
AnswerRe: How about a client side dialog control? Pin
Anonymous30-Aug-05 20:02
MemberAnonymous30-Aug-05 20:02 
GeneralRe: How about a client side dialog control? Pin
Liu Junfeng31-Aug-05 15:52
MemberLiu Junfeng31-Aug-05 15:52 
GeneralRe: How about a client side dialog control? Pin
Anonymous31-Aug-05 16:13
MemberAnonymous31-Aug-05 16:13 
GeneralTransfer Business Object Pin
Jason Law24-Aug-05 19:39
MemberJason Law24-Aug-05 19:39 
GeneralRe: Transfer Business Object Pin
Rouser24-Aug-05 19:42
MemberRouser24-Aug-05 19:42 
GeneralASP.Net 2.0 Pin
Lucky Vdb23-Aug-05 2:08
professionalLucky Vdb23-Aug-05 2:08 
GeneralRe: ASP.Net 2.0 Pin
Rouser23-Aug-05 4:37
MemberRouser23-Aug-05 4:37 
GeneralSimple and good Pin
Lucky Vdb22-Aug-05 4:25
professionalLucky Vdb22-Aug-05 4:25 
Worked with asp.net 2.0 with very small modifications. Cool | :cool:

GeneralRe: Simple and good Pin
Rouser22-Aug-05 4:55
MemberRouser22-Aug-05 4:55 
GeneralReinvention... :) Pin
BlackTigerAP22-Aug-05 2:12
MemberBlackTigerAP22-Aug-05 2:12 
GeneralRe: Reinvention... :) Pin
Rouser22-Aug-05 2:26
MemberRouser22-Aug-05 2:26 
GeneralRe: Reinvention... :) Pin
BlackTigerAP22-Aug-05 2:50
MemberBlackTigerAP22-Aug-05 2:50 
GeneralRe: Reinvention... :) Pin
Rouser22-Aug-05 3:52
MemberRouser22-Aug-05 3:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.