4 Kasım 2009 Çarşamba

ASP.NET AJAX AutoCompleteExtender Kullanımı



Bu yazıda, Textbox içine doldurulması istenen veriyi veritabanından getirerek otomatik tamamlamayı bir örnek üzerinden anlamaya çalışacağız.

Textbox üzerinde otomatik tamamlama birçok yerde karşımıza çıkar. Bunun ASP.NET AJAX içinde herhangi bir TextBox Kontrolüne AutoCompleteExtender ekleyerek yapılabileceğinide biliriz. Kullanıcı Textbox içine yazmaya başladığında bir popup panel hareketli olarak kullanıcıya ilişkili sözcükleri getirir. Kullanıcı bu panelden istediği sözcüğü seçebilir. Şimdi WebService yardımı ile veri tabanından verileri nasıl getireceğiz ona balkalım.

Başlangıç olarak VisualStudio açarak, AJAXEnabledWebApplication olacak şekilde projemizi başlatıyoruz. Default.aspx sayfası içine bir tane TextBox birtane de AutoCompleteExtender sürüklüyoruz. Projeye bir tane WebService.asmx ekliyoruz. Yapacağımız ilk şey WebService.asmx.cs içine;

using System.Web.Script.Services;
[ScriptService]

referansını eklemek olmalı. Daha sonra 'SehirleriGetir' web metodu ile Sehir tablosundaki verileri alacağız.

private string cnstr = ConfigurationManager.ConnectionStrings["SehirConnectionString"].ConnectionString;

private string sql = string.Empty;

[WebMethod]
public string[] SehileriGetir(string onText)
{
    string sql = "Select * From Sehir Where Sehir_Adi like @onText";
    SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
    da.SelectCommand.Parameters.Add("@onTexst", SqlDbType.VarChar, 50).Value = onText + "%";
    DataTable dt = new DataTable();
    da.Fill(dt);
    string[] items = new string[dt.Rows.Count];
    int i = 0;
    foreach (DataRow dr in dt.Rows)
    {
        items.SetValue(dr["Sehir_Adi"].ToString(),i);
        i++;
    }
    return items;
}

Yukarıdaki webmethod içinde tutulan onText değişkeni, veri tabanından getirilecek olan veri ile ilişkili sözcükleri sorgulamak için gereklidir. Sql sorgusu ise bir strin dizi olarak sonuç döndürür.

Şimdi Default.aspx sayfası içine bir tane AutoCompleteExtender Kontrolü sürükleyerek özelliklerini aşağıdaki gibi düzenleyelim

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
    MinimumPrefixLength="1" ServiceMethod="SehirleriGetir"
    ServicePath="WebService.asmx" TargetControlID="TextBox1">
</cc1:AutoCompleteExtender>

MinimumPreferixLength : Otomatik tamamlama işi kaç karakter yazdıktan sonra başlasın.
ServiceMethod : Tetiklendiği anda hangi method çağırılsın.
ServicePath : Methodun yolu.
TargetControlID : Tetikleme hangi kontrolle başlatılsın.

Projemizi çalıştırdığımızda karşımıza gelen sayfada texbox içine ilk harfimizi yazdığımızda o harfle başlayan veri tabanındaki şehirlerin kusursuz bir şekilde, popup bir kutuda sıralandığını göreceğiz.
Umarım sizin için yaralı olmuştur..

1 yorum:

Adsız dedi ki...

Şermin Hanım verdiğiniz kod
items karakterinde hata veriyor...