Show data in popup on image click from database

In this article we will discuss how we can get the data from sql database with single click on any image.


Step 1 - Create one web form and data list control to view all the images

User Interface :


Source code of user interface

Step 2 - Write the below code to their respective events

protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            BindDataList();
        }

        private void closepopup()
        {
            ModalPopupExtender1.Hide();
        }

        public void BindDataList()
        {
            SqlConnection con1 = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Database1.mdf;Integrated Security=True");
            DataSet ds = new DataSet();
            con1.Open();
            string cmdstr = "Select ID, Photo_Path from MemberDetails";
            SqlCommand cmd = new SqlCommand(cmdstr, con1);
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            adp.Fill(ds);
            DataList1.DataSource = ds.Tables[0];
            DataList1.DataBind();
            con1.Close();
        }

        protected void ButtonUpload_Click(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Database1.mdf;Integrated Security=True");

            string filePath = FileUpload1.PostedFile.FileName;
            string filename = Path.GetFileName(filePath);
            Stream fs = FileUpload1.PostedFile.InputStream;
            BinaryReader br = new BinaryReader(fs);
            Byte[] bytes = br.ReadBytes((Int32)fs.Length);
            con.Open();

            SqlCommand mycmd = con.CreateCommand();
            SqlTransaction dBupdate;
            dBupdate = con.BeginTransaction(IsolationLevel.Serializable);

            mycmd.Connection = con;
            mycmd.Transaction = dBupdate;

            try
            {
                //insert the data into database
                mycmd.CommandText = "INSERT INTO MemberDetails(Member_Name, Member_Designation, Photo_Path) VALUES (@Name, @Designation, @PhotoPath)";

                string fPath = FileUpload1.PostedFile.FileName;
                string fname = Path.GetFileName(filePath);
                string imgpath = "~/Member Photos/" + fname;

                mycmd.Parameters.Add("@Name", SqlDbType.VarChar).Value = txtName.Text;
                mycmd.Parameters.Add("@Designation", SqlDbType.VarChar).Value = txtDesignation.Text;
                mycmd.Parameters.Add("@PhotoPath", SqlDbType.NVarChar).Value = imgpath;
                mycmd.ExecuteNonQuery();
                FileUpload1.SaveAs(Server.MapPath("~/Member Photos/" + imgpath));
                txtName.Text = "";
                txtDesignation.Text = "";
                dBupdate.Commit();

                //saving image to server location
                con.Close();
                txtName.Focus();

                BindDataList();
            }
            catch (Exception ex)
            {
                Response.Write("<script>alert('" + Server.HtmlEncode(ex.Message) + "')</script>");
                dBupdate.Rollback();
            }
            finally
            {
                con.Close();
            }
        }

        protected void ButtonClose_Click(object sender, EventArgs e)
        {
            closepopup();
        }

        protected void imgEmp_Click(object sender, ImageClickEventArgs e)
        {
            try
            {
                ImageButton btn = (ImageButton)sender;
                DataListItem item = (DataListItem)btn.NamingContainer;
                Label lblId = (Label)item.FindControl("IDLabel");

                SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Database1.mdf;Integrated Security=True");
                con.Open();
                DataTable dt = new DataTable();
                SqlDataAdapter sda = new SqlDataAdapter("SELECT ID, Member_Name AS 'Name', Member_Designation AS 'Designation' FROM MemberDetails WHERE ID = '" + lblId.Text + "'", con);
                sda.Fill(dt);
                GridView1.DataSource = dt;
                GridView1.DataBind();
                con.Close();
                this.ModalPopupExtender1.Show();
            }
            catch (Exception ex)
            {
                Response.Write(ex.Message);
            }
        }