AJAX RATING(OYLAMA) KONTROLÜ

Açıklama

Rating kontrolü, oylamada kullanılan yıldızların sayısı ile oylama islemi yapmayı saglayan bir ajax kontrol toolkit nesnesidir. Yıldızların üzerinde gezindiginizde vereceginiz puana göre o kadar yıldız seçili gelir. Rating kontrolünün yönüyü dikey ya da yatay olarak degistirebilirsiniz. Rating kontolü ClientCallBack eventini destekledigi için oylama islemi sırasında postback islemi arkaplanda gerçeklesir. 

Örnek Kullanımı

<ajaxToolkit:Rating ID="Rating" runat="server"

    CurrentRating="2"

    MaxRating="5"

    StarCssClass="ratingStar"

    WaitingStarCssClass="savedRatingStar"

    FilledStarCssClass="filledRatingStar"

    EmptyStarCssClass="emptyRatingStar"

    OnChanged="Rating_Changed" />

Özellikleri

AutoPostBack - True ise oylama islemi yapıldıgında postback islemi gerçeklesir

CurrentRating - Rating Kontrolünün ilk degeri

MaxRating - Rating Kontolünü Max. degeri

StarCssClass - Rating kontrolünde yer alacak yıldızların özelliklerini belirleyen CSS sitili

WaitingStarCssClass - Oylama islemi yapılırken görüntülenecek CSS sitili

FilledStarCssClass - Oylama yapılırken dolu olacak yıldızlar için belirtilecek CSS sitili

EmptyStarCssClass - Bos yıldızlar için belirtilecek CSS sitili

RatingAlign - Rating kontolünün yönü, (dikey yatay)

RatingDirection -  Oylama isleminin baslangıç hizası

OnChanged - Oylama islemi yapılırken tetikleyecek olan eventin adı.

Tag - Rating'e eklenecek olan parametre.

Örnek

Kontrolümüzü tanıdık ve simdi bir örnek yapalım. Genelde oylama islemi yapılırken yıldız iconları kullanılır. Buna baglı olmadıgımızı belirtmek için ben baska bir icon kullanıyorum.

Örnegimizde kitapları listeleyecegiz ve bu kitaplara ait oylama islemlerini yaptıracagız.

 - Oylama islemi yapılırken bu resim görüntülenecek. 

 - Oylanacak degerlerde bu resim görüntülenecek.

 - Bos degerlerde bu resim görüntülenecek.

Ilk olarak yeni bir AJAX tabanlı bir web projesi açalım.

Projemizi olusturduktan sonra yeni örnek bir veritabanı olusturalım. Kitapevi isimli yeni bir database olusturacagım. Bu veritabanında kitaplar ve kitappuanları isimli 2 tablo olacak.

Kitaplar Tablosu

Kitap Puanları Tablosu

Tablomuzu olusturduktan sonra kitaplar tablosuna örnek 2-3 kayıt girelim J

Simdi sayfamıza bir Gridview Ekleyelim.  Gridview'in autogenaretecolumn özelligini false yapalım ve 2 adet template field ekleyelim. 1. field da kitap adı ve açıklama yer alıcak. 2. ise rating kontolü. Benim sayfam bu sekilde oldu J

Simdi rating konrolümüz için gerekli olan CSS sitilleri yazalım. Ister yeni bir sitil dosyası ekleyelim, istersenized head tagları arasına yazalım hiç fark etmez J

  <style type="text/css">

        .standart

        {      width:20px;

                    height:16px;

                    cursor:crosshair;

                    background-repeat:no-repeat;                  

        }

        .dolu

        {

                    background-image:url(images/dolu.gif);    

        }

        .bos

        {

                    background-image:url(images/bos.gif);                 

        }

        .bekle

        {

                    background-image:url(images/bekle.gif);              

        }

    </style>

Simdi de Rating kontrolümüzün özelliklerini yazalım;

<cc1:Rating ID="Rating1" runat="server"

                               CurrentRating="1"

                               StarCssClass="standart"

                               EmptyStarCssClass="bos"

                               WaitingStarCssClass="bekle"

                               FilledStarCssClass="dolu"

       Tag='<%# Eval("KitapID")%>'

                               MaxRating="5"

                               OnChanged="Oyla" >

                            </cc1:Rating>

Evet artık oylama islemimiz hazır J Geriye kalan 2 sey kaldı, birincisi kayıtları listelemek, ikincisi de oylama sonucunu oylar tablosuna yazmak. Ilk olarak listeleme islemini yapalım.

SqlConnection Cnn;

SqlDataAdapter Da;

DataSet Ds;

SqlCommand Cmd;

    private void KayitlariGetir()

    {

        Cnn = new SqlConnection("Server=localhost; Database=kitapevi; trusted_connection=yes");

        Da=new SqlDataAdapter("select * from Kitaplar",Cnn);

        Ds = new DataSet();

        Da.Fill(Ds, "tbl");

        GridView1.DataSource = Ds.Tables[0];

        GridView1.DataBind();

    }

    protected void Page_Load(object sender, EventArgs e)

    {

        KayitlariGetir();

    }

Simdi projemizi çalıstırdıgımızda

 Simdi oylama islemini yapalım. Yukarıda da belirttigimiz gibi Oyla isimli bir metod olusturacagız.

     public void Oyla(object sender,AjaxControlToolkit.RatingEventArgs e)

    {    

        Cnn = new SqlConnection("Server=localhost; Database=kitapevi; trusted_connection=yes");

        if (Cnn.State == ConnectionState.Closed) Cnn.Open();

        Cmd = new SqlCommand("Insert Into KitapPuanlari(KitapID, Puan) values("+e.Tag+","+e.Value+")",Cnn);

        int returnvalue = Cmd.ExecuteNonQuery();

    }

 Simdi kodumuzu çalıstıralım.

2. Sıradaki 2 numaralı kitaba 4 puan verdim. Oylama sırasında oylama isleminin gerçeklestiginin anlasılması için farklı bir icon koymustuk. Oda üstteki resimde görünmektedir. Bakalım oylama gerçeklesmis mi? Veritabanına gidip kontrol edelim.

Evet oylama islemi gerçeklesmis J 2 numaralı kitap 4 puan J

Bu makaleninde sonuna geldik. Baska bir makale de görüsmek üzere.

Sem GÖKSU

MCP | MCAD.NET | MCTS

sem.goksu@yazilimgunlugu.com