ADO.Net Entity’ e başlangıç yapmak için faydalı olacağına inandığım bir eKitap yazdım. Umarım konuya ilgi duyan arkadaşların işine yarayan bir kaynak olmuştur. Gelen istekler üzerine sürekli güncellemeye çalışacağım bu kitabı buradan indirebilirsiniz. Olumlu olumsuz görüşlerinizi belirtirseniz çok mutlu olurum ;)

Uzun zaman önce jQueryUi AutoComplete kullanımı ve Asp.Net ile jQuery Autocomplete kullanmak adında yazılar yazmıştım. Geçtiğimiz günlerde Fehmi Can abi de bir video çekerek Play framework ile autocomplete kullanımını anlatmış. Bende kıskandım aynı olayın mvc3 de nasıl yapıldığını videosuz yazarak anlatmaya çalışacağım :) Bu arada MVC3 ve jQuery kullanımı ile ilgili videolara buradan ve buradan ulaşabilirsiniz.


Hemen bir model oluşturup, ilgili kontrolleri oluşturuyoruz.

    public class kullanici
    {
        public int id { get; set; }
        public string adi { get; set; }
        public string soyAdi { get; set; }
    }

Kontrollerimizide oluşturduktan sonra veritabanımıza bir kaç tane kayıt ekliyoruz ve sonrasında arama işlemini yapıp geriye json data döndüren searchJson methodumuzu yazıyoruz.

        public ActionResult searchJson(string term) {
            var result = db.kullanicis.Where(x => x.adi.Contains(term) || x.soyAdi.Contains(term)).Select(x => new { id = x.id, value = x.adi });
            return Json(result,JsonRequestBehavior.AllowGet);
        }

Yukarıda ki kodda ne yaptık bundan biraz bahsetmek istiyorum. Where ile kullanici tablosunda adi veya soyadi alanında aratılan kelimeyi sorguluyoruz. Select ile geri döndürelecek veriyi kişiselleştiriyoruz. Eğer Select ile bu işlemi yapmazsak json datamız şu şekilde olacaktı, yani modeli aynen geri döndürecekti.

[{"id":3,"adi":"ahmet","soyAdi":"durmuş"},{"id":5,"adi":"mehmet","soyAdi":"kalkan"}]

Select ten sonra json datamız bu şekile dönüyor

[{"id":3,"value":"ahmet"},{"id":5,"value":"mehmet"}]

Bu işlemden sonra arama yapacağımız sayfamızı yani view ımızı oluşturuyoruz (search.cshtml) ve içine autocomplete işlemini gerçekleştirecek kodlarımızı yazıyoruz. Bu arada Jquery Ui – Autocomplete ile ilgili özelliklere buradan bakabilirsiniz.

    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function () {
            $("#deger").autocomplete({
                source: "/kullanici/searchJson",
                minLength: 1,
                select: function (event, ui) {
                    alert(ui.item.id + " / " + ui.item.value);
                }
            });
        });
    </script>

    <div class="demo">
        <div class="ui-widget">
            <label for="deger">Bir değer girin: </label>
            <input id="deger" size="50" />
         </div>
    </div>

Gördüğünüz gibi çok kolay ve hızlı bir şekilde autocomplete işlemini gerçekleştirdik. Bu örnekte aynı zamanda json veriyle ne kadar kolay işlem yaptığımızıda gördük ;) Projenin çalışan halini buradan indirebilirsiniz. Umarım faydalı bir yazı olmuştur.

Adı üstünde Razor (ustura) ! kodlarımızı hızlıca yazıp geçiyoruz. Uzun zamandır mvc3 ile geliştirdiğim bir projeyle uğraşıyorum haliyle razor ile kodlarımı yazıyorum. Geçen gün web forms ile geliştirdiğim bir projeye bazı özellikler eklemem gerekti, aman Allah’ ım <% %> bunlardan aç kapat aç kapat iflahım söküldü meğer razor candan da öteymiş bunu bir kez daha anladım. Bu yazıda anlatacaklarımın  hepsini Scottgu abimizin bloğundan öğrendiğimide söylemek istiyorum :) Düşünüyorumda yazacaklarımla başlık biraz alakasız gibi oldu ama idare edin :)

• Sayfa Düzeni (Layout) Yapacağımız projelerde sayfanın düzenini basit ve dinamik bir şekilde kontrol etmek  hayati önem taşıyan unsurlardan bir tanesi. Bir kaç değişik şekilde bu kontrolü sağlayabiliyoruz, bunlar neler mi ?
  • Html.RenderPartial bu methodla Shared yada ilgili kontrolün altında belirttiğiniz sayfayı, sayfanıza çağırmaya olanak sağlar. Bir nevi include file gibidir.
    • @{Html.RenderPartial(“_menu”);} Şeklinde kullanıyoruz, bu kodu yazdığımız yere Shared klasörü içerisinde ki yada ilgili kontrol klasörü içindeki _menu.cshtml sayfası çağrılır. Çağırırken uzantıyı yazmamıza gerek yoktur, otomatik olarak aspx, ascx, cshtml ve vbhtml uzantılarında ilgili sayfayı bulur.
  • RenderPage Yukarıda ki kontrolün aynısı gibi çalışır, tek fark çağırırken tam yolu vermemiz gerekir. Bu sebepden dolayı çağıracığımız dosyanın bulunduğu klasörün bir önemi yoktur, istediğimiz dosyadan istediğimiz sayfayı çağırabiliriz.
    • @RenderPage(“~/Views/Home/_test.cshtml”) şeklinde kullanıyoruz.
  • Yukarıda ki iki yöntemde de data yı ilgili sayfalara gönderebiliyor ve o sayfalarda işlem yapabiliyoruz.

                @{Html.RenderPartial("_menu",Model);}
                @RenderPage("~/Views/Home/_test.cshtml",ViewBag.dinamik)
    

  • RenderSection bu yöntem ile sayfa içinde ki kod bloğunu farklı bir yerde göstermek için kullanıyoruz. Yukarıdaki yöntemlerin aksine dışarıdan değil içeriden çağırma işlemini yapıyoruz.
    • @RenderSection(“menu”, false) diyoruz, burada ki false gerekliliği ifade ediyor. Sonrasında görüntülenecek section bloğunu yazıyoruz. @section menu{<h1>menu</h1>}
• Razor Sözdimi (Syntax)
  • Razor view engine kodlarının başına @ işareti koyuyoruz. Fakat bir mail adresini elle yazmak istediğimizde sıkıntı oluyor. Bunu ortadan kaldırmak için 2 tane @@ ile yazıyoruz. test@@test.com gibi..
  • Dinamik kodlarla html kodlarını iç içe yazdığımız bu yapıda nokta(.) simgesi başımızı ağırta biliyor. Yani @degisken. yazdığımızda ToString(), ToLower() gibi methodların listelendiğini görürüz halbu ki biz sadece nokta koymak istiyoruz. Bunun için @(degisken). şeklinde değişkeni parantez içine almamız yeterlidir.
  • Bir if bloğu yada herhangi bir kod bloğu içinde direk metin yada html kodu yazmamız gerekebilir. Bunun için razor bize 2 farklı yöntem sunuyor. İlk yöntemde tek satırlık yazımlar için @:tek satırlık yazım ve çok satırlı yazımlar için <text>çok satırlı yazım</text>

            @if (true)
            {
                @:Tek satır yazım.
    
                    <text>
                    çok
                    satırlı
                    yazım
                   </text>
    
            }
    

• ViewBag kullanımı Mvc 3 ile birlikte gelen en önemli özelliklerden bir tanesi ViewBag nesnesi. Mvc 3 öncesinde ViewData["degisken"] şeklinde view katmanımıza veri gönderiyorduk, eğer gönderdiğimiz veri bizim modelimizse view tarafında  ViewData["degisken"] nesnesini ilgili modele dönüşümünü sağlıyorduk, yani 2 türlü iş yapıyorduk. ViewBag ile bu durum ortadan kalkıyor, ViewBag var gibi çalışıyor, neyi verirseniz o türe dönüşüyor ve ekstra bir işlem yapmadan kullanabiliyoruz.

          //control katmanımız
          public ViewResult Index()
          {
              ViewBag.dinamik = context.uruns;
              return View();
          }
  
          //view katmanımız
          @foreach (var item in ViewBag.dinamik)
          {
              @item.ozellikAdi
          }
  

• Helper Kullanımı Yardımımıza hızlıca koşan helper ları yazmak ve kullanmak için çok güzel bir mekanızma bulunuyor. App_Code içine .cshtml uzantılı bir sayfa ekliyoruz ve içine razor syntaxlarını kullanarak fonksiyonumuzu yazıyoruz ve tüm sayfalardan bu fonksyionlara sayfaAdi.fonksiyon adı şeklinde erişip kullanabiliyoruz.

           //App_Code klasörümüz içindeki myHelper.cshtml dosyamızın içi
          @helper stokDurumu(int stok){
              if (stok < 1)
              {
                  @:Yok :(
              }
              else
              {
                  var. @stok adet
              }
          }
  
         //Herhangi bir sayfadan erişilip kullanılması
          @foreach (var item in Model) {
              @myHelper.stokDurumu(item.stok)
          }
  

Yukarıda ki örneklerin içinde gerçekleştirdiğim projeyi buradan indirebilirsiniz.

Çok sevdiğim bir öğrenci arkadaşım, “abi ziyaretçi defteri yapar mısın bana ?” dedi,  yaparım dedim. Ne kadar sürer dedi, taş patlasa 1 saat dedim. Mvc 3 sağolsun 15 dakika da istediğimiz özelliklerdeki ziyaretçi defterini yaptık :) Yeni başlayan arkadaşların işine yarar diye bu örneği paylaşmak istedim. Bu basit defterde, code-first ile model ve doğrulama (validation), jQuery Ajax ve sql compact 4.0 kullandık. Örneği buradan indirebilirsiniz, umarım faydalı olur.

Bu görseli başka bir yazı için hazırlamıştım, sanırım bundan sonra sık sık kullanacam, çok güzel oldu yav :)

Dün KTUCEC – KTU Computer Engineering Club‘ ın düzenlediği etkinlikte Asp.Net Mvc 3 üzerine uygulamalı bir anlatım yaptım. İlk tecrübem olduğundan bir hayli heyecanlandım, öyle ki kendimi tanıtmadan direk konuya girdim :) Benim için çok önemli bir tecrübe oldu. Webe ilgi duymayan arkadaşların sıkıldığı, ilgi duyanların ise zevk aldığı bir anlatım olduğunu düşünüyorum. Kendimce bir yol haritası ve katılımcılara sormak için hazırladığım sorularım vardı ama sadece vardı heyecandan bakamadım bile :) Hayalini kurduğum bir olaydı ve gerçek oldu. Devamında çok daha iyi olacağına inanıyorum. Emeği geçen 4primes Teknoloji Grubuna ve Sözenler Bilgisayar‘ a çok teşekkür ediyorum. Emeği geçenlere ve katılan herkese teşekkür ediyorum.

Bu yazı serisinde jQuery ile nasıl performans çakallıkları yapabiliriz bunlara değineceğim. Zaman zaman çok ufak nüanslar ile ciddi yüklerden kurtulabiliyoruz, önemli olan bu nüansları görebilmek. Yaptığım işlerde jQuery’ i sadece bu amaçlarla kullandığım bile oluyor. Neyse lafı fazla uzatmadan ilk hareketimize geçelim.

Satır sayısı yani veritabanından gelen kayıtların sayısı çoğu zaman ihtiyaç duyduğumuz bir veridir. Bu veriyi veritabanından almak için Count() fonksiyonunu kullanıyoruz. Karmaşık bir sorgu sonucu aldığımız verileri kullanıcılara sunacağımızı varsayalım, count işlemini yapabilmek için verileri gruplamamız (group by) gerekebilir yada count için ayrı bir sorgu yazmamız gerekebilir. Bunlar hem ekstra uğraş isteyen hemde ekstra iş yüküdür. Eğer bir grid kontrülü yada datatable benzeri bir yapı kullanıyorsanız direk içindeki verinin satır sayısını alabilirsiniz kullanmıyorsanız jQuery ile html etiketlerini lenght ile sayarak sonuca ulaşabilirsiniz. Hemen örnekleyelim;

    <ul class="ornekLi">
	    <li>satır 1</li>
	    <li>satır 2</li>
	    <li>satır 3</li>
	    <li>satır 4</li>
	    <li>satır 5</li>
    </ul>

    <table class="ornekTable">
        <tr>
            <td>Satır 1</td>
        </tr>
        <tr>
            <td>Satır 2</td>
        </tr>
        <tr>
            <td>Satır 3</td>
        </tr>
    </table>

    <table class="ornekTable2">
        <tr>
            <td>Satır 1</td>
            <td>Satır 2</td>
            <td>
                <ul>
	                <li>satır 1</li>
	                <li>satır 2</li>
	                <li>satır 3</li>
	                <li>satır 4</li>
                </ul>
            </td>
            <td>Satır 4</td>
            <td>
                <ul>
	                <li>satır 1</li>
	                <li>satır 2</li>
                </ul>
            </td>
        </tr>
    </table>

Yukarıdaki html çıktısında veritabanımızdan gelen verileri listelediğimizi varsayıyoruz.

    <script type="text/javascript">
        $(document).ready(function () {

         alert($(".ornekLi").length);
         alert($(".ornekTable tr").length);

         $(".ornekTable2 tr td").each(function () {
                var t = $(this);
                var count = t.find("ul li").length;
                if (count > 0) {
                    t.prepend("<h5>" + count + " adet</h5>");
                }
                else {
                    t.prepend("<h5>li yok</h5>");
                }
            });
        });
    </script>

Bu sayede count işlemi için sql e bulaşmamış olduk. Hatta karmaşık durumlarda bile jquery’ nin seçicileri sayesinde bir sürü kod yazmaktan kurtulup işlemimizi gerçekleştirdik. Umarım faydalı bir bilgi olmuştur, ilerleyen günlerde benzer yöntemler ile geri geleceğim ;)

Mvc projemizde jQuery ajaxı kullanarak, bir içeriğin altına yorum ekleme ve silme işlemini gerçekleştireceğiz. Bu işlemin bize kazandırdıklarını, mvc ile uygulama geliştirmenin bize kattıklarınıda anlamaya çalışacağız. Umarım faydalı olur.

Videoyu daha kaliteli izlemek için buradan indirebilirsiniz.

Projeyi buradan, videoyu buradan indirebilirsiniz.

Asp.Net de sayfamıza eklediğimiz her kontrolün bir id si bulunuyor. Javascript ile kontrollerimize erişmek istediğimizde bu id leri direk kullanabiliyoruz. Eğer masterpage kullanırsak işler biraz değişiyor. Sayfamız masterpage den türediği zaman kontrollerin idlerine bir ön ek geliyor. Bunu kod tarafında göremesekte sayfa yorumlandıktan sonra kaynak kodlarına baktığımızda id lerin değiştiğini görüyoruz. Haliyle jquery ile ilgili id deki elemanı seçmemiz için kod tarafında ki id değil, kullanıcı (client) tarafında ki id yi kullanmamız gerekiyor. Bu durumda İki şekilde problemimizi çözebiliyoruz. Birinci çözüm yolu kontrollerin ClientID özelliğini kullanmak. <%=kontrol.ClientID%> dediğimizde geriye dönen id bizim kontrolümüzün sayfa yorumlandıktan sonra oluşan değerdir. Fakat bu yöntemi .js sayfamızda kullanmamız söz konusu değil bu sebepten direk .js içerisine html de oluşan id yi yazarak kullanabiliyoruz. Şöylede bir durum var hiç uğraşmadan kontrollerimize class atayıp yukarıdaki olaylara bulaşmadan direk class adını yazarak seçip istediğimiz işlemleri aynen yapabiliriz. Burada ki tek nüans id yakalama performansı class a göre daha iyi fakat bunu küçük işlerde görmemiz çok zor ;) Neyse umarım konu anlaşılmıştır. Aşağıda bir örnek  bulunuyor, dilerseniz çalışan halini buradan indirebilirsiniz.

    <script type="text/javascript">
        jQuery(function($) {
            $("#<%=date.ClientID %>").mask("99/99/9999");
            $("#<%=phone.ClientID %>").mask("(999) 999-9999");
            $("#ctl00_ContentPlaceHolder1_tin").mask("99-9999999");
            $("#ctl00_ContentPlaceHolder1_ssn").mask("999-99-9999");
        });
    </script>

Günümüzde çoklu dil (multi language) giderek önem kazanıyor. Bunun en büyük sebebi, projelerin artık ülke bazlı düşünülmüyor olması. Eskiden 2 dil bile fazla gelirken şimdilerde kullanıcı eğilimine göre bu sayı artabiliyor. Çoklu dil yapısı için bir sürü yöntem bulunuyor. Örneğin; xml, veritabanı, resource kullanmak vb.. Biz bu yazımızda resource ile çoklu dilli uygulama nasıl geliştirilir buna bakacağız.

Öncelikle mevcut bir sayfamızı kolay bir şekilde nasıl çoklu dile çeviririz buna bakacağız. Ben örnek olarak küçük bir form hazırladım.

Formumuz da textbox, dropdownlist, label, button ve validator kontrollerimiz bulunuyor. Eğer elle bu forma daha doğrusu sayfaya girişip tek tek elle değişkenleri tanımlamaya kalkarsak epey bir zamanımızı alır. Visual studio geliştiricileride böyle düşünmüşler ki bizi yormamak için Tools menüsünün altına Generate Local Resource özelliğini koymuşlar. Unutmadan bu menü sadece tasarım kısmındayken çıkıyor. Buraya tıkladığımızda bizim yerimize resource dosyası oluşturuluyor ve gerekli değişiklikler sayfamızda yapılıyor. Kaynak dosyamız App_LocalResources klasörünün altında sayfaAdi.aspx.resx şeklinde bulunuyor.

Form.aspx.resx kaynağımızın içerisine baktığımızda Name, Value ve Comment şeklide 3 alanla karşılaşıyoruz. Name alanı diğer diller içinde oluşturacağımız kaynak dosyamızla ortak olan parametreyi barındıran alanımız. Value ilgili Name alanına karşılık gelen değeri barındıran alanımız. Comment ise ilgili alanlar hakkında ki açıklamaların yazılması için bulunuyor. Bu yazdığımdan bir şey anlamamış olabilirsiniz, uygulama sırasında çok daha iyi anlayacaksınız ;)

Şimdi aynı formumuz için farklı bir dilde kaynak dosyası oluşturalım. Bunun için mevcut oluşan resx uzantılı dosyamızı aynı yere kopyalayıp yapıştırıyoruz ve adını sayfaAdi.aspx.en.resx şeklinde değiştiriyoruz, ben örneğimi İngilizce yapacağım için en ekini ekledim. Diğer diller için yapmanız gereken sadece bu eki değiştirmek. Buradan dillere bakabilirsiniz. Unutmadan bu örneği indirdiğinizde Kulturler.aspx sayfasını çalıştırdığınızda buradan da görebilirsiniz. Örneğin Fransızca için de bir kaynak oluşturmam gerekseydi kopyala yapıştır yapıp adını sayfaAdi.aspx.fr.resx şeklide yeniden adlandıracaktım.

Gördüğünüz gibi gayet basit bir şekilde sayfaAdi.aspx.en.resx dosyasının içine ilgili alanın karşısına ingilizcesini yazdık. Şimdi sayfamızda bu dil değişiminin nasıl yapılacağına bakalım.

        protected override void InitializeCulture()
        {
            string strDil;
            if (Request.Form["ddlDil"] == null)
            {
                strDil = "tr-Tr";
            }
            else
            {
                strDil = Request.Form["ddlDil"];
            }
            Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(strDil);
            Thread.CurrentThread.CurrentUICulture = new CultureInfo(strDil);
            base.InitializeCulture();
        }

Formumuzda bulunan dropdown menüden seçtiğimiz dilin değerini post edip uyguluyoruz. Sayfa yeniden yüklendiğinde seçtiğimiz dilin kaynak dosyasını kullanıp ekrana çıktıyı o şekilde veriyor. Yani eğer İngilizce dilini seçmişsek gidip sayfaAdi.aspx.en.resx kaynağında ki bilgileri getiriyor. Eğer xml yada başka bir yöntemle çoklu dil olayını halletmeye çalışsaydık şu ana kadar geldiğimiz kısmı çok daha uzun zamanda halletmiştik. Ayrıca kaynak kullanımının bir avantajı daha var ki o da kod yazmamızı çok kolaylaştırıyor, aşağıda bahsedeceğim.

Buraya kadar sorun var mı bilmiyorum ama çok basit ve anlaşılır bir şekilde işlemimizi tamamladık. Şimdi gelelim App_GlobalResources ile kaynak kullanımına, yani kod yazarken çoklu dil mekanızmasını kullanmaya. Buda gayet basit bir işlem. Öncelikle App_GlobalResources klasörümüzü oluşturup içerisine resx uzantılı kaynağımızı ekliyoruz. Ben örneğimde varsayilan.resx olarak ekledim. İçerisine kullanacağımız değişkenleri yazıyoruz. Mantığımız yukarıda ki LocalResources ile bire bir aynı. Değişkenlerimizi yazdıktan sorna kopyala yapıştır yapıp dosya adımızı yukarda ki gibi varsayilan.en.resx olarak yeniden adlandırıyoruz. GlobalResources’ i LocalResources den ayıran en büyük özellik erişim özelliği, kod yazarken global kaynağa direk ulaşabilirken lokal kaynağa ulaşamıyoruz. Hemen kodumuza bakıp üzerinden konuşalım.

        protected override void InitializeCulture()
        {
            string strDil;
            if (Session["dil"] == null)
            {
                strDil = "tr-Tr";
            }
            else
            {
                strDil = Session["dil"].ToString();
            }

            Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(strDil);
            Thread.CurrentThread.CurrentUICulture = new CultureInfo(strDil);
            base.InitializeCulture();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            string strDil = Request.QueryString["Dil"];

            if (strDil!=null)
            {
                Session["dil"]=strDil;
                Response.Redirect("degisken.aspx");
            }

            Page.Title = Resources.varSayilan.sayfaBasligi;
            ltrHosgeldiniz.Text = Resources.varSayilan.hosgeldiniz;
        }

Bu örnekte session ile birlikte kullandım ki sayfamız her yenilendiğinde dil seçmek zorunda kalmayalım. Resources yazıp noktaya bastığımızda varSayilan kaynağını görüyoruz. Yani dosyamızın kök adını, tekrar noktaya bastığımızda değişkenlerimizi görebiliyor ve kullanabiliyoruz. Diğer çoklu dil sistemlerine göre bir artıda bu olay, çünkü kod yazarken değişkenleri aklımızda tutmamız bir hayli zor buda bize gidip kaynağa bakmamıza haliyle zaman kaybına sebep olacaktır. Tüm değişkenlerimizi görüp istediğimi gibi kullanabiliyoruz.

Globalizasyon ile ilgili bir sürü konu ve özellik bulunuyor. Diyelim ki onlarca sayfamız var “Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(strDil); Thread.CurrentThread.CurrentUICulture = new CultureInfo(strDil);” bu kodları her sayfaya tek tekmi yazacığız tabiki hayır, global.asax içerisine bir kere yazarak tüm sayfalarda kullanabilirsiniz. İpucu olarak degisken.aspx sayfasında birde resim yollarını bu sistemde nasıl kullarınızı örneklendirdim. Eğer web.config dosyasısından uiculture=”auto” şeklinde bir ayarlama yaparsak kullanıcının tarayıcısının diline göre kaynak dosyamız okunacak ve sayfamızın o dildeki versiyonu kullanıcıya gösterilecektir. (Ne yalan söyleyeyimbunu hiç denemedim :D)

Evet benim yazacaklarım bu kadar, dediğim gibi globalizasyon çok derin bir konu, merak edenler buradan dallanarak araştırabilirler. Umarım faydalı bir yazı olmuştur, herkese güzel günler..

Projeyi buradan indirebilirsiniz.

Uzun zaman önce jQuery eklentisi olan Autocomplete ile birlikte nasıl bu işi yaptığımızı yazmıştım. Bu sefer jQueryUi ye eklenen bu özelliğin nasıl kullanıldığını anlatmaya çalışacağım. Jqueryui ile birlikte gelen autocomplete de bir çok özellik bulunuyor. Tüm özellikleri kolayca kullanabiliyor ve istediğiniz gibi şekillendire biliyorsunuz. Ben bu örnekte temel olarak arama işlemini anlatacağım, eklentinin sayfasından diğer özelliklerine bakıp kendinize göre geliştirmeler yapabilirsiniz. Hemen default.aspx sayfamızdan başlayalım;

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="ui-Themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <script>
        $(function() {
            $("#deger").autocomplete({
                source: "Search.ashx",
                minLength: 1,
                select: function(event, ui) {
                    alert(ui.item.id +" / "+ ui.item.value);
                }
            });
        });
	</script>

        <div class="demo">
            <div class="ui-widget">
	            <label for="deger">Bir değer girin: </label>
	            <input id="deger" size="50" />
            </div>
        </div>

Yukarıda ki kodda anlatılacak çok fazla bir şey bulunmuyor. Jquery kütüphanelerimizi yüklüyoruz, sonrasında değer girilecek input umuzun id sini yakalayıp autocomplete özelliğini ekliyoruz. Source ye dinamik olarak aramanın yapılacağı sayfamızın adresini veriyoruz. minLenght değeri ise kaç karakterden sonra aramaya başlanması gerektiğini ifade ediyor. 3 yazarsak 3. karakterle birlikte arama işlemi başlayacaktı. Select kısmında ise veri seçildiğinde ne olacağını fonksiyon olarak tanımlıyoruz. Bu örnekte gelen verinin değerini ve id sini alert ile ekrana basıyoruz.

Search.ashx (arama işleminin gerçekleştiği sayfamız.)

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string strJsonTemplate = "\"id\":{0},\"value\":\"{1}\"";
            string strParam = context.Request.QueryString["term"];

            StringBuilder sb = new StringBuilder();
            Dictionary<int, string> d = veriler();
            sb.Append("[");
            foreach (KeyValuePair<int, string> item in d.Where(v => v.Value.Contains(strParam)))
            {
                sb.Append("{" + string.Format(strJsonTemplate, item.Key, item.Value) + "},");
            }
            sb.Append("]");

            context.Response.Write(sb.ToString().Replace(",]", "]")); //sonda kalan virgülü kaldırıyoruz.
        }

        public Dictionary<int,string> veriler()
        {
            Dictionary<int, string> d = new Dictionary<int, string>();
            d.Add(1, "javascript");
            d.Add(2, "asp.net");
            d.Add(3, "csharp");
            d.Add(4, "php");
            d.Add(5, "java");
            d.Add(6, "jquery");
            d.Add(7, "html");
            d.Add(8, "css");
            d.Add(9, "mssql");
            d.Add(10, "mysql");
            d.Add(11, "visual studio");
            d.Add(12, "net beans");
            return d;
        }

Bur örnekte Dictionary içerisine elle eklediğim veriler içerisinde arama işlemi yaptım. Siz bu kısmı istediğiniz gibi düzenleyip veritabanınızda arama işlemini kolayca yaptırabilirsiniz. Bu sayfada ekstradan yaptığımız tek olay veriyi jSon veri türüne çevirmek. Arama işlemini QueryString ile birlikte gelen term bilgisini kullanıyoruz. Sonrasında basit bir foreach ve bilgileri ekrana yazdırıyoruz.

Basit bir jSon verisi;

[{"id":1,"value":"javascript"},{"id":5,"value":"java"}]

Gördüğünüz gibi çok basit ve kullanışlı bir şekilde otomatik tamamlama işlemini yaptık. İlgili projeyi buradan indirebilirsiniz. Hepinize güzel ve sağlıklı günler, hoşça kalın..