Post
Ask Question

Lookup Control For ASP.Net Web Applications

 

Introduction

Hi friends Smile | :) , 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.
  1. ''' <summary>  
  2.     ''' Fill HTML Table with Lookup Details.  
  3.     ''' </summary>  
  4.     ''' <remarks></remarks>  
  5.     Private Sub FillLookUpDetails()  
  6.         Dim LookUpDetails As DataTable = GetLookUpDetails()  
  7.         Dim mLookupTableRows As Integer = LookUpDetails.Rows.Count  
  8.         Dim DescCols As String() = Me.DescriptionColumnName.Split(",")  
  9.         Dim mLookupTableColumns As Integer = DescCols.Length + 1  
  10.   
  11.         Dim mLookupHeaderRow As TableHeaderRow = New TableHeaderRow  
  12.         Dim mLookupHeaderColumn As TableHeaderCell = New TableHeaderCell  
  13.         mLookupHeaderColumn.Text = Me.KeyColumnName  
  14.         mLookupHeaderRow.Cells.Add(mLookupHeaderColumn)  
  15.         For Each mColName As String In DescCols  
  16.             mLookupHeaderColumn = New TableHeaderCell  
  17.             mLookupHeaderColumn.Text = mColName  
  18.             mLookupHeaderRow.Cells.Add(mLookupHeaderColumn)  
  19.         Next  
  20.         LookUpData.Rows.Add(mLookupHeaderRow)  
  21.         For Each mDataRow As DataRow In LookUpDetails.Rows  
  22.             Dim mTableRow As TableRow = New TableRow()  
  23.             Dim mTableCell As TableCell = New TableCell()  
  24.             'To Find Key Column  
  25.             For mTableColumn As Integer = 0 To LookUpDetails.Columns.Count - 1  
  26.                 mTableCell = New TableCell()  
  27.                 mTableCell.Text = mDataRow(mTableColumn)  
  28.                 mTableRow.Cells.Add(mTableCell)  
  29.             Next  
  30.             LookUpData.Rows.Add(mTableRow)  
  31.         Next  
  32.     End Sub  
  33.   
  34.     ''' <summary>  
  35.     ''' Get Lookup Details from specified table.  
  36.     ''' </summary>  
  37.     ''' <returns></returns>  
  38.     ''' <remarks></remarks>  
  39.     Public Function GetLookUpDetails() As DataTable  
  40.         Dim mDataTable As DataTable = New DataTable  
  41.         Using mEkycContext As LookupContext = New LookupContext  
  42.             Using mDataAdapter As DbDataAdapter = New SqlDataAdapter  
  43.                 mDataAdapter.SelectCommand = mEkycContext.Database.Connection.CreateCommand  
  44.                 mDataAdapter.SelectCommand.CommandText = "Select " & Me.KeyColumnName & ", " & Me.DescriptionColumnName & " From " & Me.RecordTypeName  
  45.                 mDataTable = New DataTable  
  46.                 mDataAdapter.Fill(mDataTable)  
  47.             End Using  
  48.         End Using  
  49.         Return mDataTable  
  50.     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:
  1. function Pager(tableName, itemsPerPage) {  
  2.         this.tableName = tableName;  
  3.         this.itemsPerPage = itemsPerPage;  
  4.         this.pagerPage = 0;  
  5.         this.pagerPerPage = 5;  
  6.         this.currentPage = 1;  
  7.         this.pages = 0;  
  8.         this.inited = false;  
  9.         this.isFilter = 0;  
  10.         this.showRecords = function (from, to) {  
  11.             //Display Selected Records from Table  
  12.         }  
  13.         this.init = function () {  
  14.             //Initialize Page for HTML Table  
  15.         }  
  16.         this.showPageNav = function (pagerName, positionId, itemsPerPage) {  
  17.             //Handle Navigation Bar functionalities for HTML Table  
  18.         }  
  19.         this.prev = function () {  
  20.             //Previous Page  
  21.         }  
  22.         this.next = function () {  
  23.             //Next Page  
  24.         }  
  25.         this.showPage = function (pageNumber) {  
  26.             //Display Records for Selected Page in HTML Table  
  27.         }  
  28.     } 

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.
  1. <%@ Register src="LookUp.ascx" tagname="LookUp" tagprefix="uc1" %>  
  2.   
  3. <uc1:LookUp ID="LookUp1" runat="server" RecordTypeName="LookupDetails" KeyColumnName="SrNo"   
  4.       DescriptionColumnName="Name" ShowDescription="false" DescriptionWidth="10em"   
  5.       AutoSearch="true" Width="3em" /> 
You can specify multiple columns for the DescriptionColumnName property with comma(",") as seperator. For example:
  1. <uc1:LookUp ID="LookUp1" runat="server" RecordTypeName="TableName" KeyColumnName="KeyColumn"   
  2.       DescriptionColumnName="Column1, Column2, Column3" ShowDescription="false"   
  3.       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


Similar Articles