单击 asp 按钮显示加载面板答案

【问题标题】：Show loading panel on click of asp button单击 asp 按钮显示加载面板
【发布时间】：2011-12-19 06:22:52
【问题描述】：

我有我的 asp 按钮，我正在验证一些数据，然后触发它的服务器端功能，它工作正常，看起来像这样

<asp:Button CssClass="btnRequestFile" ID="btnSave" runat="server" Text="Request"
                            OnClientClick="if(clientValidate() == false) return false;" OnClick="btnSave_Click" />

所以在我的客户端功能上，我想显示一个加载面板，但加载面板直到有一些警报被触发时才会出现这里是我的代码：

function clientValidate() {
    // $("#IDData").html('');
    $.loading({ align: 'center', delay: 0, img: '../common/Content/images/shared/sq_loader_3.gif', onAjax: false, pulse: false });
    $("#divLoadingImg").show();
    alert("dfhdfh");
    var isValid = false;
    var objectData = null;

    var liTags = $('#' + secondContainer).find('li');
    if (liTags.length == 0) {
        alert('Please select at least one question !');
    }
    else {
        if (SaveConfiguration()) {
            //alert('error occurred');
        }
        else {
            //alert('error free');

            isValid = true;
        }
    }

    $("#divLoadingImg").hide();
    $.loading(false);
    return isValid;
}

我正在使用 jquery.loading.min.js 来显示加载面板它不起作用我也尝试在标记中放置一个 div 并将其显示为加载但无济于事任何建议如何完成。

【问题讨论】：

标签： javascript jquery jquery-plugins dom-events

【解决方案1】：

 <head>
        <script type="text/javascript">

        document.onload=hide_loading_div();

        function show_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'visible';
        }

        function hide_loading_div(){
          var my_loading_div = document.getElementById('the_loading_div');
          my_loading_div.style.visibility = 'hidden';
        }
    </script>

    <style type="text/css">

        .class_of_the_loading_div{
            position:fixed;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background-color: rgba(0,0,0,0.75);
            text-align:center;           
        }
    </style>


</head>

<body onload="hide_loading_div()">

   Some elements, grids, buttons etc..

   <asp:Button ID="btn_something" runat="server" Text="A Button" OnClientClick="show_loading_div()" OnClick="btn_something_Click" />

  <div class="class_of_the_loading_div">
    Write here LOADING or put a loading gif...
  </div>
</body>

解释：

加载面板在开始时可见（页面正在初始化）
第一次初始化后，document.onload=hide_loading_div(); 代码隐藏面板。
当你点击Asp按钮时，JS代码首先被触发，并再次显示面板。然后 C# 代码运行并在后台执行一段时间。
回发完成后，html body隐藏面板，因为你写<body onload="hide_loading_div()">
你微笑，因为你快乐。

注意：如果您只想使用诸如加载 div 之类的面板阻止页面的一部分，则容器 div（将“变暗”）必须具有 `position:relative;'属性和拦截器 div 必须具有“位置：绝对”属性（不固定）。

【讨论】：

【解决方案2】：

放置一个潜水器“sonu”并给它一些id

并在 jquery 中写入；

<script type="text/javascript">
    $(document).ready(function () {
$("#div1").hide();
function clientValidate() {

$("#div1").show("slow");
});
});
</script>

将您的 loding gif 放入潜水中

【讨论】：