GridViewAddUpdateDelete_Ajax with jquery.blockUI

简介:

曾祥展

 

一个外层div  ScriptManager1 UpdatePanel1  GridView1

Triggers

html:

         <div id="dvGrid" style="padding:10px;width:550px">
          
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            
              <ContentTemplate>
              
                <asp:GridView ID="GridView1" runat="server" >
                
                ………    
               </asp:GridView>
                
              </ContentTemplate>
              
              
              <Triggers>
                <asp:AsyncPostBackTrigger ControlID="GridView1" />
              </Triggers>
              
            </asp:UpdatePanel>
            
          </div>
js:
<script type="text/javascript" src="js/jquery-1.3.2.min.js">  </script>
     <script type="text/javascript" src="js/jquery.blockUI.js">    </script>
     <script type="text/javascript">
       function BlockUI(elementID) {

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

         prm.add_beginRequest(function() {

           $("#" + elementID).block({
             message: '<table align = "center"><tr><td>' + '<img src="js/loading.gif"/></td></tr></table>',

             css: {},

             overlayCSS: {
               backgroundColor: '#000000',
               opacity: 0.6,
               border: '3px solid #63B2EB'

             }
           });
         });

         prm.add_endRequest(function() {
           $("#" + elementID).unblock();
         });
       }
       $(document).ready(function() {

         BlockUI("dvGrid");

         $.blockUI.defaults.css = {};

       });

</script>


本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2009/12/23/1630332.html,如需转载请自行联系原作者

相关文章
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
69 1
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
88 0
|
7月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
81 0
|
7月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
XML JSON 前端开发
jQuery中的Ajax
jQuery中的Ajax
114 0
|
XML JSON JavaScript
jQuery 中的AJAX
jQuery 中的AJAX
82 0
|
JSON 前端开发 JavaScript
jQuery中 ajax的使用
jQuery中 ajax的使用
112 0
|
XML JSON 前端开发
jQuery(二) jQuery对Ajax的使用
学习使我快乐!嘿
157 0
|
JSON JavaScript 前端开发
Jquery 中Ajax使用的四种情况
         $(document).ready(function(){   //Jquery 页面加载事件,当页面加载之后首先执行这个方法                  //第一种Ajax请求         $.
851 0