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

Question

问题

谁能建议在 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>

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

您可以使用 jquery 实现这一点，在 github 上有一个 jquery block UI 项目，您可以只使用它来阻止 GridView 而不使用 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 步 在我的例子中，我使用按钮绑定(bind)我的 GridView ，但您也可以随时使用任何其他控件:

<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 步在单击的按钮上绑定(bind) GridView

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

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

就是这样，没有 AJAX 工具包(只有 jQuery)所以结果看起来像这样:

---

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

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

因此，要实现这一点，您需要有一个隐藏的控件来在页面 View 状态上保留一个值，并隐藏相同的按钮以在页面加载时触发它。并对上面的扩展 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();
    }

希望对你有帮助。