Asp.Net Ajax Rating Kontrolünü Tanıyalım

Bu yazımda Rating kontrolü ile ilgili temel hususlar, bir sonraki makalemde ise güzel ve nisbeten daha zor bie örnekle konuyu bitireceğim. Öncelikle bu makale de Rating kontrolünü tanıyalım.

Asp.Net AjaxControlToolkit ile gelen rating kontrolü, kullanıcılardan çeşitli durumlarda geribildirim almak için kullanılan gayet kullanışlı bir kontroldür.

Özellikleri: Ajax Control Toolkit SampleWebsite sayfasında da bulabileceğiniz gibi Rating kontrolü temel olarak aşağıdaki özelliklerden oluşur.

AutoPostBack – True olduğu zaman sayfa yenilenir. (Postback olur)
CurrentRating – Başlangıçta oylamanın kaç olacağı
MaxRating – Maksimum verilebilecek puan.
ReadOnly – Oylamanın değiştirilebilir olup olmadığı
StarCssClass – Oylama esnasında kontrole ait CSS sınıfı
WaitingStarCssClass – Bekleme modundaki CSS sınıfı
FilledStarCssClass – Dolu moddaki CSS sınıfı
EmptyStarCssClass – Boş moddaki CSS sınıfı
RatingAlign – Kontrolün dikey mi yoksa yatay mı olacağı.(Vertical,Horizontal)
RatingDirection – Doldurma işleminin soldan mı yoksa sağdan mı olacağı
OnChanged – Oylama değiştiği anda çalışacak olan event
Tag – En güzel özelliklerinden biri olan TAG özelliği ile oylamanın yapıldığı nesne, kayıt vb. ne odaklanılır. Önemi bir sonraki makale de daha iyi anlaşılacaktır.
Şimdi temel bir örnek ile Rating kontrolüne ait temel hususları anlamlandıralım. Aşağıdaki adımları izleyiniz.

1.Adım: Bir adet ASP.NET projesi açınız. (VS 2005 kullanıyorsanız, Ajax enabled Web Site açınız.)

2.Adım: Aşağıdaki resimleri ya da kendi resimlerinizi projenize Add Existing Item özelliğini kullanarak ekleyiniz.

3.Adım: WebSite>Add New Item adımlarını kullanarak sayfanıza bir adet StyleSheet ekleyiniz ve aşağıdaki CSS sınıflarını ya da isteğinize uygun CSS sınıflarını yazınız.

.oylamaEsnasi {
width: 30px;
height:26px;
cursor: pointer;
display: block;
margin: 0px;
padding: 0px;
display: block;
}
.Doldurulmusken {
background-image: url(dolu.gif);

}
.Bosken {
background-image: url(bos.gif);
}
.Kayitli {
background-image: url(dolu.gif);
}
4.Adım: Head tagı arasına CSS sınıfları için link veriniz.

runat=”server”>
Rating Uygulaması 1title>

5.Adım: Sayfanıza Rating Kontrolü ekleyiniz ve aşağıdaki gibi CSS sınıflarını ilgili özelliklere aktarınız.

ID=”Rating1″
AutoPostBack=”true”
StarCssClass=”oylamaEsnasi”
WaitingStarCssClass=”Kayitli”
FilledStarCssClass=”Doldurulmusken”
EmptyStarCssClass=”Bosken”
runat=”server”
onchanged=”OyVer”>
6.Adım: Aşağıdaki şekilde göründüğü gibi Rating kontrolünü seçiniz ve sağ taraftaki gibi Eventslerinden Changed eventini çift tıklayarak Changed eventine gidiniz.

asp-net-ajax-rating-kontrolunu-taniyalim-1

asp-net-ajax-rating-kontrolunu-taniyalim-1

Changed eventine aşağıdaki kodu ekleyiniz.
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Title = “Verdiğiniz Oy = ” + Rating1.CurrentRating.ToString();

}
Yada aşağıdaki Methodu elle siz yazınız.

public void OyVer(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Title = “Verdiğiniz Oy = ” + Rating1.CurrentRating.ToString();
}
Sonuç olarak aşağıdaki görüntüyü elde etmeniz gerekiyor.

AutoPostBack=”true”
StarCssClass=”oylamaEsnasi”
WaitingStarCssClass=”Kayitli”
FilledStarCssClass=”Doldurulmusken”
EmptyStarCssClass=”Bosken”
runat=”server”
onchanged=”OyVer”>

Artık Projenizi çalıştırabilirsiniz.

asp-net-ajax-rating-kontrolunu-taniyalim-2

asp-net-ajax-rating-kontrolunu-taniyalim-2

Bir sonraki makalemde Rating kontolü ile daha güzel bir uygulama yapacağız. Tekrar görüşmek dileğiyle.