9

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

}
21
  • Have you put Triggers in your Update Panel ?
    – zey
    Apr 26, 2013 at 6:00
  • @zey yes i have asyncpostbacktrigger
    – btevfik
    Apr 26, 2013 at 6:01
  • Can you post your code ?
    – zey
    Apr 26, 2013 at 6:05
  • @zey the whole thing?
    – btevfik
    Apr 26, 2013 at 6:06
  • UpdatePanel with asyncpostbacktrigger :)
    – zey
    Apr 26, 2013 at 6:09

3 Answers 3

2

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

0
1

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.

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;
        }
    }
1
  • thanks for the reply. I have actually done that originally, but it had the same result.
    – btevfik
    May 2, 2013 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.