All geek questions in one place

How to display a boot image until the grid is fully loaded without the Ajax Toolkit?

Question

Can anyone suggest how a loading image can be displayed before the gridview is fully loaded?

This gridview should appear when the page loads. There should be a simple solution to detect when the gridview is loading / loading, so you can achieve a simple switch between the load image and the visibility of the grid.

Please do not suggest using any methods of Ajax toolkit if the desired code cannot be isolated and used autonomously. I found that the toolkit would be easy to implement, but bloated and slow in performance. I do not want to include any scripts, files or code in my release package that will not 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

CAPABILITIES

I am open to any suggestions, but I tried to implement the solution using jquery methods , but I need help to execute.

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
+4
source share
6 answers

jquery, UI- jquery block github, ajax.

, , " , :

1

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.imtqy.com/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();
    }

NO AJAX Toolkit ( jQuery), :

enter image description here

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

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

, .

+9

ASP.NET, . jquery AJAX - Grid , , . , , , html, Grid.

              <script type = "javascript/text">
              $(document).ready(function() { // show modal dialog });
              $(window).load(function() {// hide the dialog box});
              </script>
+1

, -api, , document.ready jquery. - ( #, ):

 public class TableDataController : ApiController
  {
     public IEnumerable<SimplePocoForOneTableRow> Get()
     {
        var tableData = GetTableDataFromSomewhere();

        return tableData;
     }
  }

, WebApiController -, .

HTML- :

<table class="tableToLoadStuffInto">
   <tr>
       <td><img src="yourCoolSpinningAjaxLoader.gif" /></td>
   <tr>
</table>

jquery :

<script type="text/javascript">
$(document).ready(function () {
    jQuery.ajax({
            url: '/api/TableData',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
            if(!result) {
                //Show some error message, we didn't get any data
            }                    

            var tableData = JSON.parse(result);
            var tableHtml = '';
            for(var i = 0; i<tableData.length; i++){
                    var tableRow = tableData[i];
                    tableHtml = '<tr><td>' + 
                    tableRow.AwesomeTablePropertyOnYourObject +
                    '</td></'tr>'
               }    
             var table = $('.tableToLoadStuffInto');
             //Could do some fancy fading and stuff here
             table.find('tr').remove();
             table.append(tableHtml);
            }
        });
});
</script>

jQuery, , handlebars, .

+1

div div :

  $(document).ready(function()
   {
 $("#loader").show();
 $.ajax({
    type: "GET",
    url: "LoadGrid.aspx",
    data: "{}",
    contentType: "application/json",
    dataType: "json",   
    success: function(data) {
        $("#loader").hide();
       $(#dvgrid).html(data);
    },
    // it good to have an error fallback
    error: function(jqhxr, stat, err) {
       $("#loader").hide();
 $(#dvgrid).html('');
       $("#error").show();
    }
  });
});

LoadGrid.aspx #. LoadGrid.aspx, html div ...

+1

:

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    success: function() {
      // Run return method.
    },
    // add these lines
    beforeSend:function {
       //this will show your image loader
       $("$Loader").css("display","block");
    },
    complete:function {
       //this will hide your image loader provided that you give an id named Loader to your image
       $("$Loader").css("display","none");
    }
  });
});
0

beforeSend success error :

$(function() {
  $.ajax({
    type: "POST",
    url: "Default.aspx/UpdateGV",
    data: "{}",
    contentType: "application/json",
    dataType: "json",
    beforeSend: function() {
        $("#loader").show();
    },
    success: function() {
        $("#loader").hide();
        // Run return method.
    },
    // it good to have an error fallback
    error: function(jqhxr, stat, err) {
       $("#loader").hide();
       $("#error").show();
    }
  });
});

( <img id="loader" src="..." /> <img id="error" src="..." />)

complete success error, success error complete error .

, , !

0

Source: https://habr.com/ru/post/1543433/

More articles:


All Articles