Question

我希望如果我的文本框为空，则字段验证器显示错误消息，如果文本框不为空，则在按钮单击时加载页面会冻结。

ASPX代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <style type="text/css">

        .modal
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }    
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("submit", function (){
            ShowProgress();
        });
    </script>
    <asp:Label ID="Label1" runat="server" Text="Roll No : "></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ControlToValidate="TextBox1" ErrorMessage="*"></asp:RequiredFieldValidator>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
    </div>
    </asp:Content>

我正在使用visual studio 2010 ASP.Net/C＃

Answer 1

您可以尝试jQuery BlockUI

的页面阻止功能

我将它与ASP.Net UpdatePanel结合使用，因此我可以在每次回发时阻止ui。

<!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 runat="server">
   <title></title>
   <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
    try {

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
    } catch (e) {

    }

    function beginRequest(sender, args) {

        $.blockUI({
            message: $("<div>Please wait...loading!!!</div>"),
            overlayCSS: { backgroundColor: '#00FFFF' }
        });
    }

    function endRequest(sender, args) {
        $.unblockUI();
    }
</script>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Test with this" /></ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Answer 2

我的方法与其他答案类似，但我没有使用BlockUI插件。

首先，我在CSS文件中创建了不可见叠加层：

#page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

然后，我添加了Javascript代码：

var PageRequestManager = Sys.WebForms.PageRequestManager.getInstance();

function BlockUI(sender, args) {
    jQuery('<div id="page-overlay"> </div>').appendTo(document.body);
}

function UnblockUI(sender, args) {
    jQuery('#page-overlay').remove();
}

PageRequestManager.add_beginRequest(BlockUI);
PageRequestManager.add_endRequest(UnblockUI);

而且，瞧，它有效！

页面加载时冻结背景页面

2 个答案: