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

An ASP.NET Rating System

By Paul Apostolos


  • Read Part 1
  • Read Part 2

  • 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 Bitmap class and pass it the constants MaxImageLength and MaxHeight, like so:

      Dim objBitmap as Bitmap = new Bitmap(MaxImageLength, MaxImageHeight)

    Then I need to create an instance of the Graphics class based on the Bitmap class I just created:

      Dim objGraphics as Graphics = Graphics.FromImage(objBitmap)

    For more information regarding the Bitmap and Graphics classes see the ASP.NET: Tips, Tutorials, and Code sample chapter.

    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 Color Object. 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:

      Dim objBrushGreen as SolidBrush = new SolidBrush( Color.FromArgb( 88, 128, 86 ))

    The silver is a little easier becauses it uses a named constant from the System.Drawing Color Members. Therefore, I create the silver brush like so:

      Dim objBrushGray as SolidBrush = new SolidBrush(Color.Silver)

    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:

      objGraphics.FillRectangle(objBrushGray, 0, 0, MaxImageLength, MaxImageHeight)

    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 FillRectangle method.

      objGraphics.FillRectangle(objBrushGreen, 0, 2, Rating , MaxImageHeight - 4)

    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.

      objGraphics.FillRectangle(objBrushGray, 0, 0, 2 , MaxImageHeight)
      objGraphics.FillRectangle(objBrushGray, 32, 0, 2 , MaxImageHeight)
      objGraphics.FillRectangle(objBrushGray, 65, 0, 2 , MaxImageHeight)
      objGraphics.FillRectangle(objBrushGray, 99, 0, 2 , MaxImageHeight)
      objGraphics.FillRectangle(objBrushGray, 132, 0, 2 , MaxImageHeight)
      objGraphics.FillRectangle(objBrushGray, 166, 0, 2 , MaxImageHeight)
    

    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 OuputStream and do a little cleanup:

      'Set the response.contentytpe to image and send the image to the browser
      Response.ContentType = "image/jpeg"
      objBitmap.Save(Response.Outputstream, ImageFormat.JPEG)
      
      objBitmap.Dispose()
      objGraphics.Dispose()
    

    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.

  • Read Part 4!

  • 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.3.aspx


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