Serving Information Simply

Tuesday 19 February 2013

Showing Uploaded image in grid view in C#.net


In my last article I had explained about how to upload image and audio file in asp.net using C# image and audio file uploading.

In this article I will let you know about how to show uploaded images in grid view control and also I will explain about how to use file upload control in this grid view row editing. For example if a Website user uploaded image save that image in the server path and display in grid view with use image control, after that editing that image using file upload control in grid view edit item template.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> Showing Uploaded image in grid view </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="1000" align="center">
            <tr>
                <td colspan="2">
                    <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    Select File to be upload
                </td>
                <td>
                    <asp:FileUpload ID="fuImage" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Description of the file
                </td>
                <td>
                    <asp:TextBox ID="txtDesc" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center" class="style1">
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick=" btnUpload _Click" />
                </td>
            </tr>
            <tr>
                <td colspan="2" height="250" align="center">
                    <asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" AutoGenerateColumns="false"  OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" OnRowUpdating="GridView1_RowUpdating">
                        <Columns>
                            <asp:TemplateField HeaderText="File Name">
                                <ItemTemplate>
                                    <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("fpath")%>' />
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:FileUpload ID="FileUpload2" runat="server" />
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Description">
                                <ItemTemplate>
                                    <%#Eval("desc1")%>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <asp:TextBox ID="txtdesc" runat="server" Text='<%#Eval("desc1")%>'></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:CommandField HeaderText="Modify" ShowEditButton="true" EditText="Edit">
                                <ControlStyle Width="50" />
                            </asp:CommandField>
                            <asp:TemplateField HeaderText="Delete">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkDelete" CommandName="Delete" runat="server" OnClientClick="return confirm('Are you sure you want to delete this record?');">Delete</asp:LinkButton>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Server side Coding

Note: - Here you will use your own connection string name that you have mentioned into web config file.if you do not know how to declare connection string in web.config then go through  my last article image and audio file uploading.

using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Abhinav"].ConnectionString);
    SqlCommand sqlcmd = new SqlCommand();
    SqlDataAdapter da = new SqlDataAdapter();
    DataTable dt = new DataTable();
    String fname, fpath, desc;
    String spath;
    protected void Page_Load(object sender, EventArgs e)
    {
        lblText.Text = "";
        if (!Page.IsPostBack)
        {
            LoadGrid();
        }
    }
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        if (fuImage.HasFile)
        {
            //Check File is available in Fileupload control and then upload to server path
            fname = FuImage.FileName;
            spath = @"~\Uploaded\" + FuImage.FileName;
            fpath = Server.MapPath("Uploaded");
            fpath = fpath + @"\" + FuImage.FileName;
            desc = TxtDesc.Text;
            if (System.IO.File.Exists(fpath))
            {
                LblText.Text = "File Name already exists!";
                return;
            }
            else
            {
                FuImage.SaveAs(fpath);
            }
            //Store details in the SQL Server table
            StoreDetails();
            TxtDesc.Text = "";
            LoadGrid();
        }
        else
        {
            LblText.Text = "Please select file!";
        }
    }
    void StoreDetails()
    {
        String Insertquery;
        Insertquery = "insert into fileDet(fname,fpath,desc1) values('" + fname + "','" + spath + "','" + desc + "')";
        sqlcon.Open();
        sqlcmd = new SqlCommand(Insertquery, sqlcon);
        sqlcmd.CommandType = CommandType.Text;
        sqlcmd.ExecuteNonQuery();
        sqlcon.Close();
        LoadGrid();
    }
    void LoadGrid()
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from fileDet", sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        dt.Clear();
        da.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        else
        {
            GridView1.DataBind();
        }
        sqlcon.Close();
    }
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        LoadGrid();
    }
  protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    {
        GridView1.EditIndex = -1;
        LoadGrid();
    }

    protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
    {
        String ID;
        ID = GridView1.DataKeys[e.RowIndex].Value.ToString();
        sqlcmd = new SqlCommand("select * from fileDet where ID='" + ID + "'", sqlcon);
        sqlcon.Open();
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);

        if (dt.Rows.Count > 0)
        {
            if (System.IO.File.Exists(Server.MapPath(dt.Rows[0][2].ToString())))
            {
                System.IO.File.Delete(Server.MapPath(dt.Rows[0][2].ToString()));
            }
        }
        sqlcmd = new SqlCommand("delete from fileDet where ID='" + ID + "'", sqlcon);
        sqlcmd.ExecuteNonQuery();
        sqlcon.Close();
        LoadGrid();
    }
    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        GridViewRow row = GridView1.Rows[e.RowIndex];
        string ID;

        ID = GridView1.DataKeys[e.RowIndex].Value.ToString();

        FileUpload flname = (FileUpload)row.FindControl("FileUpload2");

        if (flname.HasFile)
        {

            fname = flname.FileName;
            spath = @"~\Uploaded\" + flname.FileName;
            fpath = Server.MapPath("Uploaded");
            fpath = fpath + @"\" + flname.FileName;
            if (System.IO.File.Exists(fpath))
            {
                LblText.Text = "File Name already exists!";
                return;
            }
            else
            {
                flname.SaveAs(fpath);
            }
        }
        else
        {
            LblText.Text = "Please select file!";
        }

        TextBox desc1 = (TextBox)row.FindControl("txtdesc");
        string query;
        query = "update fileDet set fname='" + fname + "',fpath='" + spath + "',desc1='" + desc1.Text + "' where ID='" + ID + "'";
        sqlcon.Open();
        sqlcmd = new SqlCommand(query, sqlcon);
        sqlcmd.CommandType = CommandType.Text;
        sqlcmd.ExecuteNonQuery();
        sqlcon.Close();
        GridView1.EditIndex = -1;
        LoadGrid();
    }
}

Then Implement the code and See the output...Thanks ...Keep Visiting ...:)
If you like this article then Join this Site.

No comments:

Post a Comment