Registration open for April 2018 batches of ASP.NET MVC and Design Patterns instructor-led online courses. Conducted by Bipin Joshi on weekends. Register today ! Click here for more details.

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.

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.

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:

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.

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:

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!

Bipin Joshi is a software consultant, trainer, author and yoga mentor having 22+ years of experience in software development. He also conducts online courses on ASP.NET MVC, ASP.NET Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.