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

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