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. It's quite interesting and I had great experience while making this app. On any image click we will get the information about image in modal popup.

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 :
UI of an application

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);
}
}



You will get the output like this :
Output of an application

Download Sample Application


Comments



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: