In this article I will explain how to insert images
into our project folder and display the images in gridview using asp.net.
In this article I
will explain how to insert images into our project solution folder and insert
images path into database and display images in GridView from images folder
based on Images path in database. Finally, How to insert images
into our project folder and display the images in gridview using asp.net? For that first create new website
after that right click on your website and add new folder and give name as images
because here I used same name for my sample if you want to change folder
name you need to change the images folder name in your code behind also first
design table in your database like this to save images path in database.
Below is the DataBase design screen(Table Design).
First you need to
establish a DataBase connection in web.config file
<connectionStrings>
<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial Catalog=practice"/>
</connectionStrings>
After that you need
to design aspx page. Below is the sample code for Page design.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Save Images In Folder and Display Images in Gridview</title>
<style type="text/css">
.gvColours {
font-family: Arial;
font-size: 10pt;
font-weight: normal;
color: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center" style="font-size:x-large"> Student Information </div>
<div>
Student Name :
<asp:TextBox ID="txtName" runat="server" />
<br /><br />
</div>
<div>
Student Image :
<asp:FileUpload ID="fuStudentImages" runat="server" />
<br />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</div>
<br />
<div>
<asp:GridView runat="server" ID="gvImages" AutoGenerateColumns="false"
CssClass="gvColours" HeaderStyle-BackColor="Maroon">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-ForeColor="Black"/>
<asp:BoundField DataField="StudentName" HeaderText="Student Name" ItemStyle-ForeColor="Black"/>
<asp:ImageField DataImageUrlField="StudentImage" HeaderText="StudentImage"/>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Below is the design
screen.
After that we need
to write code for to insert images into our project solution folder and insert
images path into database and display images in GridView from images folder
based on Images path in database
Add below NameSpaces
using
System;
using
System.Configuration;
using
System.Data;
using
System.Data.SqlClient;
using
System.IO;
public partial class _Default :
System.Web.UI.Page
{
// Establish a connection string
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BingImage();
}
}
// load images and bind data to GridView
public void BingImage()
{
SqlCommand
cmd = new SqlCommand("select * from StudenInfo", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds
= new DataSet();
da.Fill(ds);
gvImages.DataSource = ds.Tables[0];
gvImages.DataBind();
}
protected void btnSave_Click(object sender, EventArgs e)
{
string
StudentName = txtName.Text;
//Get Filename from fileupload control
string
filename = Path.GetFileName(fuStudentImages.PostedFile.FileName);
//Save images into Images folder
fuStudentImages.SaveAs(Server.MapPath("Images/" + filename));
//Getting dbconnection from web.config connectionstring
//Open the database connection
con.Open();
//Query to insert images path and name into database
SqlCommand
cmd = new SqlCommand("Insert into
StudenInfo(StudentName,StudentImage) values(@StudentName,@StudentImage)", con);
//Passing parameters to query
cmd.Parameters.AddWithValue("@StudentName", StudentName);
cmd.Parameters.AddWithValue("@StudentImage", "Images/" + filename);
cmd.ExecuteNonQuery();
//Close dbconnection
con.Close();
BingImage();
}
}
Output:
No comments:
Post a Comment