Implementing a Dialog Box in ASP.NET Based Web Application

Introduction

Using dialog box in any application is very important in order to have close talk between the user and the application. These dialogs between the user and the application greatly enhance the usability of the application.

Dialog box can be used to give some feedback to the user or to get some input from the user or even both.

It was really a kids work to implement a dialog box in the window based application. Yes! It was very simple

Dim fChild As New frmChild
frmChild.Show vbModal

how easy it was??? But, how about opening the same dialog box in the web based application? Oops! Its require some bit technique to open it, specially if you want to open a modal dialog box.

In the following article, we will see some of the important technique of implementing dialog box in the web based application.

Simple Dialog Box

The first and usual technique of implementing dialog box is to put javascript to the particular event (usually click event) of the control. Its really a easy way when your application already know when to open a dialog box when the page load to the browser.

Here is the simple example, put a button form control to the web page and insert the following code.

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

its a one line code to pop a alert message to the user.

Same way, suppose you want that, the application open a confirmation dialog box from where the user can select his option. You can use this method very well. Like, you want to open a confirmation dialog box when user click on the delete button of the page. Simply use following code for that :

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

it will create a small javascript code to the browser. When user select "No" from the confirmation dialog box, it will return false. Hence nothing will happen. And if user select "Yes", it will return true and will post the page.

After little bit of simple alert and confirmation dialog box, we will entered into some serious work of opening dialog box.

Open Dialog Box with Another Web Form

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.

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

btnOpen is again a web form control and when user click on this button, it will open another instance of the browser with the page "child.aspx".

Its really working good, until you will notice that it create one another instance of the browser, put one more application to the task bar, even the dialog box is modeless. Is it not possible to open a page in the same browser with modal dialog box? Sure! Here is the code for that

btnOpen3.Attributes.Add("onclick", "window.showModalDialog('child.aspx', null,'status:no;dialogWidth:370px;dialogHeight:220px;dialogHide:true;help:no;scroll:no');")

What does above code actually do? Nothing! It simply create a small javascript code to the page and attach the click even of the control to that script. If you look at the html source code of the page, then you will find we you want to know/ here is the html code of page that is create with above dialog box popup.

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

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

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.

In the child web form, the value to be return is assigned to the window.returnValue. And the return value is assigned to a variable in the parent web form. Thereafter, it assigned to the textbox.

The idea is that, window.returnValue returns some value from the child window to the parent window, and thereafter, you can do any thing with that returned value. You can even pass to the VB code using parameter of the query string of the document action.

There will be one limitation of using above method of returning value from the dialog box. And the limitation is that you can only return one value to the parent window.

What about if I want to return more then one value?

I am sorry, there is no remedy of that, but I usually overcome with this limitation by using session object. I simply put all values to the session object in the child window and there after I handle it in the parent window.

One thing you must have notice that I have used response object for closing the dialog box. Writing javascript script to the response object is another way to put javascript to the web form. In above code it simply create script, which contains window.close() statement, and write it to the browser. At client side of the browser, browser read the script and execute it.

So, from the last example we learnt new way to put javascript to the browser and that is using response object.

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 :

Or the Code generated using RegisterClientScriptBlock method :

<HTML>
<HEAD>
<title>WebForm1</title>
</HEAD>
<body MS_POSITIONING="GridLayout">
  <form name="Form1" method="post" action="MainForm.aspx" id="Form1">
  <script>alert('Simple alter message!!!!');</script>

  </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>
<body MS_POSITIONING="GridLayout">
  <form name="Form1" method="post" action="MainForm.aspx" id="Form1">

  <script>alert('Simple alter message!!!!');</script>
  </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.

Conclusion

Implementing dialog box in the web based application makes your application more usable. As it allow your application to have dialogs with the user more closely.

posted on 2005-12-30 19:56 OnlyLiu 阅读(457) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

公告

Implementing a Dialog Box in ASP.NET Based Web Application