Custom Rating Control, create your own simple rating control

I have implemented rating control in one of my application by using two images (blue star and white star), and written c# code for displaying the rating selected by the user, you can store the selected rating in the database also and display accordingly.

You might be wondering if rating controls are already available then why build from scratch, your thinking is absolutely right; however I wanted a simple light weight control for my application so that I can change anything I want.

First what is does it display 5 rating white stars and when user click on any star let’s say click on 3rd  then you have to replace the image URL of previous 2 images and the clicked one to blue (whatever color you like), so it will become 3 blue star.

Lets have a look at the sample code. You just need to pass the rating value to the setFeebackScore method; it will set the images and display the score description accordingly. You can create this control as a component and use it wherever you want in your application.

  private const string IMAGE_FEEDBACK_BLUE      = "/_layouts/images/neon_FeedbackBlue.JPG";

  private const string IMAGE_FEEDBACK_WHITE   = "/_layouts/images/neon_FeedbackWhite.JPG";

  private void setFeedbackScore(float rating)

        {

            if (rating == float.Parse("1"))

            {

                imgPoor.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgFair.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgVeryGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgExcellent.ImageUrl = IMAGE_FEEDBACK_WHITE;

                lblScoreDescription.Text = "(Poor)";

            }

            else if (rating == float.Parse("2"))

            {

                imgPoor.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgFair.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgVeryGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgExcellent.ImageUrl = IMAGE_FEEDBACK_WHITE;

                lblScoreDescription.Text = "(Fair)";

            }

            else if (rating == float.Parse("3"))

            {

                imgPoor.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgFair.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgGood.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgVeryGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgExcellent.ImageUrl = IMAGE_FEEDBACK_WHITE;

                lblScoreDescription.Text = "(Good)";

            }

            else if (rating == float.Parse("4"))

            {

                imgPoor.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgFair.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgGood.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgVeryGood.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgExcellent.ImageUrl = IMAGE_FEEDBACK_WHITE;

                lblScoreDescription.Text = "(Very Good)";

            }

            else if (rating == float.Parse("5"))

            {

                imgPoor.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgFair.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgGood.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgVeryGood.ImageUrl = IMAGE_FEEDBACK_BLUE;

                imgExcellent.ImageUrl = IMAGE_FEEDBACK_BLUE;

                lblScoreDescription.Text = "(Excellent)";

            }

            else

            {

                imgPoor.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgFair.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgVeryGood.ImageUrl = IMAGE_FEEDBACK_WHITE;

                imgExcellent.ImageUrl = IMAGE_FEEDBACK_WHITE;

                lblScoreDescription.Text = string.Empty;

            }