Sunday 13 January 2013

Upload and Display Images in Gridview




I created one table ImageTable which has 3 fields ID(int),ImageName(varchar) and TheImage(image).

Now I have created 3 stored procedues as follows:
SP1:-

ALTER Procedure [dbo].[InsertImage]
 
    @Name  varchar(50),
    @theImage  Image
AS
Begin

Insert into [student].[dbo].[ImageTable] values(@Name,@theImage)
END
SP2:-

ALTER Procedure [dbo].[SelectImage]
As

Select ImageName,ID from [student].[dbo].[ImageTable]
SP3:-

ALTER Procedure [dbo].[SelectImageByID]
@ID int
AS
Select TheImage from [student].[dbo].[ImageTable] where ID=@ID
------------------------------
Now on html I took one textbox,one fileupload control and one button.


<form id="form1" runat="server">
    <div style="height: 247px">
        <asp:Panel ID="Panel1" Visible="false" runat="server">
       
      <asp:Label ID="lblErr" runat="server" Text="Please select One file" BackColor="#FFFF66" ForeColor="Red"></asp:Label><br />
       
        </asp:Panel>
        &nbsp;&nbsp;Image Name:
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
&nbsp; Upload Image
        <asp:FileUpload ID="FileUpload1" runat="server" />
&nbsp;<asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click" />
        <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            onrowcommand="GridView1_RowCommand" onrowdeleting="GridView1_RowDeleting">
        <Columns>
         <asp:TemplateField HeaderText="ID" Visible="false">
        <EditItemTemplate>
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
        <asp:Label ID="lblID" runat="server" Text='<%# Bind("ID") %>' />
        </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
        <EditItemTemplate>
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
        <asp:Label ID="lblName" runat="server" Text='<%# Bind("ImageName") %>' />
        </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField  HeaderText="Image">
        <EditItemTemplate>
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
        </EditItemTemplate>
        <ItemTemplate>
            <asp:Image ID="Image1" Height="100px" Width="250px" runat="server" ImageUrl='<%# "ImageHandler.ashx?ID=" +Eval("ID") %>' />
        </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Select">
     <ItemTemplate>
       <asp:LinkButton ID="LinkButton1" OnClientClick="return confirm('Do you want to delete')"
         CommandArgument='<%# Eval("ID") %>'
         CommandName="Delete" runat="server">
         Delete</asp:LinkButton>
     </ItemTemplate>
   </asp:TemplateField>
        </Columns>
        </asp:GridView>
   
    </div>
    </form>
-----------------------------------------------------
Now on server side create one "Linq to Sql" .dbml file.
Drag database table and 3 stored procedures there and save it.
In my case it is ClassicDataContext.dbml.

Next step I took one Generic Handler. in my case it is ImageHandler.ashx

Enter following code:(This is for processing ID)

 public void ProcessRequest(HttpContext context)
        {
            string imageId = context.Request.QueryString["ID"];
            context.Response.ContentType = "image/jpeg";
            Stream stm = ImageLoading(imageId);
            byte[] buffer = new byte[4096];
            int byteSeq = stm.Read(buffer, 0, 4096);
            while (byteSeq > 0)
            {
                context.Response.OutputStream.Write(buffer, 0, byteSeq);
                byteSeq = stm.Read(buffer, 0, 4096);
            }
        }

        private Stream ImageLoading(string imageId)
        {
            int obj = Convert.ToInt32(imageId);
            ClassicDataContext db = new ClassicDataContext();
            var x = db.SelectImageByID(obj).First();
            return new MemoryStream(x.TheImage.ToArray());
        }
----------------------------------------------------------------


Now put following code on cs file.



namespace ImageGrid
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        ClassicDataContext db;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.LoadGrid();
            }

        }

        private void LoadGrid()
        {
            db = new ClassicDataContext();
            GridView1.DataSource = db.SelectImage();
            GridView1.DataBind();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
           if(IsPictureExists(TextBox1).Equals(true))
           {
               if (FileUpload1.HasFile)
                {

                    byte[] Imagesize = new byte[FileUpload1.PostedFile.ContentLength];
                    HttpPostedFile myImg = FileUpload1.PostedFile;
                    myImg.InputStream.Read(Imagesize, 0, FileUpload1.PostedFile.ContentLength);
                    db = new ClassicDataContext();
                    db.InsertImage(TextBox1.Text, Imagesize);
                    db.SubmitChanges();
                    this.LoadGrid();
                }
           
            else
            {
                Panel1.Visible = true;

            }
           }
           else
           {
               Panel1.Visible = true;
               lblErr.Text = "Name already Exists";
           }
        }

        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "Delete")
            {
                int imageID = Convert.ToInt32(e.CommandArgument);
                string constring = @"Server=User-PC\SQLEXPRESS;initial catalog=Student;Integrated Security=true";
                SqlConnection conn = new SqlConnection(constring);
                conn.Open();
                string query="Delete from [student].[dbo].[ImageTable] where ID=" +imageID;
                SqlCommand cmd = new SqlCommand(query, conn);
                cmd.ExecuteNonQuery();
                this.LoadGrid();
                conn.Close();
               
            }
        }

        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
        }
       
    }
}






No comments:

Post a Comment