مقدمه :
در نرم افزارهاي تحت وب، مواقعي پيش مي آيد که قصد داريم موردي را در معرض امتيازدهي کاربران قرار دهيم. مثلا امکان اين را بدهيم که کاربر، يک امتياز از بين 1 تا 5 را انتخاب نموده و به يک مقاله يا محصول و يا غيره نسبت دهد.
با جمع آوري مجموعه امتيازات نسبت داده شده به محصول، توسط کاربران، مي توانيم ميزان محبوبيت محصول را مورد ارزيابي قرار دهيم.
کنترل Rating بدين منظور به وجود آمده است. در اين مقاله اين کنترل را معرفي نموده و سپس يک مثال کاربردي از آن را انجام خواهم داد.
کنترل Rating در حالت پيشفرض داراي شکل و يا رنگ خاصي نمي باشد و براي شکل دادن به آن بايد از CSS استفاده نماييد.
در اين مقاله ما قصد داريم Rating را به شکل زير در آوريم.
همانطور که ملاحظه مي کنيد، براي به وجود آوردن شکل بالا ما نياز به دو قطعه عکس داريم. يکي براي ستاره هاي زرد رنگ و يکي براي ستاره هاي بدون رنگ.
ضمنا يک قطعه عکس ستاره قرمز رنگ نيز نياز داريم که در مدت زمان بين کليک شدن کنترل Rating توسط کاربر و به اتمام رسيدن پردازش سمت سرور، اين عکس نمايش داده مي شود.
به طور کلي ما از استايل هاي زير در اين مقاله استفاده مي کنيم.
.ratingStar {
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.filledRatingStar {
background-image: url(Images/FilledStar.png);
}
.emptyRatingStar {
background-image: url(Images/EmptyStar.png);
}
.savedRatingStar {
background-image: url(Images/SavedStar.png);
}
|
شروع :
يک پروژه از نوع ASP.NET Ajax-Enabled WebSite ايجاد کنيد و کنترل Rating را به صفحه اضافه نماييد. به نماي Source View رفته و قطعه کد موجود را به شکل زير تغيير دهيد.
<cc1:Rating ID="Rating1" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="RatingChanged"
/> |
کنترل Rating داراي صفات نسبتا زيادي مي باشد که من در اينجا چند عدد از مهمترين ها را معرفي مي کنم.
- CurrentRating: اين گزينه امتيازي را مشخص مي کند که ما به طور پيشفرض به کنترل Rating داده ايم. به طور مثال در قطعه کد بالا مشخص کرديم که دو عدد از ستاره ها روشن باشند يعني امتياز 2 از 5 را به آن داده ايم.
- MaxRating : اين صفت بيشترين امتيازي را که کاربر مي تواند اعمال نمايد را مشخص مي کند. در قطعه کد بالا بيشترين امتياز، 5 در نظر گرفته شده است يعني 5 ستاره چهت امتياز دادن وجود دارد و کاربر مي تواند امتياز بين 1 تا 5 را انتخاب کند.
- StarCssClass : اين صفت نام کلاس CSS ي را نگهداري مي کند که به کليه ستاره هايي که در حال نمايش هستند، اعمال مي شود.
- WaitingStarCssClass : نام کلاس CSS ي را نگهداري مي کند که بين مدت زماني که کاربر بر روي امتياز مورد نظر خود کليک مي کند و زماني که پردازش سمت سرور به انتها مي رسد، اين استايل به کنترل اعمال مي شود.
- FilledStarCssClass : نام کلاس CSS ي را نگهداري مي کند که به ستاره هايي که روشن هستند اعمال مي شود.
- EmptyStarCssClass : نام کلاس CSS ي را نگهداري مي کند که به ستاره هايي که خاموش هستند اعمال مي شود.
- AutoPostBack : اگر مقدار اين صفت true باشد، هنگامي که کاربر روي کنترل کليک مي کند عمل PostBack انجام مي شود.
- ReadOnly : اگر مقدار اين صفت true باشد، اين کنترل غير قابل تغيير مي شود و کاربر فقط مي تواند امتياز را ببيند و نمي تواند آن را تغيير دهد.
- RatingAlign : اين صفت مي تواند مقادير Vertical يا Horizontal را بگيرد و همانطور که از نامش پيداست، مشخص مي کند که کنترل به صورت عمودي يا افقي نمايش داده شود.
- RatingDirection : مشخص مي کند که چينش ستاره ها از "راست به چپ" يا از "چپ به راست" يا از "بالا به پايين" يا از "پايين به بالا" باشد.
- OnChanged : اين گزينه نام يک رويداد (Event) را نگهداري مي کند که هنگام کليک شدن کنترل Rating توسط کاربر، اتفاق مي افتد.
- Tag : اين صفت مي تواند يک مقدار دلخواه را نگهداري نمايد. در ادامه اين مقاله کاربرد اين صفت را خواهيد ديد.
مثال دوم :
اکنون فرض کنيد تعدادي محصول داريد که آن ها را در يک GridView نشان داده ايد و قصد داريد براي آن ها از کنترل Rating استفاده کنيد و در حقيقت شکل زير را پديد آوريد.
يک کنترل Rating به صفحه اضافه کنيد و کدهاي آن را به شکل زير تغيير دهيد.
<cc1:Rating ID="Rating1" runat="server"
CurrentRating="2"
MaxRating="5"
StarCssClass="ratingStar"
WaitingStarCssClass="savedRatingStar"
FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyRatingStar"
OnChanged="RatingChanged"
Tag='<%# Eval("ProductID") %>'
/> |
قسمت جالب اين کد، صفت Tag مي باشد که ProductID مربوط به هر محصول را نگهداري مي کند. با کليک شدن کنترل Rating مربوط به هر محصول، ما در رويداد OnChanged به صورت زير به شناسه محصول و امتيازي که کاربر مي دهد، دسترسي داريم
protected void RatingChanged(object sender, RatingEventArgs e)
{
int ProductID =int.Parse(e.Tag);
string Rate = e.Value;
}
|
مثال انجام شده در اين مقاله از لينک بالاي مقاله قابل دريافت مي باشد.