Lookup Control For ASP.Net Web Applications


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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s