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

How to display a loading image until a gridview is fully loaded without Ajax Toolkit?

提问by DreamTeK

QUESTION

题

Can anyone suggest how a loading image can be displayed until a gridview is fully loaded?

任何人都可以建议如何在网格视图完全加载之前显示加载图像？

This gridview is to be rendered on page load. There must be a simple solution to detect when gridview is loading/loaded so a simple toggle between load image and gridview visibility can be achieved.

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

Please do not suggest using any of the Ajax toolkit methodsunless the desired code can be isolated and used standalone. I have found the toolkit to be easy on implementation but bloated and slow on performance. I do not wish to include any scripts, files or code in my release package that is not going to be used.

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

ASP.NET

ASP.NET

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

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

VB

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

---

---

POSSIBILITIES

可能性

I am open to any suggestions however I was attemting to implement a solution using jquerypage methods but need assistance to follow through.

我愿意接受任何建议，但是我试图使用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

回答by Ali

You can achieve this using jquery, there is a jquery block UI project on github and you could just use that one to block the grid view without using ajax.

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

here is the code you will need to do this, and it' tested and works fine like below:

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

Step 1add these two lines in your page head

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

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

Step 2an extension jquery after the codes above:

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

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

Step 3in my case I bind my grid view using a button , but you could always use any other controls as well:

在我的第 3 步中，我使用 button 绑定我的网格视图，但您也可以始终使用任何其他控件：

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

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

Step 4bind the grid view on button clicked

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

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

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

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

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

and that's it, NO AJAX Toolkit(only jQuery) so the result will be look like this:

就是这样，没有 AJAX 工具包（只有 jQuery）所以结果将是这样的：

---

---

A trick to do the above solution at the page load

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

First of all this is NOTa function on Page_Load event on server side but on the client side ;-)

首先，这不是服务器端的 Page_Load 事件函数，而是客户端的函数；-)

So to achieve this you need to have a hidden control to keep a value on page view-state and also make the same button hidden to trigger it on page load. and a little changes on the extension jQuery above. Done!

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

Step 1.Add the css below to your page header:

步骤 1.将下面的 css 添加到您的页眉：

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

Step 2.Add a hidden field plus make your button hidden like this:

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

Step 3.Make this changes on your extension script like below:

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

That's it! and your button click on the code behind remains the same as before, in this example I only change the name of the button. no code on Page_Load event though.

就是这样！并且你的按钮点击后面的代码和以前一样，在这个例子中我只改变了按钮的名称。虽然没有关于 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();
    }

I hope it helps you.

我希望它能帮助你。

回答by Devesh

As you are not willing to use the ASP.NET Update panel which is designed to handle the kind of requirement you have. Using jquery AJAX and using the web method to update the Grid will not work as you expect because you need to update the viewstate and other information. One of the solution that you can apply is showing the modal dialog box till your page is completed loaded its html which includes your Grid data.

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

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

回答by ashish

You should load grid in another page and call that page in a div on parent page and display required loading image while loading div as per below code:

您应该在另一个页面中加载网格并在父页面上的 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();
    }
  });
});

In LoadGrid.aspx you should load grid by normal C# code. and simply your parent page will call the LoadGrid.aspx and rendered html will display in parent div with loading image...

在 LoadGrid.aspx 中，您应该通过普通的 C# 代码加载网格。并且简单地您的父页面将调用 LoadGrid.aspx 并且渲染的 html 将显示在父 div 中并加载图像...

回答by Robban

I would implement this by using a web api controller that returns the appropriate data and then simply try to load the data on document.ready with jquery. Something along the lines of this (Will be posting the answer in c# but it should be simple enough to translate):

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

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

        return tableData;
     }
  }

To learn more about how to setup a WebApiController in a web forms project, please refer to this article.

要了解有关如何在 Web 表单项目中设置 WebApiController 的更多信息，请参阅本文。

I would implement the HTML something like this:

我会实现这样的 HTML：

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

And the jquery to load the data and present it in the table would look something like this:

加载数据并将其显示在表中的 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>

To tidy the string concatenation of the jQuery up a bit you could use a template like handlebars, but it's not strictly necessary.

要稍微整理一下 jQuery 的字符串连接，您可以使用像handlebars这样的模板，但这并不是绝对必要的。

回答by Saechel

From your code :

从您的代码：

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

回答by jczimm

Use beforeSendin conjunction with successand errorlike so:

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

(provided you have <img id="loader" src="..." />and <img id="error" src="..." />)

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

completefires after successand errorso using both successand errorinstead of completeand errorassures no overlap.

complete之后触发success，error因此使用successanderror而不是completeanderror确保没有重叠。

Hope this was what you were looking for!

希望这就是你要找的！