Creating Lookup Screens using ASP.NET, XML and JavaScript


Lookup screens are dialog boxes that allow you to pick a value from a list of values. For example in a typical data entry screen you may allow users to select fields such as Customer ID from a list of customers instead of key in those details. Lookup screens not only make your application user friendly but also make them look professional. Your application may contain many such lookup screens. This article tells you how to use IE, JavaScript, XML and ASP.NET web forms to create a generic lookup screen that is flexible and configurable via XML. Complete source code is available for use in your projects.

In this article you will learn...

  • How to use JavaScript to display modal browser windows
  • How to manipulate XML documents using .NET classes
  • How to create DataGrid programmatically and add columns to it
  • How to write JavaScript code on button click events to call client side script

Sample Scenario

  • Throughout this article we will use Employees and Customers tables from Northwind database.
  • The sample data entry web form that we use contains two text boxes. One for entering Employee ID and other for entering Customer ID. Even though these fields are not related to one another, they does illustrate how our lookup screen works.
  • Each text box has its own Select button. If you click on the button next to Employee ID text box, a modal dialog will pop up that displays list of Employees in a DataGrid to choose from.
  • Similarly, if you click on the button next to Customer ID text box, a dialog pops up showing list of customers.

Note that real life lookup screens will also contain functionality such as searching and sorting. However, here we will understand the concept using simple example. You can then extend the example to suit your needs.

Configuration File Format

In order to make our lookup screen generic we will make it independent of any specific database table or view. We will store all the configuration information in an XML file. One XML file can contain any number of lookup form settings. Following example shows how the XML files looks:
<?xml version="1.0" encoding="utf-8" ?>
<sql>select * from employees</sql>
<heading>Employee ID</heading>
The various tags are explained below.
  • lookupforms : This is the root element of the document. All lookup forms are enclosed in it.
  • emplookupform: This tag is the name of the lookup form. It can be any valid XML tag name. It must be unique in given XML file.
  • sql : This specifies the SQL Select query that is used to populate DataGrid.
  • columns : This section contains details of all the columns that will be part of the DataGrid
  • column : Represents individual column of the DataGrid
  • datafield : The name of the field from data source that is to be displayed
  • heading : The text that will be displayed in the heading of the data field
  • dataformatstring : The formatting expression that will be used to format the DataGrid column
  • visible : Indicates whether a column is visible to the user. Not all columns need to be visible in the DataGrid. For example, employee id column is used programmatically but need not be displayed to the user
  • returncolumn : At a time you can return only one column value to the calling form. For example, you have EmployeeID, LastName and FirstName columns displayed and you want to return selected Employee ID to the calling form.

Creating GridGenerator Class

In order to add columns to the DataGrid and bind the DataGrid with a DataSet, we create a class called GridGenerator. This class has method that do all tasks such as loading XML file, retrieving SQL query, retrieving column information, creating DataGrid columns etc.

Creating the Lookup Screen - lookupdialog.aspx

In order to create the lookup screen we need to read the configuration file and generate DataGrid columns on the fly. Place an instance of DataGrid we control on the web form without adding any columns. You can also add this instance via code but the advantage of former method is that you need not create the columns every time as they are persisted by ASP.NET. 

Creating FRAMESET to host the dialog - dialoghost.aspx

Note, that we do not display the lookup form directly. Instead we show a page containing FRAMESET that in turn shows the lookup screen. To know why this is required read my article here. You show dialoghost.aspx from your data entry form passing which lookup form to display (emplookupform or custlookupform). This form also sets a session variable indicating which lookup form is to be displayed.

Creating a Sample Data Entry Screen - dataentryform.aspx

Finally, we create a data entry screen as explained in Sample Scenario section. This page contains a client side JavaScript function called ShowDialog. The function takes the tag name of the lookup form and id of the HTML control whose value is to be populated after user selects a value from the lookup dialog. We call this function in client side Click event of the buttons using Attributes collection.

I hope you must have find this article useful. See you soon with some more interesting stuff...

Bipin Joshi is an independent software consultant and trainer by profession specializing in Microsoft web development technologies. Having embraced the Yoga way of life he is also a yoga mentor, meditation teacher, and spiritual guide to his students. He is a prolific author and writes regularly about software development and yoga on his websites. He is programming, meditating, writing, and teaching for over 27 years. To know more about his private online courses on ASP.NET and meditation go here and here.

Posted On : 09 November 2002

Tags : ASP.NET Data Access Web Forms Server Controls Data Controls