To read the article online, visit http://www.4GuysFromRolla.com/articles/050602-1.4.aspx

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:

    <%@ 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)
      Get_Rating()
    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()
      Try
    
        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
        myCommand.Parameters.Add(parameterPhoto_ID)
    
        Dim parameterRating As New SqlParameter("@Rating", SqlDbType.Float, 8)
        parameterRating.Direction = ParameterDirection.Output
        myCommand.Parameters.Add(parameterRating)
      
        myConnection.Open()
        myCommand.ExecuteNonQuery()
        myConnection.Close()
        
        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" />
    </div>
    

    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)
      Rate_Form.Visible=True
      Rate_This_Photo_Button.Visible=False
    End Sub
    
    <asp:Linkbutton text="Rate this muggle photo" id="Rate_This_Photo_Button" 
                    OnClick="Show_Rate_Article" runat="server" />
    

    Conclusion


    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


    Attachments


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

  • Article Information
    Article Title: ASP.NET.An ASP.NET Rating System
    Article Author: Paul Apostolos
    Published Date: May 6, 2002
    Article URL: http://www.4GuysFromRolla.com/articles/050602-1.4.aspx


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers