Different way to call dialog box from code behind in ASP.NET

btnOpen.Attributes.Add("onclick", "alert('GOT IT?');")

btnDelete.Attributes.Add("onclick", "if(confirm('Are you sure to delete?')){}else{return false}")

Suppose, you want to open an another web page as a dialog box, then what will you do? Here is the same coding with little difference.

btnOpenNewWindow.Attributes.Add("onclick", "window.open ('child.aspx')")

If you want to open page in new window with some condition

btnOpenNewWindow.Attributes.Add("onclick",

"window.showModalDialog('child.aspx', null,'status:no;

dialogWidth:370px;dialogHeight:220px;

dialogHide:true;help:no;scroll:no');")

You can write this code in ASPX page also

<input type="submit" name="btnOpen1" value="Open 1" id="btnOpen1" onclick="alert('GOT IT?');" style="width:64px;Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" />

<input type="submit" name="btnDelete" value="Delete" id="btnDelete" onclick="if(confirm('Are you sure to delete?')){}else{return false}" style="width:64px;Z-INDEX: 102; LEFT: 8px; POSITION: absolute; TOP: 48px" />

<input type="submit" name="btnOpen2" value="Open 2" id="btnOpen2" onclick="window.open('child.aspx')" style="width:64px;Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 88px" />

<input type="submit" name="btnOpen3" value="Open 3" id="btnOpen3" onclick="window.showModalDialog('child.aspx',null,'status:no;dialogWidth:370px;

dialogHeight:220px;dialogHide:true;help:no;scroll:no');

" style="width:64px;Z-INDEX: 104; LEFT: 8px; POSITION: absolute; TOP: 128px" />

Returning value from the dialog box

OK! What about returning any value from the dialog box? Suppose you have opened a dialog box for some purpose and you want that it returns some value to the parent web form.

For returning any thing to the parent window from the child dialog box, javascript provides one attribute of the window object, that is window.returnValue to understand its working.

Let's create a small web project with two web forms named :

parent.aspx

child.aspx

Parent web form will have one textbox and a button. Look at the following code of the parent web form.

parent.aspx

<asp:TextBox id="txtValue" style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 24px" runat="server"></asp:TextBox>

<asp:Button id="btnOpen" style="Z-INDEX: 102; LEFT: 176px; POSITION: absolute; TOP: 24px" runat="server" Text="Open..."></asp:Button>

</form>

</body>

parent.aspx.vb

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

btnOpen.Attributes.Add("onclick", "var strReturn; strReturn=window.showModalDialog('child2.aspx',null,'status:no;dialogWidth:370px;dialogHeight:220px;

dialogHide:true;help:no;scroll:no');

if (strReturn != null) document.getElementById('txtValue').value=strReturn;")

End Sub

And, child web form which will have a textbox and two buttons.

Look at the following code of the child page.

child2.aspx

<asp:TextBox id="txtValue"

style="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 24px" runat="server"></asp:TextBox>

<asp:Button id="btnOK"

style="Z-INDEX: 103; LEFT: 48px; POSITION: absolute; TOP: 56px" runat="server" Text="Ok" Width="56px"></asp:Button>

<asp:Button id="btnCancel"

style="Z-INDEX: 102; LEFT: 112px; POSITION: absolute; TOP: 56px" runat="server" Text="Cancel"></asp:Button>

</form>

</body>

child2.aspx.vb

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

btnOK.Attributes.Add("onclick", "window.returnValue = document.getElementById('txtValue').value; window.close();")

btnCancel.Attributes.Add("onclick", "window.close();")

End Sub

the purpose of this small module is, that when user click on the button of the parent form, it will open child.apsx file in the dialog box. In the child form user will enter some value in the textbox and it he click on the Ok button it will return that value to the parent form. With that it will update the textbox of the parent form. And of course, if user click on the Cancel button, it will simply close the child dialog box without doing anything.

In all of the above case, there is nothing to do with the ASP.NET. All of things are actually handle by the javascript. See the javascript code of the child web form.

Yes, you can use response object to popup a alert message also. Here is the code for that:

Private Sub btnOpen5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnOpen5.Click

Dim strScript As String = ""

strScript = "<script>"

strScript = strScript & "alert('Simple alter message!!!!');"

strScript = strScript & "</script>"

Response.Write(strScript)

End Sub

above code, simply pop an alert message to the user.

If you want to display some variable message in the alert message then it you can do that with slight change.

Private Sub btnOpen6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnOpen6.Click

Dim strScript As String = ""

Dim intSum As Integer

strScript = "<script>"

intSum = 344 + 233

strScript = strScript & "alert('SUM : " & intSum & "');"

strScript = strScript & "</script>"

Response.Write(strScript)

End Sub

there will be a drawback again, in using above method to pop alert box, you will notice that if you have tried the above code. We will talk about it later on.

Same thing can be done by registering javascript code to the browser. Following is the example, will do the same thing, but here we will register the javascript to the page.

Private Sub btnOpen7_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnOpen7.Click

Dim strScript As String = ""

strScript = "<script>"

strScript = strScript & "alert('Simple alter message!!!!');"

strScript = strScript & "</script>"

Page.RegisterClientScriptBlock("ClientScript", strScript)

End Sub

Now about that drawback, yes, you are right, it wash screen of the parent window when it pop the alert message or dialog box. The all controls of the parent window will remain hidden unless you close the alert box or dialog box.

Why?? Its because, the javascript that is generated is attached to the top of the html page. You can easily understand this you see the generated html code of the page. Look at the following:

This Code is generated using Response object :

<HTML>

<HEAD>

<title>WebForm1</title>

</HEAD>

</body>

</HTML>

Or the Code generated using RegisterClientScriptBlock method :

<HTML>

<HEAD>

<title>WebForm1</title>

</HEAD>

</form>

</body>

</HTML>

In the last case the code is generated just below the form tag, but still its above the all html and web controls. when the alert message or any modal dialog box is opened the focus will gone to the dialog box and rest of the controls will not visible as they are not rendered. When user close the alert message or ant modal dialog box, thereafter the rest of the control rendered.

So, What is I want to display modal dialog box with the populated controls in the parent forms. Its possible if you can put your generated javascript below the controls tags in the form. Is it possible?? Of course yes. Here is the technique. Use RegisterStartupScript method to put your javascript to the page. Look at the following code of display an alert message and a modal dialog box. If you look at the generated html code then you will easily understand the working behind this technique. Here is the generated html code.

<HTML>

<HEAD>

<title>WebForm1</title>

</HEAD>

</form>

</body>

</HTML>

Generated javascript is attached just above the closing tag of the form element and below of all html or web controls tag. So, first all of the html controls will render and there after the modal dialog box or modal dialog box will open.

Ritesh Kesharwani

Friday, April 22, 2005

Different way to Populate Dialog Box and Get Value of Dialog Box in ASP.NET

If you want to open page in new window with some condition

You can write this code in ASPX page also

Returning value from the dialog box

No comments: