Textbox içinde arama (Twitter Style)

Twitter da tweet yazarken @ işaretiyle başlayıp yazmaya başladığımızda, arkadaşlarımızı bulmamıza olanak sağlayan bir arama mekanızması bulunuyor. Geçenlerde lazım oldu epey bir aradım fakat tam olarak bu işi yapan bir betiğe rastlayamadım, bende isteğime en yakın örneği bulup üzerinde bir kaç ufak değişiklikle amacıma ulaştım. Faydalandığım örneğin adresini bir türlü bulamadım, bu yüzden paylaşamıyorum :S Olayın temelinde jQueryUi – Autocomplete‘ nin Multiple Values özelliği bulunuyor.

Bu işi yaparken jQuery ve jQueryUi yi kullanıyoruz, diğer dinamik kısım için php, asp, java vb.. diller kolaylıkla kullanılabilir. Ben asp.net mvc (c#) ile bu örneği gerçekleştirdim. Mekanızma şöyle çalışıyor; adres satırından aranacak bilgiyi gönderip, veritabanında aramamızı gerçekleştirip sonucu geriye json olarak döndürüyoruz.


Okumaya devam et Textbox içinde arama (Twitter Style)

Repeater ile çalışmak

Repeater asp.net aleminin bana göre en delikanlı kontrolüdür. Kafasından hiç bir şey yapmaz, biz ne dersek onu yapar. Bu sebepten dolayı veriyle ilgili kontrollerin en az özelliklisidir, hatta özelliği yoktur bile :) Madem hiç bir özelliği yok neden var bu kontrol ? Hemen anlatayım.

Repeater’ ın abisi olan DataList bir çok güzel özelliği üzerinde barındıran bir kontroldür. GridView ise bu iki kontrolden farklı bir mantıkta çalışır bu sebepten ötürü kulvarları çok farklıdır.  GridView veriyi satır satır (row) ekrana basar, DataList ve Repeater ise eleman elaman (item) basar. GridView’ da DataList’ de veriyi ekrana basarken kendi html şablonunu kullanır, Repeater ise hiç bir şablonu kullanmaz, etiketsiz, biçimsiz bir veri ekrana basar. Şöyleki, sanki bir döngü yazdınız ve veritabanından gelen saf veriyi ekrana bastınız. Bunun neresi güzel diye sorabilirsiniz. İstediğiniz gibi şekillendirebilirsiniz, kendiniz şekillendireceğiniz için w3 kurallarına uygun ve arama motorlarının sevdiği cinsten bir tasarım yapabilirsiniz. Burada şöyle bir durum da var, DataList ile 5 dakikada yapacağınız bir işi Repeater’ la 25 dakikada yaparsınız. Arada ki fark ise birinde kurallara uygun bir tasarım ve tamamen kontrolü sizde olan bir tasarım, diğerinde ise kuralsız ve zaman zaman kontrolün sizde olmadığı bir tasarım. Bu sebepten dolayı, sitelerin kullanıcı arayüzünde Repeater, yönetici kısmında ise DataList kullanmak gerekiyor diye düşünüyorum. Okumaya devam et Repeater ile çalışmak

GridView ile çalışmak ve püf noktaları

Uzun bir aradan sonra kontrollerimizi tanımaya kaldığımız yerden devam ediyoruz. Ana hatlarıyla anlatmaya çalışacağım kontrol namı diğer GridView1 :) Çok fazla detaya girmeden en sık kullanılan özelliklerini ve jQuery ile birlikte neler yapabileceğimize vakit kaybetmeden bir göz atalım.

GridView, bir veri kaynağından gelen veriyi ekrana liste şeklinde basan kontrolümüz. Bir çok yerde kullandığımız bu kontrolde, sayfalama ve sıralama işlemlerini rahatlıkla yapabiliyoruz. Okumaya devam et GridView ile çalışmak ve püf noktaları

Bir açılır menünün anatomisi

Basit bir açılır menü (drop down) nasıl yapılır, mantığı nasıldır bunu anlatmaya çalışacağım. Bu örnekteki açılır menü, üzerine tıklandığında açılıyor, basit bir değişiklikle üzerine gelindiğinde de açılmasını sağlayabilirsiniz.

Hemen html ve css kodlarımıza bir bakalım.

<style type="text/css">
body{font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;background-color:#3c3c3c;}

h1{
    text-shadow:0 1px 1px #575656;
    font-size:50px;
    color:#d1d1d1;
    margin:0
}

.container{width:500px;}

.dd{
    border:1px solid #575656;
    padding:5px;
    background:#e9e9e9 url('images/arrow.png') top right no-repeat;
    color:#4d4d4d;
    cursor:pointer;
    font-weight:bold;
}
.dd:hover{color:Black;}

.dd ul{
    position:relative;
    background-color:#e9e9e9;
    list-style:none;
    margin:5px;
    padding:0;
    display:none;
    font-weight:normal;
}

.dd ul li{border-bottom:1px solid #c0c0c0;font-size:14px}
.dd ul li a{color:#4d4d4d;text-decoration:none;display:block;padding:5px;}
.dd ul li:last-child{border-bottom:none}
.dd ul li:hover{background-color:#c0c0c0;border-bottom:1px solid #a8a8a8}

</style>
<div class="container">
    <div class="dd">
        Select item
        <ul>
            <li><a href="#">İtem 1</a></li>
            <li><a href="#">İtem 2</a></li>
            <li><a href="#">İtem 3</a></li>
            <li><a href="#">İtem 4</a></li>
            <li><a href="#">İtem 5</a></li>
        </ul>
    </div>
</div>

Okumaya devam et Bir açılır menünün anatomisi