Thursday, 4 July 2013

Image Upload and Edit image in Griview.

Image Upload and Edit image in Griview.
I m using following table in my Example

Column name   Datatype
Bookid* Int
Booktit Varchar(100)
Bookimg Varchar(100)

*Book id column wil be auto increment
.ASPX CODE:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageInsert Edit .aspx.cs" Inherits="ImageInsert_Edit_" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div>
    Book Title<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
book Image<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<br />
</div>

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" DataKeyNames="bookid,bookimg"
onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Book Title">
<ItemTemplate>
<%#Eval("booktit") %>
</ItemTemplate>
<EditItemTemplate>
<%#Eval("booktit") %>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<img id="im1" runat="server" src='<%#Eval("bookimg",@"Images/{0}")%>' height="120" width="120" />
</ItemTemplate>
<EditItemTemplate>

<asp:FileUpload ID="fu1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="lk1" runat="server" CommandName="edit" Text="Edit"></asp:LinkButton>

</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lk2" runat="server" CommandName="update" Text="Update"></asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

    </div>
    </form>
</body>
</html>

.CS CODE:

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 ImageInsert_Edit_ : System.Web.UI.Page
{
    string Str = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack == false)
        {
            gridbind();
        }

    }
    //method to bind gridview
    protected void gridbind()
    {
        SqlDataAdapter adp = new SqlDataAdapter("Select * from tbbook",Str);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        GridView1.DataSource = ds;
        GridView1.DataBind();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string booktitle = TextBox1.Text;
        string bookimage = FileUpload1.FileName;
        //saving uploaded image in Images folder
        FileUpload1.PostedFile.SaveAs(Server.MapPath(@"Images/" + FileUpload1.FileName));
        //saving info in database
        SqlConnection con = new SqlConnection(Str);
        con.Open();
        SqlCommand cmd = new SqlCommand("insert into tbbook values(@booktit,@bookimg)");
        cmd.Connection = con;
        cmd.Parameters.AddWithValue("@booktit", booktitle);
        cmd.Parameters.AddWithValue("@bookimg", bookimage);

        //cmd.Parameters.Add("@booktit", SqlDbType.VarChar, 100).Value = booktitle;
       // cmd.Parameters.Add("@bookimg", SqlDbType.VarChar, 50).Value = bookimage;
        cmd.ExecuteNonQuery();
        cmd.Dispose();
        con.Close();
        gridbind();
    }
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    {
        GridView1.EditIndex = e.NewEditIndex;
        gridbind();

    }
    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        int bookid;
        string bookimg;
        bookid = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
        FileUpload file = ((FileUpload)(GridView1.Rows[e.RowIndex].FindControl("fu1")));

        if (file.FileName.Length > 0)//checking if user uploaded any file
        {
            bookimg = file.FileName;
            file.PostedFile.SaveAs(Server.MapPath(@"Images/" + bookimg));//saving uploaded file in Images folder
        }
        else
        {
            bookimg = GridView1.DataKeys[e.RowIndex]["bookimg"].ToString();
        }
        SqlConnection con = new SqlConnection(Str);
        con.Open();
        SqlCommand cmd = new SqlCommand("update tbbook set bookimg=@bookimg where bookid=@bookid");
        cmd.Connection = con;

        cmd.Parameters.AddWithValue("@bookid", bookid);
        cmd.Parameters.AddWithValue("@bookimg", bookimg);

       // cmd.Parameters.Add("@bookid", SqlDbType.Int).Value = bookid;
       // cmd.Parameters.Add("@bookimg", SqlDbType.VarChar, 50).Value = bookimg;
        cmd.ExecuteNonQuery();
        con.Close();
        GridView1.EditIndex = -1;
        gridbind();


    }
}

No comments:

Post a Comment