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">
<title>Rating Uygulaması 1title>
<link href="StyleSheet.css" type="text/css" rel="Stylesheet" />
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.
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.
Bir sonraki makalemde Rating kontolü ile daha güzel bir uygulama yapacağız. Tekrar görüşmek dileğiyle.
Engin Demiroğ
www.e-learner.net