ASP.NET Web应用程序的查找控件

• 下载演示和源码 - 3.7 MB

引言

大家好 :)，这是很久之后我为大家带来的新文章。这次我将和大家分享一个查找控件，它是我一年前为我的一个Web项目开发的。你会在互联网上找到很多用于Web和Windows应用程序的查找控件，它们具有各种功能，但大多数都不是免费的。如果你想在你的应用程序中使用它们，你需要购买许可，而剩下的免费使用的控件又不能完全满足我们的需求。所以那时，我决定设计一个Web用户控件，它可以满足我的所有需求。当然，这不是一个专业的Web用户控件，它包含了一些我希望在我的应用程序中根据需求实现的基本功能。但它仍然非常有用，它肯定会帮助那些想要开发此类用户控件的人，并且它也会给你一个关于Web用户控件的设计和开发的基本概念。

背景

查找控件是一个简单的Web用户控件。这个Web控件背后的基本思想是提供一种机制，将任何数据库表中的数据绑定到Web用户控件，以便用户友好地访问和选择数据，并具有快速数据加载、排序、分页等功能。在这里，对于这个例子，我使用Microsoft SQL Server数据库、Entity Framework作为后端技术，并使用Asp.Net、JavaScript、 jQuery作为前端技术。

控件属性

以下是查找控件中可用的属性列表

• RecrdTypeName：此属性用于设置指定数据库中的表名。
• KeyColumnName：此属性用于设置指定表中的主键列名。
• DescriptionColumnName：此属性用于设置指定表中的描述列名。
• DescriptionWidth：此属性用于设置描述列文本字段的宽度。
• ShowDescription：此属性用于设置描述文本字段的可见性。
• PageSize：此属性用于设置显示查找数据时分页的页面大小。
• PopUpTitle：此属性用于设置查找详细信息窗口的标题。
• AuoSearch：此属性用于设置查找控件的自动搜索功能。

代码

如果你看到附加的查找控件的源代码，它很容易理解。它不包含任何复杂的逻辑，它只是简单函数、方法和少量脚本的组合。以下函数和方法主要负责在查找控件中提取和显示数据。

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

查找控件的其他功能，如搜索、分页和一些基本验证，都是使用jQuery和JavaScript处理的。

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

使用代码

现在的问题是如何在你的Web应用程序中使用这个控件？将查找控件与你现有的网站集成非常简单。只需从附加的源代码中将控件文件和所需的样式和脚本文件复制到你的应用程序中即可。

<%@ 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" />

你可以为DescriptionColumnName属性指定多个列，并使用逗号(",")作为分隔符。例如

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

关注点

在这个查找控件中，搜索、分页功能由客户端脚本语言如JavaScript和 jQuery处理，因此与代码背后的逻辑和服务器端编程相比，我们显然会更快、更高效地获得输出。当然，它仍然是一个基本的Web用户控件，因此你可以根据你的需求更改和添加更多功能。

历史

• 2015年3月29日：查找控件 版本 1.0