How do you do this loading progress in asp.net web forms .net 4.8

Question

The following is from a blazor web app that shows loading text while records are being retrieved. How would you do this in ASP.NET WebForms .Net 4.8?

@page "/fetchemployees"
@inject SampleDataAccess data


<PageTitle>Employee Directory</PageTitle>

<h1>Employee Directory</h1>

@if (employees is not null)
{
    foreach (var e in employees)
    {
        <h3>@e.FirstName @e.LastName</h3>
    }

}
else
{
    <h3>Loading...</h3>
}

@code {
    List<EmployeeModel> employees;

    //protected override void OnInitialized()
    //{
    //    employees = data.GetEmployees();
    //}

    protected override async Task OnInitializedAsync()
    {
        employees = await data.GetEmployeesCache();
    }
}

Same thing. Show Loading by default when page loads. Use an asynchronous request to the server (such as HTTP Fetch or AJAX) to get the data. Once retrieved, hiding the "Loading". — mason
– mason, Commented Sep 29, 2022 at 23:44
Not really sure why some ajax is required here? Just drop in a button, and add both a client side and server side code to that button. See below - really just a plain jane button click should suffice just fine here. — Albert D. Kallal
– Albert D. Kallal, Commented Sep 30, 2022 at 0:53

Albert D. Kallal · Accepted Answer · 2022-09-30 00:52:24Z

Are you doing this on first page load, or is there some button you press to show "loading" while say the gridview loads?

if this is a button click on the page, then just add both client side code and server side code to the button click.

So, say a button, and this gv:

<asp:Button ID="cmdLoad" runat="server" Text="Load Data" CssClass="btn"
    OnClick="cmdLoad_Click"
    OnClientClick="$('#mywait').show();"/>

<br />
<br />

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" CssClass="table" Width="50%">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
        <asp:BoundField DataField="LastName" HeaderText="LastName"  />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Description" HeaderText="Description"  />
    </Columns>
</asp:GridView>

<div id ="mywait" style="display:none">
    <h3>Loading grid - please wait</h3>
    <img src="Images/wait2.gif" />
</div>

So, when we click the button, we show the please wait - and a spinner.

Code behind is this:

    protected void cmdLoad_Click(object sender, EventArgs e)
    {
        LoadGrid();
    }

    void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4DB))
        {
            using (SqlCommand cmdSQL = 
                new SqlCommand("SELECT * FROM tblHotelsA ORDER BY HotelName",conn))
            {
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();

                // fake 2 second loading time
                System.Threading.Thread.Sleep(2000);
            }
        }
    }

And results look like this:

So, by adding both a client side code and server side to the same button, you get the above effect.

Collectives™ on Stack Overflow

How do you do this loading progress in asp.net web forms .net 4.8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related