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

Create Table EmpRegistration
(
   EmpId int identity(1,1) primary key,
   EmpName varchar(50),
   EmpContact nchar(15),
   EmpEmail nvarchar(50),
   EmpCity varchar(30),
   EmpImgName nvarchar(50),
   EmpImgPath nvarchar(500)
)

Now create a procedure for storing the employee information in the database.

Create an insert procedure for the EmpRegistration data as in the following:

create procedure sp_EmpRegistration
@EmpName varchar(50),
@EmpContact nchar(15),
@EmpEmail nvarchar(50),
@EmpCity varchar(30),
@EmpImgName nvarchar(50),
@EmpImgPath nvarchar(500)
as
begin
set nocount on;
insert into EmpRegistration
(EmpName,EmpContact,EmpEmail,EmpCity,EmpImgName,EmpImgPath)
values
(@EmpName,@EmpContact,@EmpEmail,@EmpCity,@EmpImgName,@EmpImgPath)
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.



Step 3

Page Design Side

Now go to the Page Design side and rovide the following design code.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true"
CodeBehind="EmpRegistrationwithImage.aspx.cs" Inherits="Test_WebApplication.BlogWork.EmpRegistrationwithImage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
    <h1>Employee Infromation Submit with Employee Images</h1>
    <asp:Table runat="server" >
        <asp:TableRow>
            <asp:TableCell>Employee Name </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtName"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
         <asp:TableRow>
            <asp:TableCell>Employee Contact </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtcontact"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
         <asp:TableRow>
            <asp:TableCell>Employee Email </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtEmail"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
         <asp:TableRow>
            <asp:TableCell>Employee City </asp:TableCell><asp:TableCell><asp:TextBox runat="server" ID="txtcity"></asp:TextBox></asp:TableCell>
        </asp:TableRow>
             <asp:TableRow>
            <asp:TableCell>Image Upload </asp:TableCell><asp:TableCell><asp:FileUpload ID="FileUpload1" runat="server"/></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell></asp:TableCell><asp:TableCell><asp:Button runat="server" ID="btnSave"  Text="SAVE DATA" onclick="btnSave_Click"/></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</div>
<asp:Label runat="server" ID="lblmsg"></asp:Label>
</asp:Content>

In this design code use a fileupload control for uploading any employee images with employee information.

<asp:FileUpload ID="FileUpload1" runat="server"/>

Now run your Design Page in the browser as in the following:



Step 4

Page Code Side

Now provide employee information code on the submit button code event as in the following:

using System;
using System.Collections.Generic;
using System.Linq;
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;

namespace Test_WebApplication.BlogWork
{
    public partial class EmpRegistrationwithImage : System.Web.UI.Page
    {
        string conString = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void btnSave_Click(object sender, EventArgs e)
        {
            if (FileUpload1.PostedFile != null)
            {
                try
                {
                string EmpImgName = Path.GetFileName(FileUpload1.PostedFile.FileName);

                FileUpload1.SaveAs(Server.MapPath("/Q:/Test_WebApplication/Test_WebApplication/EmpImages/" + EmpImgName));

                SqlConnection con = new SqlConnection(conString);

                SqlCommand cmd = new SqlCommand("sp_EmpRegistration",con);

                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@EmpName",SqlDbType.VarChar).Value=txtName.Text.Trim();
                cmd.Parameters.AddWithValue("@EmpContact",SqlDbType.NChar).Value=txtcontact.Text.Trim();
                cmd.Parameters.AddWithValue("@EmpEmail",SqlDbType.NVarChar).Value=txtEmail.Text.Trim();
                cmd.Parameters.AddWithValue("@EmpCity",SqlDbType.VarChar).Value=txtcity.Text.Trim();
                cmd.Parameters.AddWithValue("@EmpImgName", EmpImgName);
                cmd.Parameters.AddWithValue("@EmpImgPath", "EmpImages/" + EmpImgName);

                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                    con.Dispose();

                    txtName.Text = String.Empty;
                    txtcontact.Text = String.Empty;
                    txtEmail.Text = String.Empty;
                    txtcity.Text = String.Empty;
                }
                catch (Exception ex)
                {
                    Response.Write(ex.Message);
                }
                lblmsg.Text = "Save Employee Information";

            }
        }
    }
}

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:



Step 5

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



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.



Now finally save the data in the 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.



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.