A Modal Dialog is just a type of HTML page that won't let you return to the page
that created it until you close the window. Otherwise, except for a few minor
"gotchas", it's no different than any other HTML page. It can certainly
be an ASP.NET page, there is no great hangup with that.
There must be two dozen solutions to this issue, some are elegant, some are complex,
but here is one that I like. This was originally shown to me by Jonathan Goodyear.
Since then, I've modified, simplified and enhanced it, and even though I've
used other solutions including some of my own invention, I still like this one
the best, because it combines the best of both server- side and client-side coding,
can return any number of values to the spawning page, doesn't require AJAX,
supports postbacks in the modal page, and is extensible. At a minimum, it can
serve as the basis for further experimentation. In addition, showModalDialog
is now supported by both Firefox and Google Chrome, although not all features
are the same.
First, in our "parent page", we will need a button or any other HTML widget
to which we can attach an onclick event. This is what is used to spawn the modal
dialog. I like to do this from the server side because its easier to make it
portable, and easier to encapsulate - you can even put it into a server control
or a utility library that will emit the script. The script injection is all done
in the Page_Load handler:
private void Page_Load(object sender, System.EventArgs e)
{
if(IsPostBack)
{
this.lblMessage.Text="Posted Back!";
lblMessage.Text+="<BR/>"+Request.Form["txtUserId"].ToString();
lblMessage.Text+="<BR/>"+Request.Form["txtLayer"].ToString();
}
// set up client script to handle modalDialog
if (!Page.IsClientScriptBlockRegistered("Dlg"))
{
string title="Test Title";
string userId= "123";
string layer="2";
string parameters="&userId=" +userId +"&layer=" +layer;
string height="400";
string width="400";
string page ="dlgModalSample1.aspx";
// use next line for direct with <base target="_self"> between <Head>
and </HEAD>
string scrp="<script>var rc = new Array(0,0);function doIt(){rc=
window.showModalDialog('dlgModalSample1.aspx?Title="+title + "&page="
+ page + "&userId=" + userId + "&layer=" +layer +"','','dialogHeight:"+height+" px;dialogWidth:"+width+" px;');"+"\n";
scrp+="if(rc[0]!=null){document.getElementById('txtUserId').innerText=rc[0];
document.getElementById('txtLayer').innerText=rc[1];__doPostBack('','');}}</script>";
Page.RegisterStartupScript("Dlg",scrp);
btnRecur.Attributes.Add("onClick","doIt();");
}
}
What we are doing above is just setting some variables that will be passed on the
querystring with the showModalDialog Javascript function. We also set up the
script to capture the return value as a Javascript ARRAY. This means we can have
as many elements as we want. Finally, I've shown that we cause the Parent
page to issue a Postback when the child window is closed. All this in one short
script.
Now, on to the child page. This one I just put the script into the aspx HTML page
the "old fashioned" way:
<script type="text/javascript">
function Done()
{
var uid=document.getElementById('txtUserId').value;
var lay=document.getElementById('txtLayer').value;
var ret=new Array( uid,lay) ;
window.returnValue=ret;
window.close();
}
</script>
And In the codebehind for the child page:
private void Page_Load(object sender, System.EventArgs e)
{
this.txtUserId.Text=Request.Params["userId"].ToString();
this.txtLayer.Text=Request.Params["layer"].ToString();
this.btnDone.Attributes.Add("OnClick","Done();");
this.hdnReturnCode.Value ="changed";
}
I have 2 buttons on the child page, one that does a postback, and one that is client
- side that runs the "Done" function. Here is the code for the postback
button:
private void Button1_Click(object sender, System.EventArgs e)
{
this.txtUserId.Text= Request.Params["txtUserId"]+"_PostedBack";
this.txtLayer.Text =Request.Params["txtLayer"]+"_PostedBack";
}
You can see, it's just a proof of concept, changing the values that were passed
in (plus whatever you have changed) and adding "_PostedBack" to the
text.
When you click the "DONE" button is where we do this:
var uid=document.getElementById('txtUserId').value;
var lay=document.getElementById('txtLayer').value;
var ret=new Array( uid,lay) ; window.returnValue=ret; window.close();
All we are doing is creating an array and stuffing it with our posted back values,
and assigning the ARRAY to the window.returnValue object. This then gets passed
back to the parent page when we issue our window.close() call, and the parent
page posts back also. That's all there is to it, except for the directive:
<base target="_self">
that needs to be put in the child page between the <HEAD> and </HEAD>
tags. This prevents a postback from opening a new window, a common problem that
people gripe about.
The downloadable solution below has a complete implementation you can use "out
of the box". Enjoy.
Download the working Visual Studio 2010 Demo Solution