3 Ocak 2010 Pazar

ASP.NET AJAX AutoComplateExtender Kullanımı

Bu yazımızda Ajax Kontrollerinden 'AutoComplateExtender' bileşeninin kullanımını bir örnek üzerinden anlamaya çalışacağız.
Senaryomuz textbox içerisine yazdığımız karakterlerin web servis üzerinde oluşturduğumuz char dizisi içerisinden rasgele olarak seçilenleri ile tamamlanmasını sağlamak.
Bu bileşeni ihtiyacımız doğrultusunda özelleştirerek veri tabanı üzerinden getireceğimiz verilerle de doldurabiliriz. Daha önceki yazılarımızda böylebir senaryo üzerinde durmuştuk.
VisualStudio içinde AJAXEnabledWebApplication olarak başlattığımız projemizin Default.aspx sayfası içerisindeki 'ScriptManager' bileşeni altına bir tane textbox, bir tanede AutoComplateExtender sürüklüyoruz. Daha sonra projemize Add New Item deyip bir tane WebService.asmx ekliyoruz. Bu sayfada text box içerisine girilen karaktarleri rasgeleleriyle tamamlamayı sağlayacak olan GetCompletionList metodunu yazacağız.

[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{  
    Random random = new Random();
    List<string> items = new List<string>(count);
    for (int i = 0; i < count; i++)
    {
        char c1 = (char)random.Next(65, 90);
        char c2 = (char)random.Next(97, 122);
        char c3 = (char)random.Next(97, 122);
        items.Add(prefixText + c1 + c2 + c3);
    }
    return items.ToArray();
}

Görüldüğü gibi string bir dizi döndüren bir metot yazıyoruz. Bu dizi 3 elemanlı. 'c1' Ascii Kodu 65 ile 90 arasında (büyük harfler) olanlarından rasgele seçilmiş karakteri temsil ediyor. 'c2' ve 'c3' te aynı şekilde 97 ile 122 arasındakileri (küçük harfler).
Web servis içini yukarıdaki gibi düzenledikten sonra ScriptManager bileşenini aşağıdaki şekilde düzenliyoruz.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="~/WebService.asmx" />
    </Services>
</asp:ScriptManager>

AutoComplateExtender bileşeninin özelliklerinde de aşağıdaki düzenlemeyi yaptıktan sonra :

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
    TargetControlID="TextBox1"
    ServicePath="WebService.asmx"
    ServiceMethod="GetCompletionList
    MinimumPrefixLength="2" CompletionInterval="1000"
    EnableCaching="true"
    CompletionSetCount="12">
</cc1:AutoCompleteExtender>
<asp:TextBox ID="TextBox1" runat="server"/>

Projemizi çalıştırabiliriz. 

autoComplate
Sayfa görüntümüz...
Umarım sizin için yararlı olur..

5 yorum:

Adsız dedi ki...

Elinize sağlık Sermin Hanım. Super bir yazı olmuş. Ancak aklıma takılan bir soru var. Bu ajax ı büyük çapta uygulamalarda kullanırken bir sorun yaşar mıyız? Şimdiden teşekkürler. Çalışmalarınızda başarılar...

Sermin Yağcı dedi ki...

Büyük çaptaki uygulamalarda kullanım örneklerini görüyoruz. Örneğin Amazon ve HepsiBurada Alışveriş siteleri Ajax kullanılarak hazırlanmış uygulamalar.
Bence sorun varmış gibi gözükmüyor.

Adsız dedi ki...

Yani ben kullanırsam sorun olmayacak diyorsunuz. E-ticaret siteleri dışında örneğin bir gazete için uygulama yapıyorum desem. Yine sorunsuzca Ajax ı kullanabilir miyim?

Sermin Yağcı dedi ki...

Günümüzde ASP.NET kullanılarak hazırlanmış gazete haber siteleri mevcut..

Adsız dedi ki...

Merhaba Nermin Mükemmel bir iş çıkarmıssının Tebrik ederim bende askerden gelince senin gibi bir uzman olucam inşallah

Nurullah kahya

my web site:
eXe YAzılım...