Print

AJAX Kontrolleri - Suggest TextBox

21.11.2005 09:40:00
Kategori : ASP.NET

Özet :
Google suggest'teki gibi, öneri yapan bir textbox yazalım.

AJAX Kontrolleri - Suggest TextBox

    Mehabalar. Önceki makalelerimde, Ajax'ın ne olduğundan teknik olarak bahsetmiş ve bir master-detail ilişkili dropdownlist örneği yapmıştık. Şimdi ise, biraz daha yetenekli, daha çok kullanabileceğimiz bir TextBox yazalım. Google Suggest'i çoğunuz görmüşsünüzdür. Bilmeyenler hemen tıklayıp ne olduğuna bakabilirler.

Google Suggest Ajax kullanımına en güzel örneklerden biridir. Biz de projelerimizde aynı  bu şekilde bir textbox'ı nasıl yapabileceğimizi görelim. Öncelikle iş sürecimizi ve ihtiyaçlarımızı belirleyelim.

    1) Kullanıcı sayfayı açar.
    2) TextBox'a bir kaç karakter yazar.
    3) Birinci karaktere basıp, parmağını tuştan çektiği anda, database'e gidip bu karakter ile baslayan veriler alınır.
    4) Database'den alınan değerler TextBox'ın hemen altında açılan bir pencerede gösterilir.
    5) Kullanıcı eğer yeni tuşlara basıyor ise 3. adımdan itibaren işlem tekrarlanır.
    6) Kullanıcı panel üzerinden istediği kayıdı seçebilir aynı zamanda kendi istediği bir değeri de girebilir. (bu sayede textbox özelliği bozulmamış olur.)
    7) Seçilen itemın değeri TextBox'a yazılır.

Note: AJAX mimarisi olacağı için bu işlem sırasında sayfa kesinlikle POST-BACK olmayacaktır.

   Ve hemen ihtiyaçlarımızı belirleyelim. Bir TextBox ve bir html panel başlangıç için yeterli olacaktır.

Ve şimdi de ajax için gerekli kodlara bakalım. Öncelikle ilk yapmamız gereken sayfamızın ICallbackEventHandler arayüzünü imlpement etmesini sağlamak. Ardından Page_Load fonksiyonunda client scriptlerimizi aşağıdaki şekilde register edelim.
 
    protected void Page_Load(object sender, EventArgs e)
    {
 
        string ScriptRef = this.ClientScript.GetCallbackEventReference(
                    this,
                    "document.forms[0].TextBox1.value",
                    "OnCallback",
                    "this",
                    "OnCallback",
                    true);
        this.TextBox1.Attributes.Add("onKeyUp", ScriptRef);
 
        this.ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientCallback",
@"
<script type='text/javascript'>
function OnCallback(Result,Context)
{
    document.getElementById('MainPanel').innerHTML = Result;
     document.getElementById('MainPanel').style.display='';
}
 
function OnSelect(ID)
{
    document.forms[0].TextBox1.value =  document.getElementById(ID).innerHTML;
    document.getElementById('MainPanel').style.display='none';
}
 
    function  BgVer(ID)
    {
     document.getElementById(ID).style.backgroundColor='Red';
    }
   
    function  BgGeri(ID)
    {
     document.getElementById(ID).style.backgroundColor='';
    }
</script>
");
 
    }
 

    Koda dikkat ettiğinizde AJAX mantığını oluşturan kısım yalnızca OnCallback(Result,Context) fonksiyonundaki document.getElementById('MainPanel').innerHTML = Result; satırıdır. Diğer bölümlerin ise neler yaptıkları zaten oldukça açık. TextBox'a eklediğimiz attribute'a dikkat lütfen. OnKeyUp ile, klavye tuşundan parmağımızı çektiğimiz anı yakalayarak server'a bunu gönderiyoruz. Peki serverda bu eventi yakalayıp işleyen fonksiyon nedir?

    string eventArgument = "";
     void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
    {
        this.eventArgument = eventArgument;
    }
 
    string ICallbackEventHandler.GetCallbackResult()
    {
        DataSet ds = new DataSet();
        SqlDataAdapter da = new SqlDataAdapter("Select ProductName,ProductID from products where ProductName like  '" + this.eventArgument + "%'", "data source=supradyn;initial catalog=northwind;user id=sa");
        da.Fill(ds, "Products");
        string ReturnData = "";
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            ReturnData += "<div onmouseover='BgVer(" + dr["ProductID"] + ");' onmouseout='BgGeri(" + dr["ProductID"] + ")' onClick=\"OnSelect(" + dr["ProductID"] + ")\" id=" + dr["ProductID"] + ">" + dr["ProductName"] + "</div>";
        }
        return ReturnData;
    }
 

    Bu sayede, programımız her tuşa basışımızda database'e bağlanarak bize o harf / harfler ile başlayan Product isimlerini getirir. İtemları seçimi kolaylaştırmak, renklendirmek vb. işlemler için ayrı birer panel olarak yarattım. Bu sayede, mouse ile gezindiğimizde itemları ayrı ayrı renklendirip, bir item seçildiğinde, değerini OnSelect javascript fonksiyonuna göndererek textbox'ın içine atabildik.

    Bu kodda bir önceki dropdownlist örneğine göre daha sade, daha kolay anlaşılan bir javascript kullandık. Umarım hepimiz için faydalı olacaktır.

    İyi çalışmalar dilerim.

Kivanc OZUOLMEZ

Yazgelistir.com