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 Lookup Screens using ASP.NET, XML and JavaScript

Introduction

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:

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