如何在没有 Ajax Toolkit 的情况下显示加载图像，直到 gridview 完全加载? [英] How to display a loading image until a gridview is fully loaded without Ajax Toolkit?

问题描述

问题

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

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

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

ASP.NET

 <img src="~/Loading.gif"></img><asp:GridView ID="gv" runat="Server" AutoGenerateColumns="False" EnableModelValidation="False">'内容...</asp:GridView>

VB

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) 处理 Me.Load'连接信息如果不是 IsPostBack 那么Me.Bindgv()万一结束子私有子绑定v()'加载网格视图结束子

<小时>

可能性

我愿意接受任何建议，但我试图使用 jquery 页面方法实施解决方案，但需要帮助才能完成.

JAVASCRIPT

$(function() {$.ajax({类型:POST"，url: "Default.aspx/UpdateGV",数据: "{}"，内容类型:应用程序/json"，数据类型:json"，成功:函数(){//运行返回方法.}});});

VB.NET

导入 System.Web.Services公共部分类_默认继承 System.Web.UI.Page<WebMethod(EnableSession := False)>_公共共享函数 UpdateGV() 作为字符串返回Me.Bindgv()结束函数结束班

解决方案

您可以使用 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>

Step 2 上面代码之后的扩展jquery:

<块引用>

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

<块引用>

<asp:Button ID="Button1" runat="server" Text="绑定网格视图"ClientIDMode="静态" OnClick="Button1_Click"/><div class="blockMe"><asp:GridView ID="GridView1" runat="server" Width="100%"></asp:GridView>

第 4 步在点击按钮时绑定网格视图

<块引用>

 protected void Button1_Click(object sender, EventArgs e){数据表 tblCourse = myAccount.GetEnroledCourse("arpl4113");//绑定课程GridView1.DataSource = tblCourse;GridView1.DataBind();}

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

<小时>

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

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

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

第 1 步.将下面的 css 添加到您的页眉:

 <样式>.hidden { 显示:无；} </style>

第 2 步. 添加一个隐藏字段并像这样隐藏您的按钮:

 <asp:HiddenField ID="hidTrigger" runat="server" ClientIDMode="Static" Value=""/><asp:Button ID="btnHidden" runat="server" ClientIDMode="静态"OnClick="btnHidden_​​Click" CssClass="隐藏"/><div class="blockMe"><asp:GridView ID="GridView1" runat="server"></asp:GridView>

第 3 步.对您的扩展脚本进行如下更改:

就是这样！并且你的按钮点击后面的代码和以前一样，在这个例子中我只改变了按钮的名称.但是没有关于 Page_Load 事件的代码.

 protected void Page_Load(object sender, EventArgs e){}protected void btnHidden_​​Click(object sender, EventArgs e){数据表 tblCourse = myAccount.GetEnroledCourse("arpl4113");//绑定课程GridView1.DataSource = tblCourse;GridView1.DataBind();}

希望能帮到你.

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.

Please do not suggest using any of the Ajax toolkit methods unless 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.

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

---

POSSIBILITIES

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

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

解决方案

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.

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

Step 1 add these two lines in your page head

  <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 an extension jquery after the codes above:

<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 in my case I bind my grid view using a button , but you could always use any other controls as well:

<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 bind the grid view on button clicked

    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:

---

A trick to do the above solution at the page load

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

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!

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

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

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

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

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

    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.

这篇关于如何在没有 Ajax Toolkit 的情况下显示加载图像，直到 gridview 完全加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！