» » » AutoComplete and Filtering trong Asp.net Dropdownlist

(AutoComplete and Filtering in Dropdownlist ASP.Net) – Khi lựa chọn trong danh sách Dropdownlist, người sử dụng có thể gõ từ khóa vào để tìm giá trị phù hợp. Tuy nhiên chức năng tìm kiếm chỉ hỗ trợ ký tự đầu tiên của giá trị, hơn nữa nó sẽ duyệt qua từng danh sách mà hoàn toàn không rút ngắn danh sách giống như chức năng Autocomplete. Chính việc này đôi khi gây nhiều khó khăn cho người sử dụng trong trường hợp danh sách dài. Vậy có cách nào để bổ xung tính năng AutoComplete trong Dropdownlist không? Bài viết dưới đây sẽ hướng dẫn các bạn cách đưa tính năng AutoComplete cho Dropdownlist.


Nghe những bài hát đỉnh nhất về Thấy cô giáo - Nghe trên Youtube



Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET


- B1: Download CSDL Northwind tại đây và thực hiện công việc Restore Data.

- B2: Tạo Project trong Microsoft Visual Studio 2010

Trong Visual Studio tạo 1 Class có tên: Utility và nhập đoạn Code phía dưới cho Class này.

C# Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

namespace AutoCompleteandFilteringDropdownlist
{
    public class SqlDataProvider
    {
        #region"Membres Prives"

        private string_connectionString;

        #endregion

        #region"Constructeurs"

        public SqlDataProvider()
        {
            try
            {
                _connectionString = ConfigurationManager.ConnectionStrings["SiteSqlServer"].ConnectionString;
            }
            catch
            {
            }
        }

        #endregion

        #region"Proprietes"

        public stringConnectionString
        {
            get { return_connectionString; }
        }

        #endregion

        #region"Functions"

        public DataTableFillTable(string sql)
        {
            try
            {
                DataTable tb = new DataTable();
                SqlDataAdapter adap = new SqlDataAdapter(sql, _connectionString);
                adap.Fill(tb);
                return tb;
            }
            catch
            {
                return null;
            }
        }

        #endregion
    }
}

VB.NET Code
Imports System.Data.SqlClient
Imports System.Data

Namespace AutocompleteAndFilteringDropdownlist

    Public Class SqlDataProvider

#Region "Membres Prives"

        Shared _IsError As Boolean = False
        Private _connectionString AsString

#End Region

#Region "Constructeurs"

        Public Sub New()
            Try
                _connectionString = ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString
                _IsError = False
            Catch ex As Exception
                _IsError = True
            End Try
        End Sub

#End Region

#Region "Proprietes"

        Public ReadOnly Property ConnectionString() AsString
            Get
                Return _connectionString
            End Get
        End Property

#End Region

#Region "Functions"

        Public FunctionFillTable(ByVal sql AsString) As DataTable
            Try
                Dim tb AsNew DataTable
                Dim adap AsNew SqlDataAdapter(sql, _connectionString)
                adap.Fill(tb)
                Return tb
            Catch ex As Exception
                Return Nothing
            End Try
        End Function

#End Region

    End Class

End Namespace

Chú ý: Thuộc tính SiteSqlServer chính là chuỗi Connect với SQL Server trong file Web.Config

- B3: Download thư viện select2 tại đây

- B4: Copy file select2.js vào thư mục Js, copy file select2.css vào thư mục Styles

- B5: Download các thư viện ảnh tại đây và Copy vào thư mục Styles

- B6: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<head id="Head1" runat="server">
    <title>DropDownList Autocomplete and Filtering in ASP.Net</title>
    <link href="~/Styles/Site.css"rel="stylesheet"type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <!-- Include the plugin's CSS and JS: -->
    <script type="text/javascript"src="js/select2.js"></script>
    <link rel="stylesheet"href="Styles/select2.css"type="text/css"/>
    <asp:ContentPlaceHolderID="HeadContent"runat="server">
    </asp:ContentPlaceHolder>
</head>

- B7: Mở file Default.aspx dưới dạng HTML và  nhập mã HTML
<%@ PageTitle="DropDownList AutoComplete and Filtering in ASP.Net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AutoCompleteandFilteringDropdownlist._Default"%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1"runat="server">
    </asp:ScriptManager>
    <h3>
      DropDownList AutoComplete and Filtering in ASP.Net
    </h3>
    <br />
    <script type="text/jscript">
        function pageLoad() {
            $("#" + "<%=ddlObject.ClientID%>").select2();
        };
    </script>
    <asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
        <ContentTemplate>
            <table cellpadding="0"cellspacing="0"width="60%">
                <tr>
                    <td>
                        <asp:DropDownList ID="ddlObject" runat="server" Width="250px">
                        </asp:DropDownList>
                        <asp:LinkButton id="cmdSubmit" runat="server" OnClick="cmdSubmit_Click" Text="Submit" Causesvalidation="true">
                        </asp:LinkButton>
                    </td>
                </tr>
                <tr>
                    <td>
                        <br /><asp:Label ID="lblMessage" runat="server"></asp:Label>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

- B7: Viết Code cho file Default.aspx
C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Caching;

namespace AutoCompleteandFilteringDropdownlist
{
    public partial class _Default : System.Web.UI.Page
    {

        #region"Bind Data"

        private voidPopulateDropdownlist()
        {
            DataTable objBind = newDataTable();
            objBind = BindData();

            if (objBind != null)
            {
                if (objBind.Rows.Count > 0)
                {
                    ddlObject.DataTextField = "ProductName";
                    ddlObject.DataValueField = "ProductID";
                    ddlObject.DataSource = objBind;
                    ddlObject.DataBind();
                }
            }
        }

        private DataTableBindData()
        {
            SqlDataProvider objSQL = newSqlDataProvider();

            DataTable objBind = objSQL.FillTable("Select Products.* From Products");
            return objBind;
        }

        #endregion

        #region"Event Handles"

        protected voidPage_Load(object sender, System.EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    PopulateDropdownlist();
                }
            }
            catch
            {
            }
        }

        protected voidcmdSubmit_Click(object sender, System.EventArgs e)
        {
            string sMessage = "";
            foreach (ListItemitem in ddlObject.Items)
            {
                if (item.Selected)
                {
                    sMessage += item.Text + "-" + item.Value + "<br />";
                }
            }
             if (!string.IsNullOrEmpty(sMessage))
             {
                  lblMessage.Text = "<b>Selected:</b><br />" + sMessage;
             }
        }

        #endregion
    }
}

VB.NET Code
'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

Namespace AutocompleteAndFilteringDropdownlist

    Public Class _Default
        Inherits System.Web.UI.Page

#Region "Bind Data"

        Private Sub PopulateDropdownlist()
            Dim objBind As New DataTable

            objBind = BindData()

            If Not objBind Is Nothing Then
                If objBind.Rows.Count > 0 Then
                    With ddlObject
                        .DataTextField = "ProductName"
                        .DataValueField = "ProductID"
                    End With
                    ddlObject.DataSource = objBind
                    ddlObject.DataBind()
                End If
            End If
        End Sub

        Private Function BindData() AsDataTable
            Dim objSQL As New SqlDataProvider

            Dim objBind As DataTable = objSQL.FillTable("Select Products.* From Products")
            Return objBind
        End Function

#End Region

#Region "Event Handles"

        Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
            Try
                If Page.IsPostBack = False Then
                    PopulateDropdownlist()
                End If
            Catch ex As Exception

            End Try
        End Sub

        Private SubcmdSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) HandlescmdSubmit.Click
            Dim sMessage As String = ""
            If ddlObject.Items.Count > 0 Then
                For Eachitem As ListItemIn ddlObject.Items
                    If item.Selected Then
                        sMessage &= item.Text & "-" & item.Value & "<br />"
                    End If
                Next
            End If
            If sMessage <> ""Then
                lblMessage.Text = "<b>Selected:</b><br />" & sMessage
            End If
        End Sub

#End Region

    End Class

End Namespace

Bây giờ chạy Project bạn sẽ có kết quả như ảnh phía dưới.

Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



Chúc các bạn thành công!

Quang Bình
9:10:00 AM
Gia Khang
,

0 comments Blogger 0 Facebook

Post a Comment

Subscribe to: Post Comments ( Atom )
 
lập trình đốt nét © 2013. All Rights Reserved. Powered by Blogger
Top