image in updatepanel causes whole page refresh

Question

i have an image control inside update panel, in the page load i am setting its url.

code behind in page_load

string url = "example.com";
Image1.ImageUrl = url;

inside updatepanel in aspx

<asp:Image ID="Image1" runat="server" CssClass="image" />

i also have couple of submit buttons inside the updatepanel, and i am updating some texboxes and labels on button clicks.

however this causes whole page to refresh. (the scrollbar goes up.)

if move the image outside of update panel this doesn't happen. the problem is the layout doesn't work at all if i remove the image outside of updatepanel. can anyone help me with this? thanks.

UPDATE

i have realized this only happens in Chrome. Does anyone have an idea ?

UPDATE 2 On that page I have resolved the issue by removing the img from the updatepanel. It was hell to get the layout work, but it worked.

However I have another page, where I am adding new imgs to the updatepanel when a user clicks load more. Same deal, and obviously i can't move image out of update panel this time. Here is the code.

  <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

        <!--Recent Uploads-->
        <div class="uploads">
            <h2>Uploads</h2>
            <asp:UpdatePanel ID="RecentUpload" runat="server" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="loaduploads"/>
                </Triggers>
                <ContentTemplate>
                    <asp:Button CssClass="uploadButton" ID="loaduploads" runat="server" Text="Load More" OnClick="loaduploads_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

Code behind (upload index is a session variable)

upload_index += 5;
        for (int i = 0; i < upload_index; i++)
        {
            try
            {
                SSImage img = images[i];
                HyperLink imglink = new HyperLink();
                imglink.NavigateUrl = "/Image.aspx?id=" + img.id;
                imglink.ImageUrl = "/ShowImage.ashx?imgid=" + img.id;
                imglink.ToolTip = img.title;
                imglink.CssClass = "imgupload";
                Control contentpanel = RecentUpload.ContentTemplateContainer;
                contentpanel.Controls.AddAt(contentpanel.Controls.Count - 2, imglink);
            }
            catch (ArgumentOutOfRangeException)
            {
                loaduploads.Visible = false;
                break;
            }
        }

UPDATE 3

the problem does not happen with static images, rather happens when i am trying to load from showimage.ashx. here is the code.

<%@ WebHandler Language="C#" Class="ShowImage" %>

using System;
using System.Web;
using System.IO;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public class ShowImage : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        SqlDataReader rdr = null;
        SqlConnection conn = new SqlConnection();
        SqlCommand cmd = new SqlCommand();

        try
        {
            string connStr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
            conn = new SqlConnection(connStr);

            cmd = new SqlCommand("SELECT Image_data FROM [Image_table] WHERE Image_id = " + context.Request.QueryString["imgID"], conn);
            conn.Open();
            Object result = cmd.ExecuteScalar();
            //if nothing found throw exception
            if (result == null)
            {
                throw new Exception();
            }
            rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                context.Response.ContentType = "image/jpg";
                context.Response.BinaryWrite((byte[])rdr["Image_data"]);
            }

            if (rdr != null)
                rdr.Close();
        }
        catch
        {

        }
        finally
        {
            conn.Close();
            conn.Dispose();
        }

    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

Answer 1

In my opinion,

You should try to add controls to the body instead of updating the ContentTemplate of the UpdatePanel i.e. Create a Panel control in ContentTemplate and add everything in that and update anything in that Panel not the ContentTemplate.

Check the logic and aspx syntax which shows to add controls to Panel which is contained in the UpdatePanel > ContentTemplate

ASPX

    <asp:UpdatePanel ID="RecentUpload" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="loaduploads"/>
        </Triggers>
        <ContentTemplate>
            <asp:Panel ID="pnlMyDynamicContent" runat="server">
                 <asp:Button CssClass="uploadButton" ID="loaduploads" runat="server" Text="Load More" OnClick="loaduploads_Click" />
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>

Code Behind

    ad_index += 5;
    for (int i = 0; i < upload_index; i++)
    {
        try
        {
            SSImage img = images[i];
            HyperLink imglink = new HyperLink();
            imglink.NavigateUrl = "/Image.aspx?id=" + img.id;
            imglink.ImageUrl = "/ShowImage.ashx?imgid=" + img.id;
            imglink.ToolTip = img.title;
            imglink.CssClass = "imgupload";

            // Commented old code
            //Control contentpanel = RecentUpload.ContentTemplateContainer;
            //contentpanel.Controls.AddAt(contentpanel.Controls.Count - 2, imglink);

            //Add controls to Panel instead of updating the ContentTemplate itself
            pnlMyDynamicContent.Controls.AddAt(pnlMyDynamicContent.Controls.Count - 2, imglink);
        }
        catch (ArgumentOutOfRangeException)
        {
            loaduploads.Visible = false;
            break;
        }
    }

Answer 2

Add another update panel and put your image tag into this update panel and then set property "updatemode" to "always".

try this one it will solve your problem for sure. if doesn't let me know.

Answer 3

You should use Asynchronous post back trigger of update panel here is the example:

<asp:AsyncPostBackTrigger ControlID="" EventName=""/>

where 'controlID' is a id of element which can cause the postback and 'eventname' is the particular event that is fired by defined control to cause postback