September 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Rendering Images in ASP.NET Directly from Your Database

  • August 1, 2007
  • By Paul Kimmel
  • Send Email »
  • More Articles »

Listing 5: A .aspx page that contains a GridView and the images loaded from the database.

Imports System.Web.Compilation
Imports System.Collections.Generic

Partial Class _Default
      Inherits System.Web.UI.Page

   Protected Sub Page_Load(ByVal sender As Object, _
      ByVal e As System.EventArgs) Handles Me.Load

      If (IsPostBack) Then Return
      Dim list As List(Of ProductPhoto) = _
      Session("data") = list
      GridView1.DataSource = list

   End Sub

   Protected Function GetUrl(ByVal obj As Object) As String
      Dim o As ProductPhoto = CType(obj, ProductPhoto)
      Return String.Format("~/ProductImage.aspx?id={0}", _
   End Function

End Class

Listing 6: The HTML/ASPX that shows the GridView control and the binding statement that invokes the GetUrl method in Listing 5.

<%@ Page Language="VB" AutoEventWireup="false"
         CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Src="ImageControl.ascx" TagName="ImageControl"
             TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="" >
<head runat="server">
   <title>Untitled Page</title>
   <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server"
                    AutoGenerateColumns="False" Width="100%">
            <asp:BoundField DataField="ProductPhotoID"
                            HeaderText="ID" />
            <asp:TemplateField HeaderText="Large Photo">
                  <asp:Image ID="Image1" runat="server"
                     ImageUrl='<%# GetUrl(Container.DataItem) %>' />


Click here for a larger image.

Figure 3: The AdventureWorks2000 product photos rendered from the database.

Deriving Additional Benefits

So, now you know you can store and render images right from a database. This capability needs to be componentized (by Microsoft). An additional benefit is that, because you are rendering the database images from code, you can draw, paint, annotate, scale, rotate (or whatever you want to do to) the images because you effectively have a canvas (hDC, DC, or Graphics object, whichever term you are familiar with) to draw on.

Listing 7 demonstrates how you can scale the image, maintaining the aspect ratio by setting the largest side (height or width) to the new desired maximum size and then scaling the other dimension proportionately. Listing 8 shows how you can write on the image, supporting the idea of dynamic annotation, perhaps showing a sales price.

Page 4 of 5

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Sitemap | Contact Us

Rocket Fuel