An ASP.NET Rating SystemBy Paul Apostolos
In Part 2 we looked at how to grab the total ranking for a given
picture. In this part we'll look at how to dynamically render the image in an ASP.NET Web page.
While the image display could be dynamically generated from a single GIF (by, perhaps, manipulating the
width of the GIF), or perhaps by having a set of static images, each of which represents the various rankings,
I decided to have ASP.NET render the proper image on the fly using the .NET Framework's
System.Drawing classes. While it would be more efficient to just use a single GIF, I chose
this approach to learn more about rendering images on the fly with ASP.NET.
Drawing the Image in ASP.NET
To dynamically render the image I create an instance of the
Bitmapclass and pass it the constants
MaxHeight, like so:
Then I need to create an instance of the
Graphics class based on the
class I just created:
For more information regarding the
Graphics classes see the
ASP.NET: Tips, Tutorials, and Code
Since I want my image to be green with a silver background I will set up brushes for each color.
Instead of using a constant green from the color pallatte I wanted to be sure to match my site's
color exactly so, I use the
FromArgb method of the
To use this method you must supply the RGB colors in numeric format for each color channel. According
to the Photoshop Color Picker the green I use for my site is Red 88, Green 128, and Blue 86; therefore,
I specified the green brush like so:
The silver is a little easier becauses it uses a named constant from the
Color Members. Therefore, I create the silver brush like so:
I start by filling the entire rectangle using the
FillRectangle method of the
Graphics class. This method's parameters are: brush, starting X pixel, starting Y pixel,
length to draw, height to draw. Because I want to fill the entire image with silver (this way when
I apply a length of green that represents the rating the remaining image will still be silver) I
use the following:
Next, I draw the rating representation into the silver rectangle. I starting at a y position of 2 and
filling to a width of MaxImageHeight - 4. This will leave the underlying silver showing and simulate
a 2 pixel border on the top and bottom of the image.
Remember the variable
Rating is set to an integer between 1 and 168. I will use it as
the length parameter of the
I apply the scale by drawing a 2 pixel wide gray stripe the entire height of the image at six different points. The first and last stripes are to apply the 2 pixel border.
I'm all done drawing now all I have to do is send the image to the browser. This is done by specifying
the content type of the page's response (set it to
image/jpeg, since we're creating a JPEG
image) and then write the binary content of the rendered image to the Response object's
and do a little cleanup:
At this point we have a page that allows the user to rate the photo and a page to dynamically generate an image displaying the ranking. All that we need now is a user control that we can plug into each page where a photo is displayed that shows the ranking for a given image. We'll look at how to build this user control in Part 4.