更新面板中的图像导致整个页面刷新
本文关键字:刷新 图像 更新 | 更新日期: 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"
试试这个,它肯定能解决你的问题。它不会让我知道。在我看来,
你应该尝试添加控件到主体,而不是更新
UpdatePanel
的ContentTemplate
,即在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;
}
}