Javascript 在没有Ajax工具包的情况下，如何在gridview完全加载之前显示加载图像？

问题

有人能建议在gridview完全加载之前如何显示加载的图像吗

此gridview将在页面加载时呈现。必须有一个简单的解决方案来检测何时加载/加载gridview，以便在加载图像和gridview可见性之间实现简单的切换

请不要建议使用任何Ajax工具包方法，除非所需的代码可以被隔离并独立使用。我发现该工具包易于实现，但臃肿且性能缓慢。我不希望在我的发布包中包含任何不会被使用的脚本、文件或代码

ASP.NET

      <img src="~/Loading.gif"></img>

      <asp:GridView ID="gv" runat="Server" AutoGenerateColumns="False" EnableModelValidation="False">
        'content...
      </asp:GridView>

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    success: function() {
      // Run return method.
    }
  });
});

Imports System.Web.Services

Public Partial Class _Default
    Inherits System.Web.UI.Page

    <WebMethod(EnableSession := False)> _
    Public Shared Function UpdateGV() As String
         Return 
         Me.Bindgv()
    End Function
End Class

---

可能性 我愿意接受任何建议，但是我试图使用jquery页面方法实现一个解决方案，但需要帮助才能完成

JAVASCRIPT

      <img src="~/Loading.gif"></img>

      <asp:GridView ID="gv" runat="Server" AutoGenerateColumns="False" EnableModelValidation="False">
        'content...
      </asp:GridView>

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    success: function() {
      // Run return method.
    }
  });
});

Imports System.Web.Services

Public Partial Class _Default
    Inherits System.Web.UI.Page

    <WebMethod(EnableSession := False)> _
    Public Shared Function UpdateGV() As String
         Return 
         Me.Bindgv()
    End Function
End Class

VB.NET

      <img src="~/Loading.gif"></img>

      <asp:GridView ID="gv" runat="Server" AutoGenerateColumns="False" EnableModelValidation="False">
        'content...
      </asp:GridView>

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    success: function() {
      // Run return method.
    }
  });
});

Imports System.Web.Services

Public Partial Class _Default
    Inherits System.Web.UI.Page

    <WebMethod(EnableSession := False)> _
    Public Shared Function UpdateGV() As String
         Return 
         Me.Bindgv()
    End Function
End Class

导入System.Web.Services
公共部分类\u默认值
继承System.Web.UI.Page
_
作为字符串的公共共享函数UpdateGV（）
返回
Me.Bindgv（）
端函数
末级

因为您不愿意使用ASP.NET更新面板，该面板专为处理您的需求而设计。使用jqueryajax和使用web方法更新网格不会像您预期的那样工作，因为您需要更新viewstate和其他信息。您可以应用的解决方案之一是显示模式对话框，直到页面加载完毕，并加载包含网格数据的html

              <script type = "javascript/text">
              $(document).ready(function() { // show modal dialog });
              $(window).load(function() {// hide the dialog box});
              </script> 

$（文档）.ready（函数（）{//show modal dialog}）；
$（窗口）.load（函数（）{//隐藏对话框}）；

您可以使用jquery实现这一点，github上有一个jquery block UI项目，您可以使用该项目来阻止网格视图，而不使用ajax

以下是执行此操作所需的代码，它经过测试，运行良好，如下所示：

  <script type="text/javascript">
    $(document).ready(function () {

        //check whether the gridview has loaded
        if ($("#hidTrigger").val() != "fired") {

            //set the hidden field as fired to prevent multiple loading
            $("#hidTrigger").val("fired");

            //block the gridview area
            $('.blockMe').block({
                message: 'Please wait...<br /><img src="Images/loadingBar.gif" />',
                css: { padding: '10px' }
            });

            //fire the hidden button trigger
            $('#btnHidden').click();
        }
    });
</script>

步骤1在页眉中添加这两行

就是这样，没有AJAX工具包（只有jQuery），因此结果如下所示：

    <asp:HiddenField ID="hidTrigger" runat="server" ClientIDMode="Static" Value="" />
    <asp:Button ID="btnHidden" runat="server" ClientIDMode="Static" 
                OnClick="btnHidden_Click" CssClass="hidden" />
    <div class="blockMe">
        <asp:GridView ID="GridView1" runat="server"></asp:GridView>
    </div>

<table class="tableToLoadStuffInto">
   <tr>
       <td><img src="yourCoolSpinningAjaxLoader.gif" /></td>
   <tr>
</table>

<script type="text/javascript">
$(document).ready(function () {
    jQuery.ajax({
            url: '/api/TableData',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
            if(!result) {
                //Show some error message, we didn't get any data
            }                    

            var tableData = JSON.parse(result);
            var tableHtml = '';
            for(var i = 0; i<tableData.length; i++){
                    var tableRow = tableData[i];
                    tableHtml = '<tr><td>' + 
                    tableRow.AwesomeTablePropertyOnYourObject +
                    '</td></'tr>'
               }    
             var table = $('.tableToLoadStuffInto');
             //Could do some fancy fading and stuff here
             table.find('tr').remove();
             table.append(tableHtml);
            }
        });
});
</script>

---

在页面加载时执行上述解决方案的技巧 首先，这不是服务器端而是客户端的页面加载事件上的函数；-）

因此，要实现这一点，您需要有一个隐藏控件来保持页面视图状态上的值，并使相同的按钮隐藏以在页面加载时触发它。对上面的扩展jQuery做了一些修改。完成了

第1步。将下面的css添加到页面标题中：

 <style> .hidden { display: none; } </style>

---

我希望它能对您有所帮助。

我将通过使用web api控制器来实现这一点，该控制器返回适当的数据，然后简单地尝试将数据加载到document.ready with jquery上。大致如下（将用c#发布答案，但应该足够简单，可以翻译）：

公共类TableDataController:ApicController
{
公共IEnumerable Get（）
{
var tableData=gettabledatafromwhere（）；
返回表格数据；
}
}

要了解有关如何在web窗体项目中设置WebApicController的详细信息，请参阅

我将实现类似以下内容的HTML：

    <asp:HiddenField ID="hidTrigger" runat="server" ClientIDMode="Static" Value="" />
    <asp:Button ID="btnHidden" runat="server" ClientIDMode="Static" 
                OnClick="btnHidden_Click" CssClass="hidden" />
    <div class="blockMe">
        <asp:GridView ID="GridView1" runat="server"></asp:GridView>
    </div>

<table class="tableToLoadStuffInto">
   <tr>
       <td><img src="yourCoolSpinningAjaxLoader.gif" /></td>
   <tr>
</table>

<script type="text/javascript">
$(document).ready(function () {
    jQuery.ajax({
            url: '/api/TableData',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
            if(!result) {
                //Show some error message, we didn't get any data
            }                    

            var tableData = JSON.parse(result);
            var tableHtml = '';
            for(var i = 0; i<tableData.length; i++){
                    var tableRow = tableData[i];
                    tableHtml = '<tr><td>' + 
                    tableRow.AwesomeTablePropertyOnYourObject +
                    '</td></'tr>'
               }    
             var table = $('.tableToLoadStuffInto');
             //Could do some fancy fading and stuff here
             table.find('tr').remove();
             table.append(tableHtml);
            }
        });
});
</script>

加载数据并将其显示在表中的jquery如下所示：

    <asp:HiddenField ID="hidTrigger" runat="server" ClientIDMode="Static" Value="" />
    <asp:Button ID="btnHidden" runat="server" ClientIDMode="Static" 
                OnClick="btnHidden_Click" CssClass="hidden" />
    <div class="blockMe">
        <asp:GridView ID="GridView1" runat="server"></asp:GridView>
    </div>

<table class="tableToLoadStuffInto">
   <tr>
       <td><img src="yourCoolSpinningAjaxLoader.gif" /></td>
   <tr>
</table>

<script type="text/javascript">
$(document).ready(function () {
    jQuery.ajax({
            url: '/api/TableData',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
            if(!result) {
                //Show some error message, we didn't get any data
            }                    

            var tableData = JSON.parse(result);
            var tableHtml = '';
            for(var i = 0; i<tableData.length; i++){
                    var tableRow = tableData[i];
                    tableHtml = '<tr><td>' + 
                    tableRow.AwesomeTablePropertyOnYourObject +
                    '</td></'tr>'
               }    
             var table = $('.tableToLoadStuffInto');
             //Could do some fancy fading and stuff here
             table.find('tr').remove();
             table.append(tableHtml);
            }
        });
});
</script>

$（文档）.ready（函数（）{
jQuery.ajax({
url:“/api/TableData”，
键入：“GET”，
contentType:'application/json；charset=utf-8'，
成功：功能（结果）{
如果（！结果）{
//显示一些错误消息，我们没有获得任何数据
}                    
var tableData=JSON.parse（结果）；
var tableHtml=''；
对于（var i=0；i=0）
}    
变量表=$（'.tableToLoadStuffInto'）；
//我可以在这里做一些花式的褪色之类的
table.find（'tr'）.remove（）；
table.append（tableHtml）；
}
});
});

要稍微整理jQuery的字符串连接，可以使用类似的模板，但这不是严格必要的。

代码：

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    success: function() {
      // Run return method.
    },
    // add these lines
    beforeSend:function {
       //this will show your image loader
       $("$Loader").css("display","block");
    },
    complete:function {
       //this will hide your image loader provided that you give an id named Loader to your image
       $("$Loader").css("display","none");
    }
  });
});

---

在发送前使用

beforesed

与

success

和

error

类似：

$（函数（）{
$.ajax({
类型：“POST”，
url:“Default.aspx/UpdateGV”，
数据：“{}”，
contentType:“应用程序/json”，
数据类型：“json”，
beforeSend:function（）{
$（“#加载程序”）.show（）；
},
成功：函数（）{
$（“#加载程序”）.hide（）；
//运行返回方法。
},
//有一个错误回退是很好的
错误：函数（jqhxr、stat、err）{
$（“#加载程序”）.hide（）；
$（“#错误”）.show（）；
}
});
});

（前提是您有

和

）

complete

在

success

和

error

之后触发，因此使用

success

和

error

而不是

complete

和

error

可以确保没有重叠

---

希望这就是您正在寻找的！您应该在另一个页面中加载网格，并在父页面的div中调用该页面，并在加载div时显示所需的加载图像，如下代码所示：

  $(document).ready(function()
   {
 $("#loader").show();
 $.ajax({
    type: "GET",
    url: "LoadGrid.aspx",
    data: "{}",
    contentType: "application/json",
    dataType: "json",   
    success: function(data) {
        $("#loader").hide();
       $(#dvgrid).html(data);
    },
    // it's good to have an error fallback
    error: function(jqhxr, stat, err) {
       $("#loader").hide();
 $(#dvgrid).html('');
       $("#error").show();
    }
  });
});

---

在LoadGrid.aspx中，您应该使用普通的C代码加载网格。您的父页面将调用LoadGrid.aspx，呈现的html将显示在父div中，并加载图像…

在html:Table HtmleElement中GridView呈现的是什么？请详细说明？不确定您在问什么。没有AJAX工具包，因此这是不可能的？使用jQuery当AJAX调用达到

complete

状态时，可以隐藏图像。但不确定

GridView

是否已准备就绪