更新面板中的图像导致整个页面刷新

本文关键字:刷新 图像 更新 | 更新日期: 2023-09-27 18:10:14

我在更新面板中有一个图像控件,在页面加载中我设置了它的url。

page_load

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

在aspx

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

我也有几个提交按钮在更新面板,我正在更新一些文本框和标签上的按钮点击。

但是这会导致整个页面刷新。(滚动条向上)

如果将图像移出更新面板,则不会发生这种情况。问题是布局不工作在所有,如果我删除图像外的updatepanel。有人能帮我一下吗?谢谢。

我已经意识到这只发生在Chrome。有人知道吗?

更新2 在该页面上,我通过从更新面板中删除img解决了这个问题。布局工作很困难,但它工作了。

然而,我有另一个页面,当用户单击加载更多时,我正在向更新面板添加新图像。同样的处理,显然我不能移动图像更新面板这次。代码如下:

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

后台代码(上传索引是一个会话变量)

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

更新3

问题不会发生在静态图像上,而是发生在我试图从showimage.ashx加载时。代码如下:

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

更新面板中的图像导致整个页面刷新

您应该使用更新面板的异步post back触发器下面是示例:

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

其中'controlID'是导致回发的元素的id, 'eventname'是由定义的控件触发的导致回发的特定事件

添加另一个更新面板,并将图像标签放入此更新面板,然后将属性"updatemode"设置为"always"

试试这个,它肯定能解决你的问题。它不会让我知道。

在我看来,

你应该尝试添加控件到主体,而不是更新UpdatePanelContentTemplate,即在ContentTemplate中创建Panel控件并添加其中的所有内容,并更新Panel而不是ContentTemplate中的任何内容。

检查逻辑和aspx语法,显示添加控件到Panel,包含在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>

代码后面

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