An ASP.NET Rating SystemBy Paul Apostolos
In Part 1 we examined the code to get a picture's ranking into the database. Now that we have a ranking from the user we'd like to display the picture's current ranking. Before we can do this, though, we need to grab the picture's current ranking from the database. That's what we'll examine how to do in this part!
To display the image I am going to use the
srcattribute of an
<img>tag set to an
.aspxfile that will generate the image and return it directly to the browser. Alternately, I could create the image, save it to the server and set the
srcattribute to that filename. The only problem with this approach is that I'd end up with a lot of temporary image files on my Web server that would need to be deleted every so often. (For more information on dynamic image creation see this sample chapter from ASP.NET: Tips, Tutorials, and Code.)
To specify the image to display we'll create a server-side
img tag. Then, in the code
we can specify its
Src property programmatically:
In the above code I concatenate Photo_ID to the filename and querystring and then set that to the
src attribute of my image control
Let's look at the code for the file
First I will import the namespaces used in this file, open a server-side script block, and begin the
Page_Load event handler:
photo_rating_image.aspx will receive via the querystring the
it will need in order to get the specified photo's current rating and generate a graphical representation
of that rating. Therefore, in my
Page_Load event handler I need to grab the querystring
value like so:
In Part 1, when I needed to establish a database connection to write the user's vote into the database
table. Now that I wish to display the overall ranking, I need to create another database connection and
pull out the cumulative ranking. This is done in a similar fashion as before, only this time I am
sp_Muggle_PhotoRatingOutput stored procedure.
This stored procedure differs from my previous example because it returns a value via an output
SqlCommmand parameters are by default input parameters. So, I need to specify
the parameter's direction as being output. Notice it is exactly as above except I cannot assign a
value to an output parameter. Also, I must add a line to let the
SqlCommand object know
parameterRating is an output parameter. This is accomplished like so:
I can execute the
SqlCommand and retrieve the value of the output parameter by using the
following lines of code:
Now I have a variable
Rating_Output of type Double that contains the average ranking for
the photo specified by
@PhotoID. (Note that this value will be between 1.0 and 5.0.) In
order to show a graphical representation of that Rating I will need to convert it to a whole number.
First I need to set up some constants for my image.
Because of the layout of my site I want to limit image to a width of 168 pixels and a height of 15
pixels. Therefore, I should set those up to be constants.
If the largest length I would want the image is
MaxImageLength or 168, then
(Rating_Output / 5) * MaxImageLength is an expression that I can use to ensure my
graphical representation of the rating will never exceed the
MaxImageLength of 168 pixels.
Now that we have the rating for the image we'll examine how we can dynamically create a JPEG showing a graphical representation of the picture's ranking in Part 3.