Start by creating two HTML web pages parent.htm and child.htm (You don't have to use Visual Studio.NET)
Starting with parent.htm...
You need two Text fields (Text1, Text2), a Checkbox (Checkbox1) and a Button (Button1)
Add the following _javascript_ code between the <head></head> tags of the page:
<script language="_javascript_"> function OpenDialog() { // get the control values var str1 = Text1.value; var str2 = Text2.value; var bool1 = Checkbox1.checked; // create an array with the values var winArgs = new Array(str1, str2, bool1); var winSettings = 'center:yes;resizable:no;help:no;' + 'status:no;dialogWidth:250px;dialogHeight:200px'; //
return the dialog control values after passing them as a parameter winArgs = window.showModalDialog('child.htm', winArgs, winSettings); // see if the array is null if(winArgs == null) { window.alert('no data returned!'); } else { // set the values from what's returned Text1.value = winArgs[0]; Text2.value = winArgs[1]; Checkbox1.checked = winArgs[2]; } } </script>
Modify the tag of Button1 and add so the Button1 tag looks something like:
<INPUT id="Button1" ... >
This will cause the Modal Dialog to popup when the button's clicked.
Now you're done with parent.htm
Add the same four controls plus one additional Button to child.htm and add the following _javascript_ code inside
<head></head>:
<script language="_javascript_"> function GetData() { // intialize variables and array to empty var str1 = ''; var str2 = ''; var bool1 = false; var winArgs = new Array(str1, str2, bool1); // get the values as arguments and set the controls winArgs = window.dialogArguments; Text1.value = winArgs[0]; Text2.value = winArgs[1]; Checkbox1.checked = winArgs[2]; } function SetData() { // get the new dialog values var str1 = Text1.value; var str2 = Text2.value; var bool1 = Checkbox1.checked; var winArgs = new Array(str1, str2, bool1); // pass the values back as arguments window.returnValue = winArgs; window.close(); } </script>
Find the beginning tag for the <body> and modify it so it looks something like:
<body >
Find the input tag for Button1 and make it look something like:
<INPUT id="Button1" ... >
That will pass the data back to the main window when the button's clicked.
Find Button2 and make it look something like:
<INPUT id="Button2" ... >
This will close the Dialog without changing the values on the main window.
Now you can open parent.htm directly in your browser. Click the button and the dialog should popup. Change the data, click Button1 and notice that the data on the main window is changed.
This is all fine if you want to use HTML pages but what if you want to use this with your ASP.NET pages?
With a few modifications to the code you can make it work.
Start by creating a new project in Visual Studio.NET I used C# for my project but VB can also be used.
By default you get a WebForm1.aspx page. I would delete this page or rename it parent.aspx
On parent.aspx add two TextBox controls, a CheckBox, and a Button.
Add the following script inside the <head></head> tags in the HTML page view:
<script language="_javascript_"> function OpenDialog() { // get the control values var str1 = document.getElementById('TextBox1').value; var str2 =
document.getElementById('TextBox2').value; var bool1 = document.getElementById('CheckBox1').checked; // create an array with the values var winArgs = new Array(str1, str2, bool1); var winSettings = 'center:yes;resizable:no;help:no;' + 'status:no;dialogWidth:250px;dialogHeight:200px'; // return the dialog control values after passing them as a parameter winArgs = window.showModalDialog('child.aspx', winArgs, winSettings); // see if the array is null if(winArgs == null) { window.alert('no data returned!'); } else { // set the values from what's returned document.getElementById('TextBox1').value = winArgs[0]; document.getElementById('TextBox2').value = winArgs[1]; document.getElementById('CheckBox1').checked = winArgs[2]; } } </script>
Notice you have to use the document.getElementById('ControlName') function.
Now go back to Design view and double click the
page to go to the Page_Load function and add the following code:
private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here if(!this.IsPostBack) { Button1.Attributes["onclick"] = "_javascript_:OpenDialog()"; } }
You have to add attributes to access Button events. You can't simply change the HTML tag like before.
Checking for !this.IsPostBack makes sure the Button Attribute isn't modified everytime the page loads - only on the intial Load.
Add the same controls to child.aspx you just added to parent.aspx plus an additional button like before.
Add the following _javascript_ to the head of the page in HTML mode:
<script language="_javascript_"> function GetData() { // intialize variables and array to empty var str1 = ''; var str2 = ''; var bool1 = false; var winArgs = new Array(str1, str2, bool1); // get the values as arguments and set the controls winArgs = window.dialogArguments; document.getElementById('TextBox1').value = winArgs[0]; document.getElementById('TextBox2').value = winArgs[1]; document.getElementById('CheckBox1').checked = winArgs[2]; } function SetData() { // get the new dialog values var str1 = document.getElementById('TextBox1').value; var str2 = document.getElementById('TextBox2').value; var bool1 = document.getElementById('CheckBox1').checked; var winArgs = new Array(str1, str2, bool1); // pass the values back as arguments window.returnValue = winArgs; window.close(); } </script>
Like before you need to modify the body tag of the page to look something like:
<body >
However now the onclick events for the two buttons will have to be set like above:
private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here if(!this.IsPostBack) { Button1.Attributes["onclick"] = "_javascript_:SetData()"; Button2.Attributes["onclick"] = "_javascript_:window.close()"; } }
Set the start page to parent.aspx and run it now. After you open the modal dialog and click one of the buttons, you should notice that the window doesn't close as expected. Instead, a normal child.aspx window appears and one of the
buttons has to be clicked again to close the window.
Not to worry. The only thing you have to do is add this inside the <head></head> tags of child.aspx
<base target="_self">
Now run the project again and it should behave as expected.
Sorry I didn't give u an example
[EMAIL PROTECTED] wrote:
Teman2, kalo ada yang pake asp.net tolong bantuin dong.
saya kesulitan dalam membuat modal dialog untuk web page dengan return valuenya.
ada yang bisa bantuin ga?
Brgds,
Lim Agus Fitrian
FL-IT
Yahoo! Messenger with Voice. PC-to-Phone calls for ridiculously low rates.
Wahana Programmer Groups Links
<*> Untuk mengunjungi sponsor milis ini, klik link berikut:
http://wahanaprogrammer.net
<*> Untuk menghubungi owner milis ini, kirim email ke:
[EMAIL PROTECTED]
<*> Konsultasi pemrogramman bisa chat disini:
Yahoo! Messenger: wahanaprogrammer
YAHOO! GROUPS LINKS
- Visit your group "Programmer-VB" on the web.
- To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
- Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
