Share via

image not loading in modal popup imageurl in asp.net c#

Gani_tpt 1,686 Reputation points
2024-05-05T17:01:04.1133333+00:00

i am trying to load image in image button through modal popup.

The problem is modal popup is showing, but image not loading which means it is blank window.

i am storing all the images in different server and application hosted in another server.

what is the problem in below code.

pls. help us to resolve this issue. this is urgent.

    protected void Display(object sender, EventArgs e)

    {

Filepath = @"\adosoe.abm.intranet\zone3\project102\sample.png";

        string sMineType1 = MimeMapping.GetMimeMapping(Filepath);

        byte[] ImageBytes = File.ReadAllBytes(FileWithFilepath);

        Image1.ImageUrl = $@"data:{sMineType1};base64,{Convert.ToBase64String((byte[])ImageBytes)}";

        string ScriptJava = "openModal();";

        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "mypop", ScriptJava, true);

}

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,303 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,361 questions
Accepted answer
  1. Lan Huang-MSFT 26,121 Reputation points Microsoft Vendor
    2024-05-10T03:32:52.6233333+00:00

    Hi @Gani_tpt,

    what is the alternative way to maintain the all the control without using update panel...?

    I tested your code and it works fine (Updatepanel is commented in the code).

    Maybe you didn't provide complete code.

    if i used update panel ==> i am unable to download the file and modal popup displaying but, image is blank.

    On the other hand, I adapted the code based on using Updatepanel so that the modal popup works properly.

    You need to use the Triggers property of the UpdatePanel to register actions that trigger a full postback.

    Nested buttons in GridView need to be triggered using the following code.

    ScriptManager.GetCurrent(this.Page).RegisterPostBackControl(btn);

    All code

    <!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type='text/javascript'>
        function openModal() {
            $('[id*=myModal]').modal('show');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScrMgr1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" >
            <ContentTemplate>
                <div>
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
                    <div id="dialog1" style="display: none">
                    </div>
                    <hr />
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="Fileid">
                        <Columns>
                            <asp:TemplateField HeaderText="Image ID">
                                <ItemTemplate>
                                    <asp:Label ID="Id" runat="server" Text='<%# Eval("Fileid") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="File Name">
                                <ItemTemplate>
                                    <asp:Label ID="Name" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="">
                                <ItemTemplate>
                                    <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="View Detail" CssClass="btn btn-info"
                                        OnClick="Display" ></asp:LinkButton>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:HiddenField ID="HiddenField1" runat="server"
                                        Value='<%# Convert.ToBase64String((byte[])Eval("Data"))%>' />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                    <div id="dialog" style="display: none">
                    </div>
                </div>
                <div>
                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">
                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        &times;</button>
                                    <h4 class="modal-title">Details</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                                        <div class="form-group">
                                            <asp:Image ID="img" runat="server" Width="400px" Height="400px" />
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-info" data-dismiss="modal">
                                        Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="btnUpload" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

    public string UploadFileName = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
    foreach (var item in GridView1.Rows)
    {
        LinkButton btn = (LinkButton)((GridViewRow)item).FindControl("lnkBtnEdit");
        // Get current ScriptManager on the page
        ScriptManager.GetCurrent(this.Page).RegisterPostBackControl(btn);
    }
}
private void BindGrid()
{
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT Fileid, Name, Data FROM tbl_Test_FileStream";
            cmd.Connection = con;
            con.Open();
            GridView1.DataSource = cmd.ExecuteReader();
            GridView1.DataBind();
            con.Close();
        }
    }
}
protected void Upload(object sender, EventArgs e)
{
    string filename = Path.GetFileName(FileUpload1.PostedFile.FileName);
    string contentType = FileUpload1.PostedFile.ContentType;
    using (Stream fs = FileUpload1.PostedFile.InputStream)
    {
        using (BinaryReader br = new BinaryReader(fs))
        {
            byte[] bytes = br.ReadBytes((Int32)fs.Length);
            string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                string query = "INSERT INTO tbl_Test_FileStream(Name, ContentType, Data) VALUES (@Name, @ContentType, @Data)";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Name", filename);
                    cmd.Parameters.AddWithValue("@ContentType", contentType);
                    cmd.Parameters.AddWithValue("@Data", bytes);
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }
    }
    //lnkBtnView.Text = UploadFileName;
    Response.Redirect(Request.Url.AbsoluteUri);
}
protected void Display(object sender, EventArgs e)
{
    int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
    GridViewRow row = GridView1.Rows[rowIndex];
    string a = (row.FindControl("HiddenField1") as HiddenField).Value;
    byte[] data = Convert.FromBase64String(a);
    string imageUrl = "data:image/jpg;base64," + Convert.ToBase64String(data);
    img.ImageUrl = imageUrl;
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest