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,如需转载请自行联系原作者

目录
打赏
0
0
0
0
52
分享
相关文章
|
11月前
|
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
83 0
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
100 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`.get().post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
207 1
jQuery实现Ajax
jQuery实现Ajax
N..
115 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等