如何在没有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

你可以使用jquery实现这一点,在github上有一个jquery块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();
    }

就是这样,没有AJAX工具包(只有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();
    }

我希望它对你有所帮助.