asp.net页面加载两次的坑

页面里的img或background-image设置不当会导致当前页面加载多次。

1、img

问题:在某些情况下我们需要往img标签动态填充src,如多图片通过第三方插件预览等。如果将src的默认值设置为#等指向当前页面的标志,那么恭喜你了Page_Load会执行多次。

<img id="viewerImg" src="#" alt="大图" style="display: none;" />

规避:通过将src设置为空或具体的图片地址,如src=""

抓包(Page_Load执行两次):

第二次的Referer与第一次请求的URL相同

<%-- 第一次 --%>
GET http://localhost:2999/rimg/uni?V9MzDoXpblW9vvysNQIGOi8KJYfCPWh7WeHyUljmqnDveydUBPBs4tSkhVu+W65qbymf3NYP6Hgy2myvJiOd6w== HTTP/1.1
Referer: http://localhost:2999/rimg/uni?V9MzDoXpblW9vvysNQIGOi8KJYfCPWh7WeHyUljmqnDCFvvWIS1Bg+0UxR197ldKVTQs2kWrUHn8us/bPu/jzQ==
<%-- 第二次 --%>
GET http://localhost:2999/rimg/uni?V9MzDoXpblW9vvysNQIGOi8KJYfCPWh7WeHyUljmqnDveydUBPBs4tSkhVu+W65qbymf3NYP6Hgy2myvJiOd6w== HTTP/1.1
Referer: http://localhost:2999/rimg/uni?V9MzDoXpblW9vvysNQIGOi8KJYfCPWh7WeHyUljmqnDveydUBPBs4tSkhVu+W65qbymf3NYP6Hgy2myvJiOd6w==

  

2、background-image

问题:背景图更坑如果将背景图设置为“”也会导致再次加载

style="background-image: url('');" 

规避:将背景图片的url设置到具体的图片

 

转载于:https://www.cnblogs.com/hepc/p/9761860.html

<think>好的,我需要解决用户的问题:如何在ASP.NET中重新加载页面,可能与之前讨论的脚本使用相关。用户提到了之前的回答,其中涉及使用Response.Write和window.open实现文件预览,以及局部刷新的方法。现在用户想了解页面重新加载的方法,可能包括整页刷新和局部刷新。首先,我需要回顾用户提到的引用内容。用户引用了关于ASP.NETAJAX局部刷新的内容,使用jQuery实现。这说明用户可能对局部刷新感兴趣,但问题中也提到了重新加载页面,所以可能需要区分整页刷新和局部刷新两种情况。 接下来,我需要考虑ASP.NET中实现页面刷新的不同方法。整页刷新通常可以通过服务器端的Response.Redirect、Meta标签或者前端的JavaScriptlocation.reload()实现。而局部刷新可以使用UpdatePanel、AJAX(jQuery)或者Web Methods。 用户上一次的问题涉及使用Response.Write输出JavaScript脚本,所以可能对客户端脚本方法比较熟悉。因此,在回答中应该包含这些方法,并可能结合之前的脚本使用示例。同时,用户提到可能与上一次的问题相关,所以需要确保回答中的代码示例与之前的脚本使用方式一致,比如使用Response.Write输出刷新脚本,或者使用ScriptManager注册脚本。 需要分点回答,结构清晰,包括整页刷新和局部刷新的不同方法,每种方法给出代码示例,并说明优缺点。同时,注意引用之前的回答中的相关部分,比如局部刷新使用UpdatePanel或jQueryAJAX,可能参考用户提到的引用[1]中的内容。 还要注意用户提到的系统指令,比如数学公式的正确格式,但在这个问题中可能用不上。不过需要确保代码块正确,使用正确的语法高亮,比如C#和JavaScript的代码示例。 最后,生成相关问题,可能需要包括如何避免整页刷新、局部刷新的性能优化、如何通过AJAX传递数据等。总结步骤: 1.介绍整页刷新的方法,包括服务器端和客户端方法。 2.介绍局部刷新的方法,如UpdatePanel和jQueryAJAX。 3.提供代码示例,并说明适用场景。4.引用之前的相关内容,如引用[1]中的jQuery AJAX方法。 5.生成相关问题,如局部刷新优化、避免闪烁等。</think>### ASP.NET页面刷新实现方法指南 --- #### 一、整页刷新方法 ##### 1.1 服务器端跳转 ```csharp // 当前页面刷新 Response.Redirect(Request.RawUrl, true); // 强制终止当前请求[^1] // 跨页面跳转 Response.Redirect("~/Default.aspx"); ``` **数学表达**: $$ \text{响应时间} = \frac{\text{页面大小}}{\text{带宽}} + \text{服务器处理时间} $$ ##### 1.2 客户端脚本 ```javascript // 前端JavaScript实现 location.reload(true); // 强制绕过缓存(HTTP GET + Cache-Control: no-cache) ``` ```csharp // C#输出脚本 Response.Write("<script>window.location.href=window.location.href;</script>"); ``` --- #### 二、局部刷新方案 ##### 2.1 UpdatePanel控件 ```xml <!-- ASPX页面代码 --> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel runat="server"> <ContentTemplate> <asp:Label ID="lblTime" runat="server" /> <asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Text="刷新时间" /> </ContentTemplate> </asp:UpdatePanel> ``` ```csharp // 后台代码 protected void btnRefresh_Click(object sender, EventArgs e) { lblTime.Text = DateTime.Now.ToString("HH:mm:ss.fff"); } ``` ##### 2.2 jQuery AJAX实现 ```javascript // 前端脚本 function refreshSection() { $.ajax({ url: "GetData.aspx/GetLatestData", type: "POST", success: function(data) { $('#resultArea').html(data.d); } }); } ``` ```csharp // WebMethod定义 [System.Web.Services.WebMethod] public static string GetLatestData() { return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); } ``` --- #### 三、性能对比分析 | 方法 | 传输数据量 | DOM更新范围 | 适用场景 | |------|------------|-------------|----------| | 整页刷新 | 完整HTML | 全页面 | 数据全面变更 | | UpdatePanel | 增量视图状态 | 指定区域 | 简单局部更新 | | AJAX | JSON/纯文本 | 精确控制 | 复杂交互场景 | **数学表达**: $$ \text{网络负载} = \sum_{i=1}^{n} ( \text{请求头} + \text{响应体} )_i $$ --- #### 四、最佳实践建议 1. **缓存控制**:对静态资源添加版本号 ```html <link href="/css/main.css?v=20230801" rel="stylesheet"> ``` 2. **防重复提交**:按钮禁用策略 ```javascript $('form').submit(function() { $(this).find('input[type=submit]').prop('disabled', true); }); ``` 3. **错误处理**:AJAX全局拦截 ```javascript $.ajaxSetup({ error: function(xhr) { alert('请求失败: ' + xhr.statusText); } }); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值