Lookup Control For ASP.Net Web Applications

 

Introduction

Hi friends , here is a new article for you after such a long time. This time I will share with you a Lookup Control that I developed a year ago for my one of web projects. You will find many Lookup controls for web-based and windows-based applications on the internet with various types of functionalities, but most of them are not free. If you want to use them in your application you need to purchase a license and the others that are free to use do not satisfy our requirements. So I decided to design a web user control that will satisfy all my requirements. Of course this is not a professional web user control, it contains some basic functionalities that I want in my application based on requirements. But still it is very useful and it will definitely help those who want to work on such type of user controls and it will also provide you a basic idea about the design and development of web user controls. 

Background

 

 

This Lookup Control is a simple web user control. The basic idea of this web control is to provide the ability to bind data from a database table to a web user control for user friendly data access and selection with fast data loading, sorting, pagination and many more capabilities. Here for this example I am using Microsoft SQL Server database, Entity Framework as back-end technologies and ASP.Net, JavaScript, jQuery as front-end technologies. 

Control Properties

Here is the list of properties available in this Lookup Control:

• RecrdTypeName: This property is used to set the Table Name from the specified database.
• KeyColumnName: This property is used to set the Key Column Name from the specified table.
• DescriptionColumnName: This property is used to set the Description Column Names from the specified table.
• DescriptionWidth: This property is used to set the width of the Description Column text field.
• ShowDescription: This property is used to set the visibility of the Description text field.
• PageSize: This property is used to set the page size for paging when showing lookup data.
• PopUpTitle: This property is used to set the title of the lookup details window.
• AuoSearch: This property is used to set auto search functionality for the Lookup Control.

Code

Note that in the attached source code of the Lookup Control, it is very simple to understand. It does not contain any complex logic, it's just a combination of some simple functions, methods and a little scripting. The following functions and methods are mainly responsible for extracting and displaying data in the Lookup Control.

''' <summary>
    ''' Fill HTML Table with Lookup Details.
    ''' </summary>
    ''' <remarks></remarks>
    Private Sub FillLookUpDetails()
        Dim LookUpDetails As DataTable = GetLookUpDetails()
        Dim mLookupTableRows As Integer = LookUpDetails.Rows.Count
        Dim DescCols As String() = Me.DescriptionColumnName.Split(",")
        Dim mLookupTableColumns As Integer = DescCols.Length + 1

        Dim mLookupHeaderRow As TableHeaderRow = New TableHeaderRow
        Dim mLookupHeaderColumn As TableHeaderCell = New TableHeaderCell
        mLookupHeaderColumn.Text = Me.KeyColumnName
        mLookupHeaderRow.Cells.Add(mLookupHeaderColumn)
        For Each mColName As String In DescCols
            mLookupHeaderColumn = New TableHeaderCell
            mLookupHeaderColumn.Text = mColName
            mLookupHeaderRow.Cells.Add(mLookupHeaderColumn)
        Next
        LookUpData.Rows.Add(mLookupHeaderRow)
        For Each mDataRow As DataRow In LookUpDetails.Rows
            Dim mTableRow As TableRow = New TableRow()
            Dim mTableCell As TableCell = New TableCell()
            'To Find Key Column
            For mTableColumn As Integer = 0 To LookUpDetails.Columns.Count - 1
                mTableCell = New TableCell()
                mTableCell.Text = mDataRow(mTableColumn)
                mTableRow.Cells.Add(mTableCell)
            Next
            LookUpData.Rows.Add(mTableRow)
        Next
    End Sub

    ''' <summary>
    ''' Get Lookup Details from specified table.
    ''' </summary>
    ''' <returns></returns>
    ''' <remarks></remarks>
    Public Function GetLookUpDetails() As DataTable
        Dim mDataTable As DataTable = New DataTable
        Using mEkycContext As LookupContext = New LookupContext
            Using mDataAdapter As DbDataAdapter = New SqlDataAdapter
                mDataAdapter.SelectCommand = mEkycContext.Database.Connection.CreateCommand
                mDataAdapter.SelectCommand.CommandText = "Select " & Me.KeyColumnName & ", " & Me.DescriptionColumnName & " From " & Me.RecordTypeName
                mDataTable = New DataTable
                mDataAdapter.Fill(mDataTable)
            End Using
        End Using
        Return mDataTable
    End Function

Other capabiliteis of the Lookup Control, like searching, paging and some basic validations, are handled using jQuery and JavaScript as in the following:

function Pager(tableName, itemsPerPage) {
        this.tableName = tableName;
        this.itemsPerPage = itemsPerPage;
        this.pagerPage = 0;
        this.pagerPerPage = 5;
        this.currentPage = 1;
        this.pages = 0;
        this.inited = false;
        this.isFilter = 0;
        this.showRecords = function (from, to) {
            //Display Selected Records from Table
        }
        this.init = function () {
            //Initialize Page for HTML Table
        }
        this.showPageNav = function (pagerName, positionId, itemsPerPage) {
            //Handle Navigation Bar functionalities for HTML Table
        }
        this.prev = function () {
            //Previous Page
        }
        this.next = function () {
            //Next Page
        }
        this.showPage = function (pageNumber) {
            //Display Records for Selected Page in HTML Table
        }
    }

Using the code

Now the question is, how to use this control in your web application? It is very simple to integrate the Lookup Control into an existing web site. Just copy the control files and the necessary style and script files into the application from the attached source.

<%@ Register src="LookUp.ascx" tagname="LookUp" tagprefix="uc1" %>

<uc1:LookUp ID="LookUp1" runat="server" RecordTypeName="LookupDetails" KeyColumnName="SrNo"
      DescriptionColumnName="Name" ShowDescription="false" DescriptionWidth="10em"
      AutoSearch="true" Width="3em" />

You can specify multiple columns for the DescriptionColumnName property with comma(",") as seperator. For example:

<uc1:LookUp ID="LookUp1" runat="server" RecordTypeName="TableName" KeyColumnName="KeyColumn"
      DescriptionColumnName="Column1, Column2, Column3" ShowDescription="false"
      DescriptionWidth="10em" AutoSearch="true" Width="3em" />

Points of Interest

In this Lookup Control, the searching and pagination capabilities are handled by client-side scripting languages like JavaScript and jQuery, so obviously we will get the output quickly and efficiently compared to code behind logic and server-side programming. Of course, still it is a basic web user control, so you can change and add more functionalities in this control depending on your requirements. 

History

•  12 April 2015: Lookup Control Version 1.0