In this article you will learn the following things:
- File Uploading
- Dynamically handle button for SAVE (new record) and UPDATE (changes) saved data to the database.
- Image display from image path from the database.
Note: Image not saved in table and image path store only table.
- Create an ASP.NET Empty Web Site and give name FileUpload.
![Asp.NET Empty website]()
- Right click on solution bar.
![Add new item]()
- Add a new Web Form.
![Web form]()
- Right click on Solution explorer and click New Folder option. Give name FRIENDIMAGES.
![add new folder]()
We will store all images inside FRIENDIMAGES.
- Now switch back to DEFAULT.ASPX page, drag and drop HTML TABLE from TOOL BOX.
Note: HTML tool box of controls located at bottom of toolbox.
Add the following controls as per charts.
| Control Type | Control ID | Description |
| Label | lblFriend | To display MemberID |
| TextBox | txtName | To enter member name. |
| Image | imgFriend | Friend Image to display. |
| File Upload | fuFriendImage | Friend Image File Upload. |
| TextBox | txtPlace | To enter place. |
| TextBox | txtMobile | To enter mobile. |
| Button | btnSubmit | Button to submit data. |
| GridView | gvMember | Gridview to display data.
Set following settings from properties:
AutoGenerateSelectButton="True" Width="100%" |
Drag and drop above mentioned controls from TOOLBOX after html table.
- Add the following namespace in DEFAULT.ASPX.CS.
- using System.Data;
- using System.Data.SqlClient;
- using System.Configuration;
- using System.IO;
Using System.Data.SqlClient: This namespace to access SQL Server database.
Using System.Configuration: To fetch connection string from web.config.
Using System.IO: To work with file and folders.
- Table structure of tblFriends.
- CREATE TABLE [dbo].[tblFriends](
- [FriendID] [int] IDENTITY(1,1)NOT NULL,
- [FriendName] [varchar](50)NULL,
- [FriendImage] [varchar](500)NULL,
- [Place] [varchar](500)NULL,
- [Mobile] [varchar](20)NULL
- )ON [PRIMARY]
-
- GO
- ASPX code,
DEFAULT.ASPX
- C# Code - Code Behind
DEFAULT.ASPX.CS
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Data;
- using System.Data.SqlClient;
- using System.Configuration;
- using System.IO;
-
- public partial class _Default : System.Web.UI.Page
- {
-
- string ConStr = ConfigurationManager.ConnectionStrings["MemberCDACConnectionString"].ConnectionString;
-
- protected void Page_Load(object sender, EventArgs e)
- {
-
- if (!IsPostBack)
- {
- BindGridView();
- }
-
- }
-
-
-
-
-
-
- protected void btnSave_Click(object sender, EventArgs e)
- {
-
- if (btnSave.Text.ToLower() == "save")
- {
-
-
- if (fuFriendImage.HasFile)
- {
-
- string FileName = Path.GetFileName(fuFriendImage.PostedFile.FileName);
-
-
-
-
- fuFriendImage.SaveAs(Server.MapPath("FriendImages/" + FileName));
-
-
-
- SqlConnection con = new SqlConnection(ConStr);
- con.Open();
- SqlCommand cmd = new SqlCommand("Insert into tblFriends (FriendName,FriendImage,Place,Mobile) Values(@FriendName,@FriendImage,@Place,@Mobile)", con);
- cmd.Parameters.AddWithValue("@FriendName", txtName.Text);
- cmd.Parameters.AddWithValue("@FriendImage", "Friendimages/"+FileName);
- cmd.Parameters.AddWithValue("@Place", txtPlace.Text);
- cmd.Parameters.AddWithValue("@Mobile", txtMobile.Text);
- cmd.ExecuteNonQuery();
- BindGridView();
- }
- else
- {
- Response.Write("<script>alert('Please, select image file.')</script>");
- }
- }
-
-
- if (btnSave.Text.ToLower() == "update")
- {
-
-
- if (fuFriendImage.HasFile)
- {
-
- string FileName = Path.GetFileName(fuFriendImage.PostedFile.FileName);
-
-
-
-
- fuFriendImage.SaveAs(Server.MapPath("FriendImages/" + FileName));
-
-
-
- SqlConnection con = new SqlConnection(ConStr);
- con.Open();
- SqlCommand cmd = new SqlCommand("update tblFriends set FriendName =@FriendName ,FriendImage = @FriendImage,Place = @Place ,Mobile =@Mobile where FriendID = "+Convert.ToInt16(lblMemberID.Text), con);
- cmd.Parameters.AddWithValue("@FriendName", txtName.Text);
- cmd.Parameters.AddWithValue("@FriendImage", "Friendimages/" + FileName);
- cmd.Parameters.AddWithValue("@Place", txtPlace.Text);
- cmd.Parameters.AddWithValue("@Mobile", txtMobile.Text);
- cmd.ExecuteNonQuery();
-
- btnSave.Text = "Save";
- BindGridView();
- }
- else
- {
- Response.Write("<script>alert('Please, select image file.')</script>");
- }
- }
-
-
-
- }
-
-
-
-
-
- public void BindGridView()
- {
-
- SqlConnection con = new SqlConnection(ConStr);
- SqlDataAdapter da = new SqlDataAdapter("Select * From tblFriends", ConStr);
- DataSet ds = new DataSet();
- da.Fill(ds, "FriendTable");
- gvFriend.DataSource = ds;
- gvFriend.DataBind();
- clearTextBox();
- }
-
- protected void gvFriend_SelectedIndexChanged(object sender, EventArgs e)
- {
-
- lblMemberID.Text = gvFriend.SelectedRow.Cells[1].Text;
-
-
- txtName.Text = (gvFriend.SelectedRow.FindControl("lblFriendName") as Label).Text;
- imgFriend.ImageUrl = (gvFriend.SelectedRow.FindControl("imgFrnd") as Image).ImageUrl;
- txtPlace.Text = (gvFriend.SelectedRow.FindControl("lblPlace") as Label).Text;
- txtMobile.Text = (gvFriend.SelectedRow.FindControl("lblMobile") as Label).Text;
- btnSave.Text = "Update";
-
- }
-
- protected void clearTextBox()
- {
- lblMemberID.Text = "[Member ID]";
- txtMobile.Text = string.Empty;
- txtName.Text = string.Empty;
- txtPlace.Text = string.Empty;
- imgFriend.ImageUrl = string.Empty;
-
- }
-
- }
- Our FileUpload Module User Interface (UI)
![Friend Detail]()
- Update state of application: When you select row of gridview it willchange caption of button as UPDATE otherwise button caption will SAVE.
![Update state]()
Please feel free to ask any question related to this article.