Upload Image Save in Database and show in Gridview

Inroduction: 

In this article i will tell you how you can sav image in your solution folder , get its path and save in database and also how you show that image with other data in grid view .i hope you will like this article.

Step 1 : open visual studio.

 

Step 2 : Click on file menu then select New option then click on project .It will open new popup window.

 

Step 3 : In this step you will get a popup window where you need to select your project template . Here we are create our project in asp.net so first search asp.net in search bar , it will give you some result like asp.net core application , asp.net web application (.Net framework), asp.net web site (razor) etc , select ASP.Net Web Application(.Net Framework) and click on Next button.

 

Step 4 : After click on next button you get new popup window where you need to enter following details.

• Project Name : in this field you need to enter your project name.
• Location : select your path / folder location from your local computer where you want to save your project .
• Solution Name: give your solution name , this name show in solution explorer after your project open in visual studio.
• Framework : select version of .Net Framework. now click on Create button

 

Step 5 : in next step you will get pop window with various type of template . In this window there are following templates.

• Empty : An empty project template for creating ASP.Net application. This template does not have any content in it.
• Web Forms : A project template for creating ASP.Net web forms application.ASP.Net web for lets you build dynamic webiste using a familiar drag and drop , event-driven model .A design surface and hudreads of controls and components let you rapidly build sophisticated , powerful UI-driven site with data access.
• MVC : A project template for creating AP.NET MVC application. ASP.NET MVC allows you to buils applications using the model-view-controller architecture.ASP.NET MVC includes many feature that enable fast , test-driven development for creating applications that user the latest standards.
• WEB API : A project template for creating RESTful HTTP service that can reach of clients including browser and mobile device.
• Single Page Application : A project template for creating rich client side javascript driven HTMPL5 application using ASP.NET web API. Single page application provide a rich user experience which includes client-side interaction using HTML5 CSS3 and JavaScript.

Now click on Create button.Now your project is created and it will open in visual studio.Your project is created successfully now first of all we need to add database to our project for storing our data. In ASP.Net website we add database file in our project folder and also we can user database from SQL Server Management Studio . But in this article we will use first one.

Step 6 : For add database in your project right click on project name then click on Add option and then Click on New Item . You can also use short cut key for add new item Ctrl+Shift+A.

Step 7 : After click on New Item , you will get new popup window . In This window select Data from side bar then you will show only item which use as a data , from that options select SQL Server Database . Give your database name and click on Add button.

After click on Add button you will see a warning pop up which tell you that "You are attempting to add a special file type to an ASP.Net Web site . in General , to use this type of item in your site, you should place item in the App_Data folder". If you click on ok it will create a new folder App_Data in your project and save database file in that folder and if you click on No button it will save database file in main directory of your project.

Step 8 : Now we need to add new table in our database .For add new table double click on database file from your solution explorer , it will open your database in server explorer . Expand your database > Right click on Table folder > Click on Add New Table Option.

Step 9 : Now you see a design and query layout for add table in your data base create table with fields as you need . Here i create table with following feilds

• Id : with int datatype and auto increment of 1
• ImageName : with varchar datatype for store image name
• ImagePath : with varchar datatype for store path of image

Step 10 : After create table now we need to use that database in our project so first of all wee need to add connection string in web.config file so we can easily access that connection string in all over our project. for add connection string right click on Database name then click in Modify Connection option.

 

Step 11 : now you get one popup where you see your database location ,data source and authentication options . Click on advance button . it will open other window.

 

Step 12 : in this window copy data source path and click on Ok button then this window close and you see previous window click ok ok button there also.

 

Step 13 : Now we successfully create our database now we need to add web page in our project . We select empty template for our website so there is no web page in our project .For add new web form in our project Right click on pro name > Click on Add option and then click On New item . you can also use short cut key Ctrl+Shift+A for add new item.

 

Step 14 : Select web option from left side bar then it show option only according to web, select Web Form and give appropriate name and click on Add button.

 

Step 15 : Now create design for image uploader as you need.

 

Step 16: in this article for show data in grid view we will user SqlDataSource component . Add SqldataSource from toolbox in your web form and then click on arrow button and click on configure data source option.it will open popup window. we need to add data source form SQLDataSource Component .

 

Step 17 : In popup window there is first step to select database from dropdown list which you want to use in your project.Then click on Next button.

 

Step 18 : In next step you asked for add connection string in web.config file if you check this , it will add new connection string in web.config file . We already add connection string in config file so we click on next button without checked that box.

 

Step 19 : In next step you perform some steps like

• Select your table
• select colums which you want to use , you can only check * if you want all columns.
• you can also user where and order by clause .
• now click on Next button.

 

Step 20 : in this final step if your table have any data you can show that preview by click on Test Query button . Now click on Finish button.

 

Step 21 : Now we need to add grid view in our form . Select grid view from toolbox .

 

Step 22 : Click on arrow button and choose data source which we recently add in our page.

After select data source it show warning message that "Would you like to regenerate the Gridview column field and data key using the selected data source schema ? ". if you click on yes then it will delete all existing columns from your gridview and create new as per data source.

 

Step 23 : Now click on arrow button of grid view and click on Edit column option.It will open new popup window.

Step 24 : in this window you need to perform following task.

• Delete image field from selected fields by click on X button.
• Add TemplateField by click on add button.
• Give header text of that field.
• Click on Ok button.

 

Step 25 : Now Select Edit templates option by click on arrow button in gridview.

 

 

Step 26 : Add image from toolbox and click on edit DataBindings.

 

Step 27 : Select ImageUrl property from left side and select image path column of database table from dropdown.And click on Ok button.

 

Step 28 : Design of web page is complete.Now we need to code in back end double click anywhere on form . It will generate form load event . Replace event with following code.

 

Code Explanation :

• We define two variable of SQLConnection and SQLCommand type.if you get error in that line import System.Data.SqlClient namespace.
• Then we define string variable "cs" in that variable we get connection string from web.config file.you need to import System.Configuration namespace for user ConfigurationManager.
• In Page_Load event initialize SQLConnection variable by giving cs string variable to it.
• Then open connection By Open() Method.

 

Step 29 : Now we need to code on Button click event . Double click on your button and add following code.

 

Code Explanation :

• First of all compiler check that file uploder has any files if not then it show message in label which we define in aspx file.
• Then define some varibales like fileName for store name of file , folderPath for store folder with current solution location ,image for folder and image both path compbine and storageImage for whole path of image .
• Then compiler check if folder exist if not then it will create .
• Then we save file from fileuploder to our folder.
• Then store data in database table and show message in label.
• In last refresh grid by call DataBind method.

 

Step 30 : Now run you application and test it.

Summery : So in this article we create , save and display image in gridview. if you have any question you can ask in comments below . And you get any help from this article kindly like and share .Thank you.