QUESTION

谁能建议如何在 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页方法，但需要帮助才能完成。

脚本语言

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

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

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

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

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

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

Step 4将网格视图绑定到单击的按钮上

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

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

就是这样，没有 AJAX 工具包（仅限 jQuery）所以结果将如下所示：

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

首先这是NOTPage_Load 事件上的函数位于服务器端但位于客户端;-)

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

Step 1.将下面的 css 添加到页面标题中：

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

Step 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.在您的扩展脚本上进行此更改，如下所示：

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

我希望它对你有帮助。