google

Ajax Rating Control for ASP.Net to get the Star rating of hotel, save it into the database and get its value from database.

| Thursday, January 24, 2013

Download the detailed code here

The Rating control allows users to select the number of stars that represents their rating.

The page designer can specify the initial rating, the maximum rating to allow, the alignment and direction of the stars, and custom styles for the different states a star can have.

In the current example, we will use rating control in the form of stars and will be used to choose the star rating of a hotel. The rating chosen will be saved in the database and displayed from the database on page load.

Following are the properties of Rating Control:  

OnChanged – This event is used to get how many stars user has selected.

AutoPostBack – This property should be true to store rating during rating item click.

CurrentRating – This property is used to display Initial rating value (Number of stars to be filled initially).

MaxRating – This property is used to display maximum rating value (No. of stars here I am displaying only 5 if you want to increase stars value give property like this MaxRating=10).

StarCssClass – This cssclass is used for to display stars.

WaitingStarCssClass – This cssclass is used to show the starts color during saving the rating value.

EmptyStarCssClass – This cssclass is used to display empty stars color.

FilledStarCssClass – This cssclass is used to display filled stars color.

ReadOnly – This property is used to make rating control read only.

RatingAlign – This property is used to set stars vertical or horizontal.

RatingDirection – This property is used to set the direction of stars(LeftToRight or TopToBottom or RightToLeft or BottomToTop).

To save the rating details into the database, create the table with following columns:
  1. Id (int)
  2. HotelName (varchar(200)
  3. StarRating (int)
Add the reference of "AjaxControlToolKit.dll" into your website project and connection string to attach the website with database in the web.config.

Following 3 images are being used to show case the different states of the star rating.
Saved




Empty



       
Filled




Add the rating control on the page designer and set its following properties

AutoPostBack="true" OnChanged="RatingControlChanged" StarCssClass="ratingEmptyCss" WaitingStarCssClass="ratingSavedCss" EmptyStarCssClass="ratingEmptyCss" FilledStarCssClass="ratingFilledCss"

The CSS classes being used can be declared in a separate css file or in the can be added inline."OnChanged" event is fired when rating item is clicked in the browser. This event is being used to save the star rating in the database.

NOTE : In certain scenarios, postback on rating item click is not required. To do that add following line of code in the code behind file(.cs file)

Rating1.Attributes.Add("onclick", "return false;")

Or add as an attribute to the rating control in the page designer as follows:

onclick="return false;"


The page in browser will look like this

1 comments:

  1. In case you are interested in generating cash from your websites/blogs via popunder ads - you can try one of the most reputable networks: Pop Cash.

    ReplyDelete

Next Prev
▲Top▲