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..
75 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
96 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
90 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
168 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
54 0
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
7月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
134 1