When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips

Book Reviews
Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
Web Hosts
Author an Article

Print this Page!
Published: Monday, May 6, 2002

An ASP.NET Rating System

By Paul Apostolos

  • Read Part 1
  • Read Part 2
  • Read Part 3

  • Putting it all together

    The page that shows the photos contains a user control called photo_rating.ascx. This control contains a public variable called Photo_ID which is set by the calling page. (For more information on creating and using user controls be sure to read: Building ASP.NET User Controls.) The photo_rating.ascx user control starts by declaring a couple of Import directives and then declares the public variable Photo_ID:

    - continued -

    <%@ Import Namespace = "System.Data" %>
    <%@ Import Namespace = "System.Data.SqlClient" %>
    <Script runat="server">
    'Photo_ID is public so the page that includes
    'this user control can set its value
    Public Photo_ID As Integer

    The Page_Load event handler for this control contains only a single line. This line is used to call the Get_Rating Sub:

    Sub Page_Load( Sender As Object, e As EventArgs)
    End Sub

    Get_Rating() has similar functionality to the above database code. I use it to get the textual representation of the image's rating (e.g., 4.11 out of 5). It's content is nearly identical to the code in photo_rating_image.aspx. (Notice that this means we're doing two database requests to get the same data. To boost performance you could alter the photo_rating_image.aspx file to allow a rating to be passed in via the querystring (instead of the Photo_ID, thereby only needing one database lookup.)

    This Sub also sets the src of the <img> tag to the output of the photo_rating_image.aspx file, passing it the Photo_Id through the querystring. The code for Get_Rating() (and the associated img/div tag) can be seen below:

    Sub Get_Rating()
        Dim myConnection As New SqlConnection(ConfigurationSettings.AppSettings("MyDSN"))
        Dim myCommand As New SqlCommand("sp_Muggle_PhotoRatingOutput", myConnection)
        myCommand.CommandType = CommandType.StoredProcedure
        Dim parameterPhoto_ID As New SqlParameter("@Photo_ID", SqlDbType.Int, 4)
        parameterPhoto_ID.Value = Photo_ID
        Dim parameterRating As New SqlParameter("@Rating", SqlDbType.Float, 8)
        parameterRating.Direction = ParameterDirection.Output
        Dim Rating as Double
        Rating = Left(parameterRating.Value, 4)
        RatingBar.Src = "/ssi/photo_rating_image.aspx?Photo_ID=" & Photo_ID
        MySpan.InnerHtml = Rating.ToString() & " out of 5"
        MyDiv.Visible = True      
      Catch exc As Exception
        MyDiv.Visible = False
      End Try
    End Sub
    <div id="MyDiv" align="left" style="margin-left:5px" runat="server" >
      Average user rating<br>
      <img id="RatingBar" runat="server" /> <span id="MySpan" runat="server" />

    The Try ... Catch block is used to catch any errors produced from making the database call. Most notably the Rating = Left(parameterRating.Value, 4) line of code will produce an error if a photo has no ratings in the database. So in the catch portion of the block I simply set the visible attribute of the <div> MyDiv to false. Or, more simply, if no one has rated this image no rating results will be shown.

    Because I don't want that ugly form to show up on every page I have included link that fires an event handler (Show_Rate_Article) to set the visiblity of the form to true and the visibility of the link to false.

    Sub Show_Rate_Article(sender As Object, e As EventArgs)
    End Sub
    <asp:Linkbutton text="Rate this muggle photo" id="Rate_This_Photo_Button" 
                    OnClick="Show_Rate_Article" runat="server" />


    A point to consider for a future enhancement would be to use a cookie to prohibit a user from voting for a photo more than once. As the code is written if a user comes back to a photo he will have the option of submitting another vote. (One could also use the Remote_Address field saved to limit one vote to one IP (this would obviously be restrictive in the sense that all AOL users would only be allowed one vote between them...).)

    The final product is exactly what I outlined in my planning phase — A utility that allows users of my site to rate photos, provide feedback and show a graphical representation of the photo's rating. The final code and database commands for creating the tables and stored procedures can be found here. You can view a live demo at http://www.themuggle.com/view.asp. (See an example picture with a rating at: http://www.themuggle.com/viewdetails.aspx?ID=437.)

    Happy Programming!

  • By Paul Apostolos


  • View a live demo!
  • Download the complete source code

  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article