5

jqueryを実装しblockUIてポップアップし、のポストバック中に進行状況インジケーター（読み込み中の円）を表示したいと思いAsp.Netます。どうすればこれを実装できますか？私は使用してmasterpagesいるので、このコードを1か所に実装して単純にすることができるかどうか疑問に思いました。これも可能ですか？これについてのあなたの考えを聞くのを楽しみにしています。

前もって感謝します。

私はこれを開発することができました。回答に手順を含めました。ご不明な点がございましたら、お気軽にお問い合わせください。

4

3 に答える 3

3

私はそれを自分で理解しました。

  1. 新しいAsp.netWebプロジェクトを作成します。

  2. Site.Masterマークアップに以下を含めます。

    <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script>
<script language="javascript" src="../Scripts/General.js" type="text/javascript"></script>

<style>
  div.blockOverlay {
    background-color: #666;
    filter: alpha(opacity=50) !important;
    -moz-opacity:.50;
    opacity:.50;
    z-index: 200000 !important;
  }
  div.blockPage {
    z-index: 200001 !important;
    position: fixed;
    padding: 10px;
    margin: -38px 0 0 -45px;
    width: 70px;
    height: 56px;
    top: 50%;
    left: 50%;
    text-align: center;
    cursor: wait;
    background: url(ajax-loader.gif) center 30px no-repeat #fff;
    border-radius: 5px;
    color: #666;
    box-shadow:0 0 25px rgba(0,0,0,.75);
    font-weight: bold;
    font-size: 15px;
    border: 1px solid #ccc;
  }
</style>

  3. default.aspxに次のマークアップを追加します。

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button" 
        onclick="Button1_Click" /></ContentTemplate>
</asp:UpdatePanel>

  4. プロジェクトルートに進行状況インジケーター画像（ajax-loader.gif）を追加します

  5. General.jsに以下を追加します

    // BlockUI setup

$.extend({
  // Block ui during ajax post back
  initializeUiBlocking: function () {
    if (typeof ($.blockUI) != 'undefined') {
      $.blockUI.defaults.message = 'LOADING';
      $.blockUI.defaults.overlayCSS = {};
      $.blockUI.defaults.css = {};

      var request = Sys.WebForms.PageRequestManager.getInstance();
      request.add_initializeRequest(function (sender, args) {
        request.get_isInAsyncPostBack() && args.set_cancel(true);
      });
      request.add_beginRequest(function () { $.blockUI(); });
      request.add_endRequest(function () { $.unblockUI(); });
    }
  }
});

$(document).ready(function () {
  $.initializeUiBlocking();
});
于 2012-11-13T20:23:36.473 に答える
1

Have a look at this
http://www.malsup.com/jquery/block/#overview
This works for ajax calls.

And you need to place the following line
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
in a place available to all pages.

于 2012-11-13T13:10:33.347 に答える
0

序章：

データの送信時にページをブロックするには、さまざまなオプションがあります。AjaxベースのUpdateProgressまたはjQueryスタッフを使用できます。ただし、Ajax UpdateProgressは、複雑なためあまり役に立たない場合があります。したがって、より適切なアプローチは、jQueryUIブロックプラグインを使用することです。

実装：

jQueryUIブロックプラグインをhttp://www.malsup.com/jquery/block/からダウンロードします。

<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>

  $("#<%= btnSubmit.ClientID%>").click(function() {

 $.blockUI({ 
                            message: "<h3>Processing, Please Wait...</h3>" ,
                            css: { 
                                border: 'none', 
                                padding: '15px', 
                                backgroundColor: '#000', 
                                '-webkit-border-radius': '10px', 
                                '-moz-border-radius': '10px', 
                                opacity: .5, 
                                color: '#fff' 
                 }  });

});

上記のコードは、AJAXやその他の複雑なスクリプトを含まない単純なコードです。

私はこの記事をウェブサイトで見つけてテストしました、それはうまくいきました

于 2018-05-09T07:57:21.783 に答える