One of my friends asks me for an example of reading image from database and showing it on web form in ASP.NET. I send him a link for such tutorial http://www.microsoft.com/germany/msdn/solve/knowhow/howto/allgemein/WieKannIchBilderInEineDatenbankSchreibenUndWiederAuslesen.mspx but it was written in German and he can not follow these steps therefore I decide to translate it to English. I don’t know if there is an English version of this tutorial, I just translate it for my friend in step by step tutorial. I only translate main idea so that you can make the example run. I do not translate word by word, I catch the concept and rewrite it according to my style. If you want to understand more details of this article, please use Google translate.
1. Create database
– Open Visual Studio 2008, create an ASP.NET Web application “ASPNET Show image from database”.
– In Solution Explorer, right click on solution, choose Add –> New Item –> Data –> SQL Server Database
– Click Yes to place database in “App_Data”. Open Server Explorer, right click on ImageDB.mdf and refresh until we have connection to it.
– In Server Explorer, on ImageDB.mdf, right click on Table and add new one “ImageTbl” with following structure
2. Add DataSet and create database connection
– In Solution Explorer, right click on solution, choose Add –> New Item –> Data –> DataSet “DataView.xsd”
– Drag and Drop table ImageTbl from Server Explorer to DataView.xsd.
3. Create GUI on Default.aspx
– Drag and drop three components from Toolbox to GUI: FileUpload, Button and Label and rename them to fuEngine, btnUpload and lblInformation
– Add handler for click event of btnUpload
if (fuEngine.HasFile) { DataViewTableAdapters.ImageTblTableAdapter adapterImg = new ASPNET_Show_image_from_database.DataViewTableAdapters.ImageTblTableAdapter(); adapterImg.Insert(fuEngine.FileName, fuEngine.PostedFile.ContentLength, fuEngine.PostedFile.ContentType, fuEngine.FileBytes); lblInformation.Text = "Image: " + fuEngine.FileName + " was uploaded successfully"; this.DataBind(); } else { lblInformation.Text = "Please choose a file"; }
4. Read image from database
– To get image from our database, we need a SQL Query. Right click on ImageTblTableAdapter from DataView.xsd, choose Add –> New Query and choose options as suggested in images below
– In Solution Explorer, right click on solution, choose Add –> New Item –> new WebForm “ShowImage.aspx”.
– On code side of “ShowImage.aspx” add code for Page_Load event. This page works no more than a HTML page which gives image back in format of HTTP-Stream.
protected void Page_Load(object sender, EventArgs e) { int nImageId; Response.Clear(); if ( !int.TryParse(Request.QueryString["imageid"], out nImageId)) { Response.End(); return; } else { DataViewTableAdapters.ImageTblTableAdapter adapterImg = new ASPNET_Show_image_from_database.DataViewTableAdapters.ImageTblTableAdapter(); DataView.ImageTblDataTable dtImage = adapterImg.GetDataBy(nImageId); if (dtImage.Rows.Count != 1) { Response.End(); return; } else { Response.ContentType = dtImage[0].ImageContentType; Response.BinaryWrite(dtImage[0].ImageData); Response.End(); } } }
5. Show image on page
– Add new WebForm “ShowAllImages.aspx”, on Designer, drag and drop ObjectDataSource control into ShowAllImages.aspx and configure it as following- Add a DataList control to ShowAllImages.aspx, add DataSource to it and press Edit Templates. Add Image control at the end of DataList and edit its DataBindings
– Add a hyperlink control on Default.aspx called “Show All Images” and navigate it to ShowAllImages.aspx.
6. Test our application
– Run our web application and upload some images through our Default.aspx
– Get image back by tipping ShowImage.aspx?imageid=1 to test.
– Click on Show All Images hyperlink to see all available images.
The complete source code you can download here “ASPNET Show image from database”