asp.net web forms .net 4.8 這個加載進度是怎么做到的

Question

以下來自 blazor web 應用程序，該應用程序顯示在檢索記錄時loading文本。 您將如何在 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();
    }
}

Answer 1

您是在第一頁加載時執行此操作，還是在說 gridview 加載時按下某個按鈕以顯示“正在加載”？

如果這是頁面上的按鈕單擊，則只需將客戶端代碼和服務器端代碼都添加到按鈕單擊中。

所以，說一個按鈕，這個 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>

因此，當我們單擊按鈕時，我們會顯示請稍候 - 和一個微調器。

后面的代碼是這樣的：

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

結果如下所示：

因此，通過將客戶端代碼和服務器端代碼添加到同一個按鈕，您可以獲得上述效果。