What's your rating of ASP NET

Create a Rating Control (C #)

  • 2 minutes to read

by Christian Wenz

Download code or download PDF

Many websites, from e-commerce to community sites, offer their users rating of articles or items. This usually requires some coding effort, but we have the control tooltoolkit available.

Overview

Many websites, from e-commerce to community sites, offer their users rating of articles or items. This usually requires some coding effort, but we have the control tooltoolkit available.

steps

First, you need at least two types of images: one for a completed review element and one for an empty review element. A rating element is usually a star or a smiley face. For this scenario you will find the three files "Smiley. Png" and "Empty. Png" and "Smiley-done. Png" as part of the source code downloads for this tutorial.

Then create a new ASP.NET file and start adding a control to it:

Then add the control from the ASP.NET AJAX Control Toolkit. For this example, the following attributes must be set:

  • the initial rating to use
  • maximum rating
  • The CSS class to use when a rating element (star) is empty.
  • the CSS class to be used when filling in a rating element (star)
  • the CSS class to use for a visible stat
  • The CSS class to use while a star rating is being sent back to the server.

And here is the markup that creates a rating control with five elements (smileys), none of which is initially filled in:

The three CSS classes referenced must now display the appropriate image files, which is easy to do with CSS:

Make sure to include the width and height of the three images. otherwise the display may appear a little upwards.

Finally, the result of the evaluation should be displayed to the user (or at least stored in a database). So add a label for the output of a text message and a "Submit" button to send the evaluation form back to the server:

Access the rating control in the server-side code, and then access its property. This is the number of selected evaluation elements, in our example a value between 0 and 5.

Save the page and load it in your browser. If you point the mouse pointer over the (initially empty) evaluation elements, a JavaScript effect occurs: the evaluation changes. If you click the set of stars, the current rating is retained. When you submit the form, the server-side code will return the selected rating.

Creating a Rating System with Minimal Code (Click to view full size image)