Cấp bậc tác giả:

DOTNET

Autocomplete Textbox trong Asp.Net với ​​DataBase

Được viết bởi webmaster ngày 21/02/2015 lúc 09:23 PM
Trong bài viết này tôi sẽ chỉ cho bạn cách có thể tạo Autocomplete Textbox sử dụng ajaxcontroltoolkit AutoCompleteExtender trong ứng dụng sử dụng Asp.net, c#.Net.
  • 0
  • 2387

Autocomplete Textbox trong Asp.Net với ​​DataBase


Đầu tiên, chúng ta sẽ bổ sung thêm trang .aspx, và thêm các thẻ html dưới đây:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteTextboxInAjaxToolkit.aspx.cs"
    Inherits="ProjectDemo_Asp.et.AutoCompleteTextboxInAjaxToolkit" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Autocomplete Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit
    </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        Search : <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
       
        <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                    ServiceMethod="AutoCompleteAjaxRequest"
                    ServicePath="AutoComplete.asmx"
                    MinimumPrefixLength="2"
                    CompletionInterval="100"
                    EnableCaching="false"
                    CompletionSetCount="10"
                    TargetControlID="TextBox1" 
                    FirstRowSelected="false">
        </asp:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>

Trong đoạn mã trên, bạn có thể thấy tôi đã chỉ định TargetControlID = "TextBox1" . Thẻ này sẽ được sử dụng để xác định kiểm soát tự động gợi ý sẽ xuất hiện.

Chúng ta sẽ thấy cách để nhận dữ liệu từ cơ sở dữ liệu. Thẻ AutoCompleteExtender có hai thuộc tính ServiceMethod và ServicePath. Chúng ta sẽ xác định tên dịch vụ web và phương thức. Thêm tập tin webservice(.asmx) trong Project. Đây là mã webservice.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.OleDb;

namespace ProjectDemo_Asp.et
{
    /// <summary>
    /// Summary description for AutoComplete
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class AutoComplete : System.Web.Services.WebService
    {

        [WebMethod]
        public string[] AutoCompleteAjaxRequest(string prefixText, int count)
        {
            List<string> ajaxDataCollection = new List<string>();
            DataTable _objdt = new DataTable();
            _objdt = GetDataFromDataBase(prefixText);
                if(_objdt.Rows.Count>0)
                {
                    for (int i = 0; i < _objdt.Rows.Count; i++)
                    {
                        ajaxDataCollection.Add(_objdt.Rows[i]["LanguageName"].ToString());
                    }
                }
            return ajaxDataCollection.ToArray();
        }
        /// <summary>
        /// Function for retriving data from database
        /// </summary>
        /// <returns></returns>
        public DataTable GetDataFromDataBase(string prefixText)
        {
            string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
            DataTable _objdt = new DataTable();
            string querystring = "select * from ProLanguage where LanguageName like '%" + prefixText + "%';";
            OleDbConnection _objcon = new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            return _objdt;
        }
    }
}

Trong đoạn mã trên, chúng ta đã sử dụng cơ sở dữ liệu để truy cập, bạn có thể sử dụng cơ sở dữ liệu sql hoặc khác.

Lưu ý: Khi tạo webservice thuộc tính [System.Web.Script.Services.ScriptService] sẽ được chú thích. Vì vậy, hãy bỏ ghi chú này nếu không AutoCompleteExtender sẽ không thể truy cập vào các phương thức webservice.

Bây giờ thì chạy trang web để kiểm tra:

autosuggest.gif

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML