Storing Form Values & Images Path in Database & Images in ASP.Net Application Folder

Employee Registration From

Upload EmployeeImage, image Name, Image Path save in database table and image save in project Image folder.


We need employee information as like photoid, name, contact and so on for some registration or application from.

Here create one Employee Registration Page.

Fill in this registration form with the employee details like name, contact, email, city, employee image and so on. Save that in a database and when we need any employee information we can get it from the database and also the image is saved in the project folder and it's path is saved in the database.

First create an Employee Registration Table in your SQL database.

Step 1

Database Side

  1. Create Table EmpRegistration  
  2. (  
  3.    EmpId int identity(1,1) primary key,  
  4.    EmpName varchar(50),  
  5.    EmpContact nchar(15),  
  6.    EmpEmail nvarchar(50),  
  7.    EmpCity varchar(30),  
  8.    EmpImgName nvarchar(50),  
  9.    EmpImgPath nvarchar(500)  
  10. )  
Now create a procedure for storing the employee information in the database.

Create an insert procedure for the EmpRegistration data as in the following:
  1. create procedure sp_EmpRegistration  
  2. @EmpName varchar(50),  
  3. @EmpContact nchar(15),  
  4. @EmpEmail nvarchar(50),  
  5. @EmpCity varchar(30),  
  6. @EmpImgName nvarchar(50),  
  7. @EmpImgPath nvarchar(500)  
  8. as   
  9. begin  
  10. set nocount on;  
  11. insert into EmpRegistration   
  12. (EmpName,EmpContact,EmpEmail,EmpCity,EmpImgName,EmpImgPath)  
  13. values  
  14. (@EmpName,@EmpContact,@EmpEmail,@EmpCity,@EmpImgName,@EmpImgPath)  
  15. End  
Step 2

Now move to the page design and page code sides.

First create one folder for uploading the employee image saved in the project Solution Explorer.

empimage

Step 3

Page Design Side

Now go to the Page Design side and rovide the following design code.
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true"   
  2. CodeBehind="EmpRegistrationwithImage.aspx.cs" Inherits="Test_WebApplication.BlogWork.EmpRegistrationwithImage" %>  
  3. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">  
  4. </asp:Content>  
  5. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
  6. <div>  
  7.     <h1>Employee Infromation Submit with Employee Images</h1>  
  8.     <asp:Table runat="server" >  
  9.         <asp:TableRow>  
  10.             <asp:TableCell>Employee Name </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtName"></asp:TextBox></asp:TableCell>  
  11.         </asp:TableRow>  
  12.          <asp:TableRow>  
  13.             <asp:TableCell>Employee Contact </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtcontact"></asp:TextBox></asp:TableCell>  
  14.         </asp:TableRow>  
  15.          <asp:TableRow>  
  16.             <asp:TableCell>Employee Email </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtEmail"></asp:TextBox></asp:TableCell>  
  17.         </asp:TableRow>  
  18.          <asp:TableRow>  
  19.             <asp:TableCell>Employee City </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtcity"></asp:TextBox></asp:TableCell>  
  20.         </asp:TableRow>  
  21.              <asp:TableRow>  
  22.             <asp:TableCell>Image Upload </asp:TableCell><asp:TableCell><asp:FileUpload ID="FileUpload1" runat="server"/></asp:TableCell>  
  23.         </asp:TableRow>  
  24.         <asp:TableRow>  
  25.             <asp:TableCell></asp:TableCell><asp:TableCell><asp:Button runat="server" ID="btnSave"  Text="SAVE DATA" onclick="btnSave_Click"/></asp:TableCell>  
  26.         </asp:TableRow>  
  27.     </asp:Table>  
  28. </div>  
  29. <asp:Label runat="server" ID="lblmsg"></asp:Label>  
  30. </asp:Content>  
In this design code use a fileupload control for uploading any employee images with employee information.
  1. <asp:FileUpload ID="FileUpload1" runat="server"/>  
Now run your Design Page in the browser as in the following:

solution explorer

Step 4

Page Code Side

Now provide employee information code on the submit button code event as in the following:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Configuration;  
  8. using System.Data;  
  9. using System.Data.SqlClient;  
  10. using System.IO;  
  11.   
  12. namespace Test_WebApplication.BlogWork  
  13. {  
  14.     public partial class EmpRegistrationwithImage : System.Web.UI.Page  
  15.     {  
  16.         string conString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;  
  17.         protected void Page_Load(object sender, EventArgs e)  
  18.         {  
  19.   
  20.         }  
  21.         protected void btnSave_Click(object sender, EventArgs e)  
  22.         {  
  23.             if (FileUpload1.PostedFile != null)  
  24.             {  
  25.                 try  
  26.                 {  
  27.                 string EmpImgName = Path.GetFileName(FileUpload1.PostedFile.FileName);  
  28.                              
  29.                 FileUpload1.SaveAs(Server.MapPath("/Q:/Test_WebApplication/Test_WebApplication/EmpImages/" + EmpImgName));  
  30.                               
  31.                 SqlConnection con = new SqlConnection(conString);  
  32.               
  33.                 SqlCommand cmd = new SqlCommand("sp_EmpRegistration",con);  
  34.   
  35.                 cmd.CommandType = CommandType.StoredProcedure;  
  36.                
  37.                 cmd.Parameters.AddWithValue("@EmpName",SqlDbType.VarChar).Value=txtName.Text.Trim();  
  38.                 cmd.Parameters.AddWithValue("@EmpContact",SqlDbType.NChar).Value=txtcontact.Text.Trim();  
  39.                 cmd.Parameters.AddWithValue("@EmpEmail",SqlDbType.NVarChar).Value=txtEmail.Text.Trim();  
  40.                 cmd.Parameters.AddWithValue("@EmpCity",SqlDbType.VarChar).Value=txtcity.Text.Trim();  
  41.                 cmd.Parameters.AddWithValue("@EmpImgName", EmpImgName);  
  42.                 cmd.Parameters.AddWithValue("@EmpImgPath""EmpImages/" + EmpImgName);  
  43.         
  44.                     con.Open();  
  45.                     cmd.ExecuteNonQuery();  
  46.                     con.Close();  
  47.                     con.Dispose();  
  48.   
  49.                     txtName.Text = String.Empty;  
  50.                     txtcontact.Text = String.Empty;  
  51.                     txtEmail.Text = String.Empty;  
  52.                     txtcity.Text = String.Empty;  
  53.                 }  
  54.                 catch (Exception ex)  
  55.                 {  
  56.                     Response.Write(ex.Message);  
  57.                 }  
  58.                 lblmsg.Text = "Save Employee Information";  
  59.   
  60.             }  
  61.         }  
  62.     }  
  63. }  
Now you run the registration page in the browser and and fill in all the employee information and upload the employee image with image name as in the following:

upload employee Image

Step 5

After a click choose the file button and upload an employee image file as in the following:

Employee Image file

Now see, your image is selected with image name and all the information is saved in the database table. Click the Save Data button as in the following.

data button

Now finally save the data in the database table.

database table

In this table all the data is saved with the employee image path.

Now you see the employee image in the project's Employee folder.

employee image

This is a demo example for how to save an image name and image path in a database and the image is saved in the created folder.

Up Next
    Ebook Download
    View all
    Learn
    View all