ایجاد کنترل رتبه بندی در Asp.Net توسط Bootstrap

رتبه بندی در سایت یکی از امکان های کاربر پسند میباشد که اگر شامل نمای زیبایی باشد می تواند در جذب کاربر مفید باشد .کتابخانه Bootstrap این امکان را برای ما فراهم می نماید .همچنین ما می توانیم با استفاده از این کتابخانه رتبه بندی کاربرپسندی را در صفحات سایت خود قرار دهیم.در ادامه به نحوه ایجاد به همراه مثال , با چند نمونه از این رتبه بندی ها آشنا میشویم .

ابتدا باید کتابخانه Bootstrap را دانلود نموده و به پروژه خود اضافه کنید .سپس در قسمت head صفحه لینک مربوط به JS و CSS را قرار دهید .مانند لینک های زیر :

<head runat="server">  
    <title></title>  
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
    <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="Bootstrap/js/star-rating.js"></script>  
</head>

سپس تگ های رتبه بندی (number) را در بدنه سایت قرار می دهیم .

<div class="row">  
  <div class="col-lg-12">  
   
  <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
  <hr>  
  <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
  <hr>  
  <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
  <hr>  
  <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
  <hr>  
  <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
  <hr>  
  </div>  
</div>

در مثال بالا Value مقدار رتبه بندی را مشخص میکند .min حداقل و max حداکثر رنبه بندی میباشد .

در ادامه می توانید مشاهده کنید که چگونه مقادیر رتبه بندی را از کاربر توسط JQuery دریافت می کنیم .


    <script>  
           $(document).ready(function () {  
               $("#input-21b").on("rating.change", function (event, value, caption) {  
                   alert("You rated: " + value + " = " + $(caption).text());  
               });  
           });  
       </script>

برای دریافت مقادیر رتبه بندی در سمت سرور در #C باید فیلد hidden را در قسمت طراحی صفحه اضافه کنیم و سپس مقادیر رتبه بندی را در داخل فیلد پنهان (hidden field) ذخیره می کنیم .


    <asp:HiddenField ID="hdfRatingValue" runat="server" />

با استفاده از دستورات JQuery می توانیم این فیلد پنهان (hidden field) را که در سمت سرور می باشد را رتبه بندی کنیم .

<script>  
       $(document).ready(function () {  
           $("#input-21b").on("rating.change", function (event, value, caption) {  
                 
               var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
               ratingValue = value;  
               alert(ratingValue);  
           });  
       });  
   </script>

اکنون شما مقدار برای رتبه بندی را با استفاده از دستورات بالا دریافت کرده اید . hdfRating.value را می نویسیم و مقدار را در بانک اطلاعاتی ذخیره می کنیم .

در ادامه لیست کامل تگها و دستورات را میتوانید مشاهده کنید .


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="RatingControl.index" %>  
      
    <!DOCTYPE html>  
      
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />  
        <link href="Bootstrap/css/star-rating.css" rel="stylesheet" />  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
        <script src="Bootstrap/js/star-rating.js"></script>  
      
        <script>  
            $(document).ready(function () {  
                $("#input-21b").on("rating.change", function (event, value, caption) {  
                      
                    var ratingValue = $('#<%=hdfRatingValue.ClientID%>').val();  
                    ratingValue = value;  
                    alert(ratingValue);  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div>  
             
            <div class="row">  
    <div class="col-lg-12">  
         
        <input id="input-21a" value="0" type="number" class="rating" data-symbol="*" min=0 max=5 step=0.5 data-size="xl" >  
        <hr>  
        <input id="input-21b" type="number" class="rating" min=0 max=5 step=0.5 data-glyphicon="false" data-star-captions="{}" data-default-caption="{rating} Stars" data-size="lg">  
        <hr>  
        <input id="input-21c" value="0" type="number" class="rating" min=0 max=8 step=0.5 data-size="xl" data-stars="8">  
        <hr>  
        <input id="input-21d" value="2" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">  
        <hr>  
        <input id="input-21e" value="0" type="number" class="rating" min=0 max=5 step=0.5 data-size="xs" >  
        <hr>  
        </div>  
            </div>  
          
        </div>  
             <asp:HiddenField ID="hdfRatingValue" runat="server" />  
        </form>  
    </body>  
    </html>

دستورات #C :


    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
      
    namespace RatingControl  
    {  
        public partial class index : System.Web.UI.Page  
        {  
            protected void Page_Load(object sender, EventArgs e)  
            {  
      
            }  
            public void saveRating()  
            {  
              string val= hdfRatingValue.Value;  
            }  
        }  
    }