如何显示加载图像，直到一个gridview而不Ajax工具包满载？ [英] How to display a loading image until a gridview is fully loaded without Ajax Toolkit?

问题描述

问

任何人都可以提出一个加载图像如何显示，直到一个GridView满载？

这是GridView的页面加载到被渲染。必须有一个简单的解决方案时，GridView控件加载/加载，以便可以实现负载的形象和知名度的GridView之间简单的切换来检测。

请不要建议使用任何的Ajax工具包方法除非所需code可以被分离并独立使用。我发现该工具包，能够轻松实现，但臃肿和缓慢的性能。我不希望包括任何脚本，文件或code在我的发布包是不会被使用。

ASP.NET

 ＆LT; IMG SRC =〜/ Loading.gif＆GT;＆LT; / IMG＆GT;      ＆LT; ASP：GridView控件ID =GV=服务器的AutoGenerateColumns =FALSEEnableModelValidation =FALSE＆GT;
        '内容...
      ＆LT; / ASP：GridView的＆GT;
 

VB

 保护小组的Page_Load（BYVAL发件人为对象，BYVAL E上System.EventArgs）把手Me.Load
    连接信息    如果没有的IsPostBack然后
      Me.Bindgv（）
    万一
  结束小组
  私人小组Bindgv（）
    加载的GridView
  结束小组
 

---

可能性

我愿意接受任何建议，但是我用attemting实现解决方案的的jQuery 页方法，但需要协助跟进。

JAVASCRIPT

  $（函数（）{
  $阿贾克斯（{
    键入：POST，
    网址：Default.aspx的/ UpdateGV
    数据：{}，
    的contentType：应用/ JSON
    数据类型：JSON
    成功：函数（）{
      //运行回归方法。
    }
  }）;
}）;
 

VB.NET

 导入System.Web.Services公共部分类_Default
    继承System.Web.UI.Page    ＆所述;的WebMethod（EnableSession：=假）GT; _
    公共共享功能UpdateGV（）作为字符串
         返回
         Me.Bindgv（）
    结束功能
末级
 

解决方案

您可以做到这一点使用jQuery，有在github一个jQuery块UI项目，你可以只使用一个阻止网格视图，而无需使用AJAX。

这里是code，你需要做到这一点，它的测试，工作正常，象下面这样：

第1步在页面头部加两行

 ＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
  ＆所述; SCRIPT SRC =htt​​p://malsup.github.io/jquery.blockUI.js＆GT;＆下; /脚本＆GT;
 

第2步的codeS后上方延伸的jQuery：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（'＃Button1的'）。点击（函数（）{
            $（'。blockMe'）。块（{
                消息：请稍候...＆LT; BR /＆GT;＆LT; IMG SRC =图像/ loadingBar.gif/＆GT;，
                CSS：{填充：'10px的'}
            }）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

第3步在我的情况下，我绑定使用按钮我的网格视图，但你总是可以使用任何其他控件，以及：

 ＆LT; ASP：按钮的ID =Button1的=服务器文本=绑定网格视图
            的ClientIDMode =静态的OnClick =的button1_Click/＆GT;
    ＆LT; D​​IV CLASS =blockMe＆GT;
        ＆LT; ASP：GridView控件ID =GridView1=服务器WIDTH =100％＆GT;
        ＆LT; / ASP：GridView的＆GT;
    ＆LT; / DIV＆GT;
 

第四步绑定按钮网格视图点击

 保护无效的button1_Click（对象发件人，EventArgs的发送）
    {
        数据表tblCourse = myAccount.GetEnroledCourse（arpl4113）;        //绑定课程
        GridView1.DataSource = tblCourse;
        GridView1.DataBind（）;
    }
 

，就是这样， NO AJAX工具包（仅jQuery的），这样​​的结果会是这样的：

---

一个手法做在页面加载上述溶液

这一切首先是不会在服务器端，但在客户端上Page_Load事件的函数; - ）

因此​​，要实现这一点，你需要有一个隐藏的控制，以保持页视图状态的值，也使相同的按钮隐藏触发它的页面加载。和在延伸的jQuery上方少许变化。完成！

第1步添加以下的CSS到您的网页标题：

 ＆LT;风格＆GT; .hidden {显​​示：无; }＆LT; /风格＆GT;
 

第2步添加隐藏字段，加上让你的按钮隐藏的是这样的：

 ＆LT; ASP：HiddenField ID =hidTrigger=服务器的ClientIDMode =静态VALUE =/＆GT;
    ＆LT; ASP：按钮的ID =btnHidden=服务器的ClientIDMode =静态
                的OnClick =btnHidden_​​Click的CssClass =隐藏/＆GT;
    ＆LT; D​​IV CLASS =blockMe＆GT;
        ＆LT; ASP：GridView控件ID =GridView1=服务器＆GT;＆LT; / ASP：GridView的＆GT;
    ＆LT; / DIV＆GT;
 

第3步请这改变您的分机脚本如下图所示：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{        //检查是否GridView的已加载
        如果（$（＃hidTrigger）。VAL（）！=炒鱿鱼）{            //设置隐藏字段被炒到prevent多工
            $（＃hidTrigger）VAL（炒鱿鱼）;            //阻止gridview的区域
            $（'。blockMe'）。块（{
                消息：请稍候...＆LT; BR /＆GT;＆LT; IMG SRC =图像/ loadingBar.gif/＆GT;，
                CSS：{填充：'10px的'}
            }）;            //火隐藏的按键触发
            $（'＃btnHidden'）点击（）。
        }
    }）;
＆LT; / SCRIPT＆GT;
 

这就是它！并在code你按一下按钮背后仍然和以前一样，在这个例子中，我只更改了按钮的名称。没有code在Page_Load事件虽然。

 保护无效的Page_Load（对象发件人，EventArgs的发送）
    {    }    保护无效btnHidden_​​Click（对象发件人，EventArgs的发送）
    {
        数据表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.

这篇关于如何显示加载图像，直到一个gridview而不Ajax工具包满载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！