How to Display Image from Database in Modal Popup

Hello All,

I need your help to display image from database in modal popup window in asp.net application.

I have mentioned my code for your reference.

Here my htm code:-

<div class="modal fade" id="myModal">
<div class=" modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Image Detailsh4>
div>
<div class=" modal-body">
<img class="img-rounded" id="modal_Img" src='<%# Eval("Image")%>' style="width: 100%" runat="server" />
<br />
<asp:TextBox ID="tbxComment" CssClass="text-primary" Width="350px" TextMode="MultiLine" runat="server">asp:TextBox>
div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Savebutton>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
div>
div>
div>
div>

And below is the c# code:-

private void LoadImageBasedOnFID(Int64 FID)
{
try
{
using (SqlCommand command = new SqlCommand("LoadImageBasedOnFID", clsConObj.sqlCon))
{
clsConObj.OpenConnection();
command.Parameters.Add("@FID", SqlDbType.SmallInt).Value = FID;
command.CommandType = CommandType.StoredProcedure;
using (SqlDataReader reader = command.ExecuteReader())
{
while (reader.Read())
{
modal_Img.Src = reader["Image"].ToString();
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
}
clsConObj.CloseConnection();
}
}
catch (Exception ex)
{
}
}

C# [ImageCSharp.aspx]
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["ImageID"] != null)
{
string strQuery = "select Name, ContentType, Data from tblFiles where id=@id";
SqlCommand cmd = new SqlCommand(strQuery);
cmd.Parameters.Add("@id", SqlDbType.Int).Value
= Convert.ToInt32 (Request.QueryString["ImageID"]);
DataTable dt = GetData(cmd);
if (dt != null)
{
Byte[] bytes = (Byte[])dt.Rows[0]["Data"];
Response.Buffer = true;
Response.Charset = "";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.ContentType = dt.Rows[0]["ContentType"].ToString();
Response.AddHeader("content-disposition", "attachment;filename="
+ dt.Rows[0]["Name"].ToString());
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
}
}
class=" modal-body">
class="img-rounded" id="modal_Img" ID="Image1" runat="server" ImageUrl ="ImageCSharp.aspx?ImageID=1"/>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.