How to save images in a website Folder and display it in Gridview control

By
Hi friend, Here i will show you "How to save image in a website's Folder and display it in gridview control". If you working on any project then you will need to display the images in gridview control.Today ,I will show you, how to display an image in gridview control easily. You just learn the concepts and use it in your projects. Here any user can upload your image from your system (computer) and save it on your website folder (eg. msdotnet_images) but the Image size should be less than equal to 50 KB. If you will upload image size more than 50 KB  then it will show an error message on the web page. Here all the images  name  and  path will be stored in sql server database (eg. Database.mdf) separately  .You can easily show the images in Grid view control with the help of the image path stored in database. In our previous tutorials ,i have already performed some operations in Gridview, DataList and Repeater controls .You can learn lots of concepts from the below links.

Here i have used Exception  handling   concepts also in this application.You already know the benefits of exception handling.If any problem in Exception handling ,you can ask me. This is very important concepts in asp.net . You can use this application concepts some other places also like:
  • How to create image gallery in asp.net application.
  • How to use folder image in your dynamic web page.  
You can follow below link if you want to make a form filling application in asp.net.
There are some  steps to implement this concepts in your asp.net application as given below:-
Step 1 :-  First open your visual studio --> File --> New --> Website --> Select ASP.NET Empty website -->OK --> Open Solution Explorer --> Add a new web form (default.aspx)-->  > Drag and Drop Lable , FileUpload ,SqlDataSource ,Gridview and Button controls on the page from toolbox as show below:-
web form

Step 2 :-  Now add Database.mdf file on your website -->Create  a table (student) with following column(image_id,image_name,image_path) as shown below:- 


student
Note:- If you are facing problems to add .mdf database file on website then follow below links:-
Step 3 :- Create a New Folder (msdotnet_images) in your Solution Explorer as shown below:-
folder

Step 4 :- Now Configure your SqlDataSource's settings -->Now select Database.mdf  --> and proceed with Next Button as shown below:- 



Note:- If you don't want to configure SqlDatasource then add following connection string codes in web.config file manually.But when you will configure it then this codes will be inserted automatically in web.config file. 

<connectionStrings> <add name="image_ConnectionString" connectionString="Data Source=.;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True"    providerName="System.Data.SqlClient" />  </connectionStrings>

 Step 5 :- Now Write the  C# codes on button clicks as given below:-

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["image_ConnectionString"].ConnectionString);
        con.Open();
        try
        {
            // get file name
            string file_name = Path.GetFileName(FileUpload1.PostedFile.FileName);
            //Check whether image size 51200 byte or 50 kb  
            long size_img = FileUpload1.PostedFile.InputStream.Length;
            if (size_img <= 51200)
            {
                //save the images in msdotnet_images path folder
                FileUpload1.SaveAs(Server.MapPath("msdotnet_images/" + file_name));
                Label1.Text = "Image successfully added in msdotnet_images folder";
                // Now Save the file name and image path in sql database 
           SqlCommand cmd = new SqlCommand("insert into student values(@name,@path)", con);
                cmd.Parameters.AddWithValue("name", file_name);
                cmd.Parameters.AddWithValue("path", "msdotnet_images/" + file_name);
                cmd.ExecuteNonQuery();
                Label1.Text = "Image name and path inserted in database successfully ";
                Response.Redirect("default.aspx");
            }
            else
            {
                Label1.Text = "Please Upload image size less than equal to 50 kB ";
            }       
        }
        catch (Exception ex)
        {
            Label1.Text = ex.Message;
        }
        finally
        {
            con.Close();
        }    
    }
}

Step 6 :- Now Bind the Sql database values with Gridview control --> open the Source code and write the following c# codes for Grid view as given below:-

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataSourceID="SqlDataSource1" Width="340px" Height="178px">
        <Columns>
       <asp:BoundField DataField="image_id" HeaderText="ID" />
      <asp:BoundField DataField="image_name" HeaderText="ImageName" />
      <asp:ImageField HeaderText="Image" DataImageUrlField="image_path" />
      </Columns>
 </asp:GridView>

Step 7 :- Now Run the application (press F5) --> Now Browse the image from system --> Press Save image in Folder Button --> You will see the following output:-


output file

Step 8 :- If you want to upload more than 50 KB image then this application will show following error message on the screen as shown below:-



Step 9 :- Now open Solution Explorer --> open Database.mdf file --> then you will see following output as shown below:-


database


Step 10 :- Now open msdotnet_images folder --> then you will see ,images inserted in folder as shown below:-
images

 For More...
  1. How to manage layout control in WPF application
  2. How to add role based security using website Administration tool easily
  3. How to save and display image in image control from database
  4. Real concepts of wpf
  5. How to make a calculator application and install it on your window and use it
  6. Page life cycle concepts in asp.net with real example
  7. How to use wcf services in asp.net application
  8. How to implement form based authentication concepts in asp.net
  9. How to implement transaction concepts on asp.net using ado.net
  10. How to learn data mining concepts in asp.net
  11. How to create setup file with database
  12. How to generate an unique number and stored in database
Download whole attached file
  Download

3 comments:

  1. And how can I create a gallery that shows images on webpage ?

    ReplyDelete
  2. And how can I create a gallery that shows images on webpage ?

    ReplyDelete
    Replies
    1. yes ,you can create photo gallery..Read below link...
      http://www.msdotnet.co.in/2016/02/how-to-upload-images-using-ajax.html

      Delete

Powered by Blogger.