如何在没有 Ajax Toolkit 的情况下显示加载图像直到 gridview 完全加载？

Posted 2023-02-22

技术标签:

【中文标题】如何在没有 Ajax Toolkit 的情况下显示加载图像直到 gridview 完全加载？【英文标题】：How to display a loading image until a gridview is fully loaded without Ajax Toolkit? 【发布时间】：2014-07-26 16:13:31 【问题描述】：

问题

谁能建议如何在网格视图完全加载之前显示加载图像？

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

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

ASP.NET

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

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

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    'connection info

    If Not IsPostBack Then
      Me.Bindgv()
    End If
  End Sub


  Private Sub Bindgv()
    'Load gridview
  End Sub

可能性

我愿意接受任何建议，但我正在尝试使用 jquery 页面方法实施解决方案，但需要帮助才能完成。

JAVASCRIPT

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

VB.NET

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

【问题讨论】：

什么是 GridView 在 html 中呈现：表格 HTML 元素？请您详细说明一下？不知道你在问什么。没有 AJAX 工具包，所以这是不可能的？ ***.com/questions/2813590/… 使用jQuery 可以在您的AJAX 调用达到complete 状态时隐藏图像。 api.jquery.com/jquery.ajax 不太确定 GridView 会在同一时间准备好。如果 gridview 加载很重，为什么要在 Page_Load 上加载它？我会将其移至返回数据的简单 Web api 控制器，在 document.ready 上进行 ajax 调用并等待该 ajax 调用完成以呈现数据。 【参考方案1】：

来自您的代码：

$(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");
    
  );
);

【讨论】：

【参考方案2】：

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

这是您执行此操作所需的代码，它经过测试并且工作正常，如下所示：

第 1 步在页面标题中添加这两行

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.io/jquery.blockUI.js"></script>

第 2 步在上述代码之后的扩展 jquery：

<script type="text/javascript">
    $(document).ready(function () 
        $('#Button1').click(function () 
            $('.blockMe').block(
                message: 'Please wait...<br /><img src="Images/loadingBar.gif" />',
                css:  padding: '10px' 
            );
        );
    );
</script>

第 3 步在我的例子中，我使用按钮绑定我的网格视图，但您也可以随时使用任何其他控件：

<asp:Button ID="Button1" runat="server" Text="Bind Grid View" 
            ClientIDMode="Static" OnClick="Button1_Click" />
    <div class="blockMe">
        <asp:GridView ID="GridView1" runat="server" Width="100%">
        </asp:GridView>
    </div>

第 4 步在单击按钮时绑定网格视图

    protected void Button1_Click(object sender, EventArgs e)
    
        DataTable tblCourse = myAccount.GetEnroledCourse("arpl4113");

        //Bind courses
        GridView1.DataSource = tblCourse;
        GridView1.DataBind();

就是这样，NO AJAX Toolkit（仅限 jQuery）所以结果将如下所示：

在页面加载时执行上述解决方案的技巧

首先，这不是在服务器端但在客户端的 Page_Load 事件上的函数 ;-)

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

第 1 步。 将下面的 css 添加到您的页眉：

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

第 2 步。 添加一个隐藏字段并像这样隐藏您的按钮：

    <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>

第 3 步。 对您的扩展脚本进行如下更改：

  <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>

就是这样！并且你的按钮点击后面的代码和以前一样，在这个例子中我只更改了按钮的名称。但 Page_Load 事件上没有代码。

    protected void Page_Load(object sender, EventArgs e)
    

    

    protected void btnHidden_Click(object sender, EventArgs e)
    
        DataTable tblCourse = myAccount.GetEnroledCourse("arpl4113");

        //Bind courses
        GridView1.DataSource = tblCourse;
        GridView1.DataBind();

希望对你有帮助。

【讨论】：

这看起来不错。一旦我有机会测试它，我会给你反馈。感谢您简洁明了的回答。这是一个不错的选择，但是我有一个问题。当我将其更改为在页面加载时运行时，它仍处于加载状态。你能显示页面加载的代码吗？（我唯一的改变是删除 $('#Button1').click(function () ); Gridview 绑定 onload 没有脚本）。好的，首先你应该知道除非你有部分页面回发（AJAX），否则这不可能发生，因为“除非你的页面完全加载，否则你看不到加载区域”。但是使用上述解决方案有一个技巧可以让用户获得与您想要的相同的感觉。我会为你将它添加到上面的代码中。【参考方案3】：

您应该在另一个页面中加载网格并在父页面的 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 中并带有加载图像...

【讨论】：

【参考方案4】：

将beforeSend 与success 和error 结合使用，如下所示：

$(function() 
  $.ajax(
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "",
    contentType: "application/json",
    dataType: "json",
    beforeSend: function() 
        $("#loader").show();
    ,
    success: function() 
        $("#loader").hide();
        // Run return method.
    ,
    // it's good to have an error fallback
    error: function(jqhxr, stat, err) 
       $("#loader").hide();
       $("#error").show();
    
  );
);

（前提是您有<img id="loader" src="..." /> 和<img id="error" src="..." />）

complete 在success 和error 之后触发，因此同时使用success 和error 而不是complete 和error 可以确保没有重叠。

希望这就是你要找的东西！

【讨论】：

【参考方案5】：

我将通过使用返回适当数据的 web api 控制器来实现这一点，然后简单地尝试使用 jquery 将数据加载到 document.ready 上。与此类似的东西（将在 c# 中发布答案，但它应该足够简单以便翻译）：

 public class TableDataController : ApiController
  
     public IEnumerable<SimplePocoForOneTableRow> Get()
     
        var tableData = GetTableDataFromSomewhere();

        return tableData;

要详细了解如何在 Web 表单项目中设置 WebApiController，请参阅this article。

我会像这样实现 HTML：

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

加载数据并将其呈现在表中的 jquery 看起来像这样：

<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 的字符串连接，您可以使用像 handlebars 这样的模板，但这并不是绝对必要的。

【讨论】：

【参考方案6】：

因为您不愿意使用 ASP.NET 更新面板，该面板旨在处理您的需求。使用 jquery AJAX 和使用 web 方法更新 Grid 将无法按预期工作，因为您需要更新 viewstate 和其他信息。您可以应用的解决方案之一是显示模式对话框，直到您的页面完成加载其包含您的网格数据的 html。

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

【讨论】：

大多数 .NET 程序员已经知道如何通过使用 AJAX 工具包的 ASP.NET 更新面板来做到这一点。这个问题完全是在没有这个工具的情况下如何做到这一点。如果我们可以只提取完成此任务所需的脚本，而不必包含大量臃肿的代码，那么这可能是一种可能性。至于您的其他建议：这更符合所需效果，但是这将为整个页面而不是孤立的网格视图创建加载图像。

以上是关于如何在没有 Ajax Toolkit 的情况下显示加载图像直到 gridview 完全加载？的主要内容，如果未能解决你的问题，请参考以下文章

如何在没有 AJAX 的情况下在 Rails 客户端过滤数据

如何在没有提交事件的情况下显示 setCustomValidity 消息/工具提示

如何在不使用 ajax 刷新的情况下在我的页面上显示我的 php 响应？

如何在没有 ajax 的情况下发送 POST 请求

如何在不刷新html页面的情况下在表格上显示数据（使用nodejs和mysql ajax）

如何在没有新请求的情况下修改 ajax src 属性？