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

Question

问题

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

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

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

ASP.NET

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

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

VB

  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

Answer 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");
    }
  });
});

Answer 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();
    }

希望对你有帮助。

Answer 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 中并带有加载图像...

Answer 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 可以确保没有重叠。

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

Answer 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 这样的模板，但这并不是绝对必要的。

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