Date Image Friday, September 11, 2009 | Kategoriler | Asp.Net, Javascript, Web Service, Ajax, Tümü

Asenkron Web Servis Ve Ajax Auto Complete Extender Kullanarak Facebook Search

   Saat gece yarısı olmadan hemen bir örnek yapıp yayınlayayım dedim. Biraz acele oldu ama faydalı bir örnek olduğunu düşünüyorum. Daha önceden kendi kendime uğraştığım bir uygulamaya benzer bir örnek bu.

   Örnek uygulamaya öncelikle bir tablo oluşturarak başladım.

users table

   Daha sonra kendime bir web servis yazdım.

public object[] GetResult(string prefixText, int count)

        {

            List<object> result;

            SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Works;Integrated Security=True");

            SqlCommand com = new SqlCommand("select userName,photoUrl from Users", con);

            con.Open();

            SqlDataReader rd = com.ExecuteReader();

 

            result = new List<object>();

            while (rd.Read())

            {

 

                result.Add(new

                {

                    userName = rd[0],

                    photoUrl = rd[1]

                });

            }

            rd.Close();

            con.Close();

            return result.ToArray();

        }

 

   Tabi siz burada prefixText le gelen değere göre bir sonuç döndürmelisiniz benim tablomda 2 kişi olduğundan tümünün görünmesi ve örnek olması açısından tüm değerleri geri döndürdüm.

  Daha sonra projeye bir webform ekledim ve bir tane toolkitscriptmanager yerleştirdim.

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </cc1:ToolkitScriptManager>

   Sonraki aşamada bir textbox ve AutoCompleteExtender ekledim.

<asp:TextBox runat="server" ID="txtSearch" />

        <cc1:AutoCompleteExtender ID="txtSearch_AutoCompleteExtender" runat="server"

DelimiterCharacters="" Enabled="True" ServicePath="facebookService.asmx"

            ServiceMethod="GetResult"

MinimumPrefixLength="1"

OnClientItemSelected="onSelected" OnClientPopulated="onPopulated"

            BehaviorID="ace" TargetControlID="txtSearch">

        </cc1:AutoCompleteExtender>

Burada extender ımızın ServicePath i yazdığımız web servisimiz, ServiceMethod ise completionListimizi döndürecek olan metotun adı, minPrefixLength ise textbox a kaç karakter girildikten sonra servis çağırılacaksa o değeri alır, önemli olan OnClientItemSelected ve OnClientPopuleted olaylarıdır.

   OnClientPopulated servisten completionlistin geldiği an tetiklenir. Burada biz gelen verileri alıp listimizi düzenleyeceğiz yani gelen resim yoluyla bir img tag i ve gelen username i de bu resmin yanında bir span içerisinde göstereceğiz.

   OnClientItemSelected olayında ise listemizden seçilen item ın sadece username ine göre arama yapacağımız için sadece username i texboxa yazdırmak için kullancağız.Seçilen indexli itemı alıp onun userName propertysini textboxa yazdıracağız.

   BehaviorID de bize gerekli çünkü bu id li controlün completionlistini bana ver gibi bir ifade kullanacağız.

   Bahsettiğimiz olaylar client taraflı zaten adından da anlaşılıyor zaten. Bu nedenle javascript yazmamız gerekecek.

   <script type="text/javascript">

        function onPopulated() {

 

            var list = $find("ace").get_completionList();

            var count = list.childNodes.length;

            for (i = 0; i < count; i++) {

 

                var item = list.childNodes[i]._value;

 

                var photo = item.photoUrl;

                var name = item.userName;

 

                list.childNodes[i].innerHTML = '<span id="name"><img src="images/' + photo + '"/>' + name + '</span>';

 

            }

 

        }

 

 

        function onSelected() {

 

            var i = $find("ace")._selectIndex;

 

            var item = $find("ace").get_completionList().childNodes[i]._value;

 

            $get("txtSearch").value = item.userName;

 

        }

 

    </script>

   Biraz da css ile düzenlenirse sonuç ;