65.9K
CodeProject 正在变化。 阅读更多。
Home

Postback 期间覆盖/限制用户

WaqasYousuf
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (2投票s)

2011 年 5 月 12 日

CPOL

3分钟阅读

viewsIcon

41563

downloadIcon

1161

简单的覆盖层，用于限制 postback 期间的用户操作。

引言

在过去几个月中，我一直在做一个即将结束的项目，并获得了一些新的经验。我想在这里分享我的一个经验，它可能很简单，但非常值得分享。

大多数时候，我们需要在 postback 期间限制用户，否则用户仍然可以单击页面上的另一个链接或按钮。这在传统网站中可能不太重要，但如果我们的 Web 应用程序中，每次单击都负责执行复杂的计算或过程，为了完成复杂的过程，页面需要一些时间。开发人员需要阻止用户执行任何其他可点击的操作。我认为我们有多种选择来处理这个问题，以下是一些显示如何操作的链接：

我遇到了限制用户的问题，并制作了一个适合我项目的小技巧。我做了一个简单的 DIV，它在 postback 期间显示一个动画 gif 图像。在我的例子中，我没有使用任何 ASP.NET 验证控件和 UpdatePanel 进行 Ajax，我使用 JQuery 完成了所有的验证和 Ajax，因为我不想在应用程序中添加任何 ASP.NET 生成的 JavaScript 外部文件。

在这里，我制作了一个小的示例，用于在 postback 期间进行覆盖。

我创建了一个 ASP.NET 空 Web 应用程序，并添加了一个 *SamplePage.aspx*。该页面包含标记和外部 CSS、Jquery 库和 JavaScript 文件的链接。

<%@ Page Language=”C#” AutoEventWireup=”true” 
    CodeBehind=”SamplePage.aspx.cs” Inherits=”Overlay.SamplePage1? %>
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” 
   ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1? runat=”server”>
<title>overlay</title>
<link href=”Styles/style.css” rel=”Stylesheet” type=”text/css” />
<script type=”text/javascript” src=”Scripts/jquery-1.4.1.min.js”></script>
<script type=”text/javascript” src=”Scripts/script.js”></script>
</head>
<body onunload=”">
<form id=”form1? runat=”server”>
<div>
<asp:LinkButton ID=”LinkButton1? runat=”server” 
    onclick=”LinkButton1_Click” >Click Link</asp:LinkButton><br />
<asp:Button ID=”Button1? runat=”server” Text=”Click Submit” onclick=”Button1_Click” />
</div>
</form>
</body>
</html>

位于 *Style* 文件夹中的 *style.css* 包含以下 CSS 代码，用于覆盖 div：

#overlay {
         display: none;
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         cursor:wait;
         background: #041128;
         z-index:50;
         opacity: 0.5;
         -ms-filter: "alpha (opacity=50)";
         filter: alpha (opacity=50);
}

#overlay img {
    position:relative;    
    left:50%; 
    top:50%;
    z-index:100;    
}

这里是 Internet Explorer 浏览器（IE7 和 IE8）的过滤器属性，因为 Internet Explorer（IE7 和 IE8）不支持 CSS 的 Opacity 属性，因此我们需要放置 IE 过滤器属性使其成为可能。

现在是添加一些 JavaScript 的时候了。

位于 *Script* 文件夹中的 *script.js* 包含以下代码：

jQuery(function ($) {

    $("<div id='overlay'><img src='Styles/images/ajax-loader.gif' 
              alt='loading image' /></div>").appendTo('body');

    $('body a').each(function () {
        $(this).addClass('is-overlay');
    });

    $('body input[type=submit]').each(function () {
        $(this).addClass('is-overlay');
    });

    $('.is-overlay').bind('click', function () {
        setTimeout(ShowOverlay, 1);
    });
});

function ShowOverlay() {
    $('#overlay').show();
}

以下是上述脚本的一些描述：

$(“<div id=’overlay’><img src=’Styles/images/ajax-loader.gif’ 
             alt=’loading image’ /></div>”).appendTo(‘body’)

我们创建了一个覆盖 div 对象，并使用 jQuery appendTo 方法将 div 添加到页面上。

$('body a').each(function () {
    $(this).addClass('is-overlay');
});

$('body input[type=submit]').each(function () {
    $(this).addClass('is-overlay');
);

这些方法用于在页面的每个 **‘a’** 标签和 **‘input type submit’** 按钮上添加 is-overlay 类。

$('.is-overlay').bind('click', function () {
     setTimeout(ShowOverlay, 1);
});

现在我们必须将 click 事件附加到 is-overlay 类。你可能想知道为什么我在这里添加了 setTimeout JavaScript 函数。我没有直接显示覆盖 div，答案是如果我们直接调用 jQuery Show 方法，那么 IE（IE7 和 IE8）会显示加载的静态图像，所以这是一种在 post-back 期间在 IE 上动画图像的方法。

现在还有一个问题，大多数现代浏览器 Firefox 和 Safari 会缓存页面，一旦我们单击页面并且新页面已加载。然后，如果您单击后退按钮，覆盖 div 将仍然存在，尤其是在 Firefox 和 Safari 中，因此这里有一种解决方法，只需在页面 body 上添加 onUnload=”” 属性即可。

我并不是说这是最好的方法，但这是适合我情况的解决方案之一，而且不仅仅适用于 ASP.NET，我认为它也可以在其他语言中使用。

我希望你喜欢这篇文章。请分享您宝贵的反馈和意见，以便我可以编写更多有效的内容。

历史

  • 2011 年 5 月 12 日：初始发布
© . All rights reserved.