دراین مقاله چگونگی اضافه کردن و به روز رسانی عکس در GridVew را می آموزیم. این مقاله نشان می دهد که چگونه با استفاده از بانک اطلاعاتی می توانیم داده ای را به کنترل های GridView اضافه کنیم. همچنین رفتار رویدادهای معمول GridView را نشان می دهیم. ما رویدادهایی مانند Edit، Update و Delete را بررسی می کنیم. و در ادامه آپلود، به روز رسانی و حذف عکس در GridView را مطرح می کنیم.

طراحی اولیه

مرحله 1: Visual Studio را باز کرده و یک website خالی ایجاد کنید، سپس یک نام مناسب مانند GridViewImageUploading انتخاب کنید.

مرحله 2: در قسمت Solution Explorer وب سایت خالی ایجاد شده مشخص است و حالا می توانید تعدادی WebForm اضافه کنید.

(این عمل به این صورت انجام می گیرد: در Solution Explorer بر روی نام پروژه کلیک راست کرده و Add New Item و سپس Web Form را انتخاب کنید.)

ایجاد پایگاه داده Sql Server

 در SQL Server پایگاه داده ای با نام SchoolDB بسازید (هر نام دلخواه دیگر نیز امکان پذیر است).

مرحله 3: در پایگاه داده SchoolDB یک جدول با نام Product ایجاد کنید.

کد زیر Query مورد نظر روی این بانک می باشد.

    USE [SchoolDB]  
    GO  
      
    /****** Object:  Table [dbo].[Image_Details]    Script Date: 07.09.2015 4:34:24 PM ******/  
    SET ANSI_NULLS ON  
    GO  
      
    SET QUOTED_IDENTIFIER ON  
    GO  
      
    SET ANSI_PADDING ON  
    GO  
      
    CREATE TABLE [dbo].[Image_Details](  
        [ImageId] [int] IDENTITY(1,1) NOT NULL,  
        [ImageName] [varchar](50) NULL,  
        [Image] [nvarchar](max) NULL  
    ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
      
    GO  
      
    SET ANSI_PADDING OFF  
    GO  

ساختار جدول Product به صورت زیر است:

بعد از اجرای Query خروجی به صورت زیر است:

طراحی

مرحله 4: فایل GridViewImageUploading.aspx را باز کرده و کدهای زیر را برای طراحی Application بنویسید.

مرحله  1-4: لینک پوشه Style sheet  را در Head صفحه قرار دهید.

Style  های مورد نیاز خود برای طراحی را بنویسید.

مرحله  2-4: کنترل های مورد نظر را مانند قطعه کد زیر از toolbox انتخاب کرده و در صفحه خود قرار دهید.

<h3 style="color: #0000FF; font-style: italic">Display Image and update, delete in GridView Using ASP.NET</h3>  
<div>  
    <asp:FileUpload ID="fileupload" runat="server" />  
    <asp:Button ID="upload" runat="server" Font-Bold="true" Text="Upload" OnClick="upload_Click" />  

<asp:Label ID="lblResult" runat="server"/>

    <br />  
    <br />  
</div>  
<div>  
    <asp:GridView runat="server" ID="gvImage" AutoGenerateColumns="false" AllowPaging="True" OnRowCancelingEdit="gvImage_RowCancelingEdit" DataKeyNames="ImageId" CellPadding="4" OnRowEditing="gvImage_RowEditing" OnRowUpdating="gvImage_RowUpdating" OnRowDeleting="gvImage_RowDeleting" HeaderStyle-BackColor="Tomato">  
        <Columns>  
            <asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="200px">  
                <ItemTemplate>  
                    <asp:Label ID="lblImgId" runat="server" Text='<%#Container.DataItemIndex+1%>'></asp:Label>  
                </ItemTemplate>  
            </asp:TemplateField>  
            <asp:TemplateField HeaderText="Name" HeaderStyle-Width="200px">  
                <ItemTemplate>  
                    <asp:Label ID="lblImageName" runat="server" Text='<%# Eval("ImageName") %>'></asp:Label>  
                </ItemTemplate>  
                <EditItemTemplate>  
                    <asp:TextBox ID="txt_Name" runat="server" Text='<%# Eval("ImageName") %>'></asp:TextBox>  
                </EditItemTemplate>  
            </asp:TemplateField>  
            <asp:TemplateField HeaderText="Image" HeaderStyle-Width="200px">  
                <ItemTemplate>  
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>' Height="80px" Width="100px" />  
                </ItemTemplate>  
                <EditItemTemplate>  
                    <asp:Image ID="img_user" runat="server" ImageUrl='<%# Eval("Image") %>' Height="80px" Width="100px" />  
                    <br />  
                    <asp:FileUpload ID="FileUpload1" runat="server" />  
                </EditItemTemplate>  
            </asp:TemplateField>  
            <asp:TemplateField HeaderStyle-Width="150px">  
                <ItemTemplate>  
                    <asp:LinkButton ID="LkB1" runat="server" CommandName="Edit">Edit</asp:LinkButton>  
                    <asp:LinkButton ID="LkB11" runat="server" CommandName="Delete">Delete</asp:LinkButton>  
                </ItemTemplate>  
                <EditItemTemplate>  
                    <asp:LinkButton ID="LkB2" runat="server" CommandName="Update">Update</asp:LinkButton>  
                    <asp:LinkButton ID="LkB3" runat="server" CommandName="Cancel">Cancel</asp:LinkButton>  
                </EditItemTemplate>  
            </asp:TemplateField>  
        </Columns>  
    </asp:GridView>  
</div> 

طراحی صفحه به صورت زیر می باشد:

در اینجا GridView با ویژگی های مورد نظر با قطعه کد زیر طراحی شده است:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewImageUploading.aspx.cs" Inherits="GridViewImageUploading" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>An article by Upendra Pratap Shahi</title>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <h3 style="color: #0000FF; font-style: italic">Display Image and update, delete in GridView Using ASP.NET</h3>  
        <div>  
            <asp:FileUpload ID="fileupload" runat="server" />  
            <asp:Button ID="upload" runat="server" Font-Bold="true" Text="Upload" OnClick="upload_Click" />  

<asp:Label ID="lblResult" runat="server"/>

            <br />  
            <br />  
        </div>  
        <div>  
            <asp:GridView runat="server" ID="gvImage" AutoGenerateColumns="false" AllowPaging="True"  
                OnRowCancelingEdit="gvImage_RowCancelingEdit" DataKeyNames="ImageId" CellPadding="4"  
                OnRowEditing="gvImage_RowEditing" OnRowUpdating="gvImage_RowUpdating" OnRowDeleting="gvImage_RowDeleting" HeaderStyle-BackColor="Tomato">  
                <Columns>  
                    <asp:TemplateField HeaderText="Sr.No" HeaderStyle-Width="200px">  
                        <ItemTemplate>  
                            <asp:Label ID="lblImgId" runat="server" Text='<%#Container.DataItemIndex+1%>'></asp:Label>  
                        </ItemTemplate>  
                    </asp:TemplateField>  
                    <asp:TemplateField HeaderText="Name" HeaderStyle-Width="200px">  
                        <ItemTemplate>  
                            <asp:Label ID="lblImageName" runat="server" Text='<%# Eval("ImageName") %>'></asp:Label>  
                        </ItemTemplate>  
                        <EditItemTemplate>  
                            <asp:TextBox ID="txt_Name" runat="server" Text='<%# Eval("ImageName") %>'></asp:TextBox>  
                        </EditItemTemplate>  
                    </asp:TemplateField>  
                    <asp:TemplateField HeaderText="Image" HeaderStyle-Width="200px">  
                        <ItemTemplate>  
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Image") %>'  
                                Height="80px" Width="100px" />  
                        </ItemTemplate>  
                        <EditItemTemplate>  
                            <asp:Image ID="img_user" runat="server" ImageUrl='<%# Eval("Image") %>'  
                                Height="80px" Width="100px" /><br />  
                            <asp:FileUpload ID="FileUpload1" runat="server" />  
                        </EditItemTemplate>  
                    </asp:TemplateField>  
                    <asp:TemplateField HeaderStyle-Width="150px">  
                        <ItemTemplate>  
                            <asp:LinkButton ID="LkB1" runat="server" CommandName="Edit">Edit</asp:LinkButton>  
                            <asp:LinkButton ID="LkB11" runat="server" CommandName="Delete">Delete</asp:LinkButton>  
                        </ItemTemplate>  
                        <EditItemTemplate>  
                            <asp:LinkButton ID="LkB2" runat="server" CommandName="Update">Update</asp:LinkButton>  
                            <asp:LinkButton ID="LkB3" runat="server" CommandName="Cancel">Cancel</asp:LinkButton>  
                        </EditItemTemplate>  
                    </asp:TemplateField>  
                </Columns>  
            </asp:GridView>  
        </div>  
    </form>  
</body>  
</html>

طراحی شما به صورت زیر می شود:

کد زیر را به Web.config اضافه کنید:

<connectionStrings>  
   <add name="DefaultConnection" connectionString="Data Source=.\SQLEXPRESS;Integrated Security=true;Initial Catalog=SchoolDB;" providerName="System.Data.SqlClient"/>  
</connectionStrings>

مرحله 5: بعد از اعمال کدهای زیر برنامه به خوبی کار می کند.

Namespace های زیر را به بخش namespace  از code behind صفحه خود اضافه کنید.

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.IO;  
using System.ConFigureuration;

Code behind صفحه:

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.IO;  
using System.Configuration;  
public partial class GridViewImageUploading: System.Web.UI.Page   
{  
    SqlConnection con;  
    SqlDataAdapter da;  
    DataSet ds;  
    SqlCommand cmd;  
    string connStr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;  
    protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!IsPostBack)   
        {  
            ImageData();  
        }  
    }  
    protected void upload_Click(object sender, EventArgs e)  
    {  
        try   
        {  
            string filename = Path.GetFileName(fileupload.PostedFile.FileName);  
            fileupload.SaveAs(Server.MapPath("~/Images/" + filename));  
            con = new SqlConnection(connStr);  
            con.Open();  
            cmd = new SqlCommand("insert into Image_Details (ImageName,Image) values(@ImageName,@Image)", con);  
            cmd.Parameters.AddWithValue("@ImageName", filename);  
            cmd.Parameters.AddWithValue("@Image", "Images/" + filename);  
            cmd.ExecuteNonQuery();  
            ImageData();  
        }   
        catch (Exception ex)  
        {  
            upload.Text = ex.Message;  
        }  
    }  
    protected void ImageData()  
    {  
        con = new SqlConnection(connStr);  
        con.Open();  
        da = new SqlDataAdapter("select * from Image_Details", con);  
        ds = new DataSet();  
        da.Fill(ds);  
        gvImage.DataSource = ds;  
        gvImage.DataBind();  
    }  
    // edit event    
    protected void gvImage_RowEditing(object sender, GridViewEditEventArgs e)  
    {  
        gvImage.EditIndex = e.NewEditIndex;  
        ImageData();  
  
    }  
    // update event    
    protected void gvImage_RowUpdating(object sender, GridViewUpdateEventArgs e)  
    {  
        //find image id of edit row    
        string imageId = gvImage.DataKeys[e.RowIndex].Value.ToString();  
        // find values for update    
        TextBox name = (TextBox) gvImage.Rows[e.RowIndex].FindControl("txt_Name");  
        FileUpload FileUpload1 = (FileUpload) gvImage.Rows[e.RowIndex].FindControl("FileUpload1");  
        con = new SqlConnection(connStr);  
        string path = "~/Images/";  
        if (FileUpload1.HasFile)   
        {  
            path += FileUpload1.FileName;  
            //save image in folder    
            FileUpload1.SaveAs(MapPath(path));  
        }  
        else  
        {  
            // use previous user image if new image is not changed    
            Image img = (Image) gvImage.Rows[e.RowIndex].FindControl("img_user");  
            path = img.ImageUrl;  
        }  
        SqlCommand cmd = new SqlCommand("update Image_Details set ImageName='" + name.Text + "',image='" + path + "'  where ImageId=" + imageId + "", con);  
        con.Open();  
        cmd.ExecuteNonQuery();  
        con.Close();  
        gvImage.EditIndex = -1;  
        ImageData();  
    }  
    // cancel edit event    
    protected void gvImage_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)  
    {  
        gvImage.EditIndex = -1;  
        ImageData();  
    }  
    //delete event    
    protected void gvImage_RowDeleting(object sender, GridViewDeleteEventArgs e)  
    {  
        GridViewRow row = (GridViewRow) gvImage.Rows[e.RowIndex];  
        Label lbldeleteid = (Label) row.FindControl("lblImgId");  
        Label lblDeleteImageName = (Label) row.FindControl("lblImageName");  
        con = new SqlConnection(connStr);  
        con.Open();  
        SqlCommand cmd = new SqlCommand("delete FROM Image_Details where ImageId='" + Convert.ToInt32(gvImage.DataKeys[e.RowIndex].Value.ToString()) + "'", con);  
        cmd.ExecuteNonQuery();  
        con.Close();  
        ImageDeleteFromFolder(lblDeleteImageName.Text);  
        ImageData();  
    }  
    /// <summary>  
    /// This function is used to delete image from folder when deleting in gridview.  
    /// </summary>  
    /// <param name="imagename">image name</param>  
    protected void ImageDeleteFromFolder(string imagename)  
    {  
        string file_name = imagename;  
        string path = Server.MapPath(@  
        "~/Images/" + imagename);  
        FileInfo file = new FileInfo(path);  
        if (file.Exists) //check file exsit or not  
        {  
            file.Delete();  
            lblResult.Text = file_name + " file deleted successfully";  
            lblResult.ForeColor = System.Drawing.Color.Green;  
        }   
        else  
        {  
            lblResult.Text = file_name + " This file does not exists ";  
            lblResult.ForeColor = System.Drawing.Color.Red;  
        }  
    }  
}

خروجی ها

زمانی که هیچ داده ای آپلود نشده است:

زمانی که یک عکس آپلود شده باشد:

زمانی که یک عکس دیگر آپلود شود:

زمانی که دو عکس دیگر اضافه شود:

حذف یک عکس:

ویرایش عکس: