Example: I am using Adventure Works as datasource. We fetch handful of products and bind them to the grid. When page is initially loaded, we retrieve products fromProduction.Product table and bind them to the grid. We display some product attributes such as Product ID, Product Number, Product Name, List Price and product’s thumbnail. When user hover his mouse on the page, we fetch the full-size image from the database and display it to the user.
Open web.config and add following entry under connection strings element
I am using SQLDataSource to load the products from database. The ConnectionString property of the SqlDataSource control specifies how to connect to the database. This property can be a hard-coded connection string or can point to a connection string in a Web.config file as shown in the code given above. TheSelectCommand property specifies the SQL statement to execute to retrieve the data.
SelectCommand="Select top 10 * from Production.Product"/>
HTTP handlers are the .NET components that implement System.Web.IHttpHandler interface. They can act as a target for the incoming HTTP requests and can be called directly by using their file name in the URL. When a request is made to the web server for an ASP.NET resource (.aspx, .asmx, ashx etc.), the worker process of the ASP.NET creates the right HttpHandler for the request which responds to the request.
If you look at the design, we are setting the URL of the image to ImageHttpHandler.ashx?ProductID=1&ViewMode=Thumbnail. The resource request will be routed to ProcessContext method of ImageHttpHandler. The ProcessRequest method is responsible for processing individual HTTP requests. In this method, you write the code that produces the output for the handler.
HTTP handlers have access to the application context. This includes the requesting user’s identity (if known), application state, and session information. In our example we are sending two values to the handler in the query string i.e. ProductID and ViewMode. ProductID would be used in the SQL query to get the photo name & binary content. ViewMode is used to figure out whether to get Thumbnail or FullSize image.
We must now register the handler in Web.config file. The verb part is just what you want it to respond to (GET, POST, etc.). Path is the file or file extension you want it to respond to and Type is – ClassName, Assembly. The way you register to the handler depends upon the IIS version you are running and its mode (classic or Integrated mode).
When the user hovers over the image, fnZoomImage function is called. In this function we have access to the imageUrl i.e. ImageHttpHandler.ashx?ProductID=1&ViewMode=Thumbnail. This productiD and ViewMode values are used by the httphandler to figure out whether to return thumbnail image or full-size image. Since we are interested in FULLSIZE image, we change the ViewMode to “Full” and will set the url of this image control. This resource request will be routed to ImageHttpHandler which will return FULLSIZE image. Finally we simply make the DIV element visible.