Makale Özeti

Merhaba arkadaşlar, bu makalemizde ajax kontrol tollkit nesnelerinden rating(oylama) kontrolünün nasıl kullanıldığını inceleyeceğiz.

Makale

Açıklama

 

Rating kontrolü, oylamada kullanılan yıldızların sayısı ile oylama işlemi yapmayı sağlayan bir ajax kontrol toolkit nesnesidir. Yıldızların üzerinde gezindiğinizde vereceğiniz puana göre o kadar yıldız seçili gelir. Rating kontrolünün yönüyü dikey ya da yatay olarak değiştirebilirsiniz. Rating kontolü ClientCallBack eventini desteklediği için oylama işlemi sırasında postback işlemi arkaplanda gerçekleşir. 

 

Ö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 işlemi yapıldığında postback işlemi gerçekleşir

CurrentRating – Rating Kontrolünün ilk değeri

MaxRating – Rating Kontolünü Max. değeri

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

WaitingStarCssClass – Oylama işlemi 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 – Boş yıldızlar için belirtilecek CSS sitili

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

RatingDirection -  Oylama işleminin başlangıç hizası

OnChanged – Oylama işlemi yapılırken tetikleyecek olan eventin adı.

Tag – Rating’e eklenecek olan parametre.

 

Örnek

 

Kontrolümüzü tanıdık ve şimdi bir örnek yapalım. Genelde oylama işlemi yapılırken yıldız iconları kullanılır. Buna bağlı olmadığımızı belirtmek için ben başka bir icon kullanıyorum.

 

Örneğimizde kitapları listeleyeceğiz ve bu kitaplara ait oylama işlemlerini yaptıracağız.

 

 - Oylama işlemi yapılırken bu resim görüntülenecek. 

* - Oylanacak değerlerde bu resim görüntülenecek.

* - Boş değerlerde bu resim görüntülenecek.

 

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

 

 

Projemizi oluşturduktan sonra yeni örnek bir veritabanı oluşturalım. Kitapevi isimli yeni bir database oluşturacağım. Bu veritabanında kitaplar ve kitappuanları isimli 2 tablo olacak.

 

Kitaplar Tablosu

 

 

Kitap Puanları Tablosu

 

 

Tablomuzu oluşturduktan sonra kitaplar tablosuna örnek 2-3 kayıt girelim J

 

Şimdi sayfamıza bir Gridview Ekleyelim.  Gridview’in autogenaretecolumn özelliğini 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 şekilde oldu J

 

 

Şimdi rating konrolümüz için gerekli olan CSS sitilleri yazalım. İster 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>

 

Şimdi 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 işlemimiz hazır J Geriye kalan 2 şey kaldı, birincisi kayıtları listelemek, ikincisi de oylama sonucunu oylar tablosuna yazmak. İlk olarak listeleme işlemini 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();

    }

 

Şimdi projemizi çalıştırdığımızda

 

 

Şimdi oylama işlemini yapalım. Yukarıda da belirttiğimiz gibi Oyla isimli bir metod oluşturacağı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();

    }

 

Şimdi kodumuzu çalıştıralım.

 

2. Sıradaki 2 numaralı kitaba 4 puan verdim. Oylama sırasında oylama işleminin gerçekleştiğinin anlaşılması için farklı bir icon koymuştuk. Oda üstteki resimde görünmektedir. Bakalım oylama gerçekleşmiş mi? Veritabanına gidip kontrol edelim.

 

 

Evet oylama işlemi gerçekleşmiş J 2 numaralı kitap 4 puan J

 

Bu makaleninde sonuna geldik. Başka bir makale de görüşmek üzere.

 

Sem GÖKSU

MCP | MCAD.NET | MCTS

sem.goksu@yazilimgunlugu.com