<%@ Page %>

Creating Dialog Boxes using ASP.NET, JavaScript and IE

Introduction

ASP.NET web forms provide a new programming model that eases many development tasks. However, there is misconception amongst many programmers that one should only use the server side model. In fact, most of the books available today give emphasis on server side programming. This is natural as any book will try to cover the new and exciting features of the technology under consideration. However, many times business requirements call for using traditional things like using JavaScript or using DHTML. This article will illustrate one such scenario - Dialog Boxes. IE provides an easy way to create modal browser windows via its object model. In this article I will show you how to create dialog boxes using ASP.NET, JavaScript and IE object model.

Sample Scenario

Consider a case where user is presented with a screen on which he is supposed to enter customer ID or Customer Name. Now, under rich client environment you can easily show a Grid or ListBox filled with available customers and then user can select from the list. What about web browser? This is where JavaScript and IE object model comes handy. IE provides certain functions that allow you to show modal and modal-less dialog boxes. We will now develop a sample pages using these techniques. You can actually starting coding along with the explanation given below.

Creating the main form

For our example we will create a simple web form that contains a Label (Label1), a Textbox (TextBox1) and two buttons (btnLookUp and btnSubmit). Once you place above controls on your form add following JavaScript block in the HEAD section of the web form.

<script>
function ShowDialog()
{
	//declare a string variable
	var retval="";

	//show modal dialog box and collect its return value
	retval=window.showModalDialog
	('dialogboxhostframe.htm',window);

	//check if user closed the dialog 
	//without selecting any value
	if(retval!="" && retval!=null)
	{
		//fill the textbox with selected value
		document.getElementById("TextBox1").value=retval;
	}
}
</script>

This block consists of a function ShowDialog that actually displays a modal dialog box to the user. The dialog box in turn contains the web form that presents the list of customers. Please read the comments above to get idea of what each line does. Note that we have given url as 'dialogboxhostframe.htm'. Why? If we display a web form directly in this modal dialog box it opens up in a new window after being posted back. This is irritating behavior and in order to overcome this we need to display the web form as a part of FRAMESET.

We have created the function to display the dialog but when it will be called? We want to invoke this dialog when user clicks on btnLookUp button. We will now add a line of code in the Page_Load event that makes this possible.

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

	btnLookUp.Attributes.Add("OnClick", "ShowDialog();")

End Sub

Here, we have added OnClick client side event handler to the attributes collection of the button.

Creating the 'Dialog Box'

Now, we will design the web form that acts as 'dialog box' or 'selection list'. Add another web form say DialogBox.aspx to your web application. Put a ListBox (lstCustomers) and Button (btnClose)on it. Populate the list box either with hard coded values or via data binding. In the HEAD section of the form write JavaScript block as shown below:

<script>
function CloseWindow()
{
	//set return value of the dialog box or dialog result
	top.returnValue=
	document.getElementById("lstCustomers").value;

	//close the dialog window
	window.close();
}
</script>

Above function will be called when user clicks the btnClose button. Note that here we are closing the dialog box and setting return value of the dialog box (also called as dialog result) to the selected value from the list box. In the Page_Load of this web form add code that will attach this function with the client side OnClick event of the btnClose.

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

	btnClose.Attributes.Add("OnClick", "CloseWindow();")

End Sub

This code looks similar to the previous form but is used to close the dialog box.

Creating frameset to host the 'Dialog Box'

As explained earlier we need to display our dialogbox.aspx as a part of FRAMESET. So, create HTML page say dialogboxhostframe.htm. This HTML page should contain a FRAMESET. One of the frames should point to dialogbox.aspx. Following is a sample HTML markup:

<html>
	<head>
		<title>Header Frameset</title>
	</head>
	<frameset rows="0,*">
		<frame name="header" src="" 
		scrolling="no" noresize>
		<frame name="main" src="DialogBox.aspx">
	</frameset>
</html>

That's it! You have successfully created a dialog box that will be displayed in your ASP.NET web form. I hope you must have enjoyed it. See you soon with some more stuff. Till then keep coding!

Related Links
Download Source Code