Post
Ask Question

Image Gallery Using Fileupload Control and DataList in ASP.Net

This article explains how to create an image gallery in ASP.NET using the FileUpload control and a DataList.

I have designed the form and added the following two controls:

  1. Fileupload control: control to upload the image file to a folder and the information is saved into a SQL Server database table.
  2. DataList: to display the image in a repeating column row.

The following is the step-by-step procedure to create an Image Gallery in ASP.NET C# using a FileUpload control and a DataList.

Step 1: Create a table in your database as below:

table

The Image id is the identity column.

Step 2: Design the form as follows:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageGallery.aspx.cs" Inherits="Image_Library.ImageGallery" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6. </head>  
  7. <body>  
  8.     <form id="form1" runat="server">  
  9.     <div>  
  10.         <table>  
  11.             <tr>  
  12.                 <td colspan="3">  
  13.                     <h2>  
  14.                         Image Gallery</h2>  
  15.                 </td>  
  16.             </tr>  
  17.             <tr>  
  18.                 <td>  
  19.                     Upload Image  
  20.                 </td>  
  21.                 <td>  
  22.                     <asp:FileUpload ID="imgFileUpload" runat="server" />  
  23.                 </td>  
  24.                 <td>  
  25.                     <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />  
  26.                 </td>  
  27.             </tr>  
  28.         </table>  
  29.     </div>  
  30.     <div id="divImageList" runat="server">  
  31.         <asp:DataList ID="dtListImageGallery" runat="server" RepeatColumns="3" RepeatDirection="Horizontal"  
  32.             Width="50%" BorderColor="#336699" BorderStyle="Solid" BorderWidth="2px">  
  33.             <ItemTemplate>  
  34.                 <asp:Label ID="Label1" runat="server" Text='<%# Eval("ImageName") %>' Font-Bold="True"  
  35.                     Font-Size="10pt" ForeColor="#336699" Width="100%" />  
  36.                 <br />  
  37.                 <asp:Image Width="100" ID="imgGallery" ImageUrl='<%# Bind("ImagePath", "~/ImageGallery/{0}") %>'  
  38.                     runat="server" />  
  39.             </ItemTemplate>  
  40.             <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" />  
  41.         </asp:DataList>  
  42.     </div>  
  43.     </form>  
  44. </body>  
  45. </html> 

Step 3: Add the following code on the click of the button.

  1. SqlConnection conn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=LMS;Integrated Security=True");  
  2. if (imgFileUpload.PostedFile != null)  
  3. {  
  4.         string imagename = Path.GetFileName(imgFileUpload.PostedFile.FileName);  
  5.         imagename = imagename.Split('.')[0].ToString();  
  6.         string pathname;  
  7.         pathname = Server.MapPath("~\\ImageGallery\\") + DateTime.Now.ToString("ddMMyyhhmmsstt") + imgFileUpload.FileName;  
  8.         imgFileUpload.PostedFile.SaveAs(pathname);  
  9.         try  
  10.         {  
  11.             conn.Open();  
  12.             string insquery = "Insert into MyImageGallery(ImageName,ImagePath) values('" + imagename + "','"+DateTime.Now.ToString("ddMMyyhhmmsstt") + imgFileUpload.FileName.ToString() + "')";  
  13.             SqlCommand cmd = new SqlCommand(insquery, conn);  
  14.             cmd.ExecuteNonQuery();  
  15.             conn.Close();  
  16.             BindDataList();  
  17.         }  
  18.         catch (Exception ex)  
  19.         {  
  20.             Response.Write(ex.Message);  
  21.         }  
  22. } 

Step 4: Call a method BindDataList on page load and write the following code inside the method:

  1. private void BindDataList()  
  2. {  
  3.     SqlConnection conn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=LMS;Integrated Security=True");  
  4.     conn.Open();  
  5.     sqlda = new SqlDataAdapter("SELECT * FROM MyImageGallery", conn);  
  6.     dt = new DataTable();  
  7.     sqlda.Fill(dt);  
  8.     sqlda.Dispose();  
  9.     dtListImageGallery.DataSource = dt;  
  10.     dtListImageGallery.DataBind();  
  11.     conn.Close();  
  12. } 

Step 5: Run the application, the Image gallery will be shown as below:

Run

Conclusion

In this article, I explained how to design and develop the image gallery in ASP.NET C#.


Similar Articles