How do I show a loading screen/icon while loading a view that requires querying a database? Asp.Net-CodePudding

Currently I have a view that has just a single form with three values. When a user submits the form with those three values, my controller checks if all three values actually have a value other than being empty, and if they do then it calls my service that fetches data.

        public IActionResult Index(string clientName = "", string tableName = "", string date = "")
        {
            if (!string.IsNullOrEmpty(clientName) && !string.IsNullOrEmpty(tableName) && !string.IsNullOrEmpty(date))
            {
                // Unimportant stuff for setting temp variables for FetchData parameters removed
                TheData = _fieldDataService.FetchData(tempAcr, tempID, tableName, date, numRows);
            }
            return View(TheData);
        }

My goal is to make the view display a loading icon or something while the data is being fetched. I've looked into JQuery and Ajax but I have no experience with either and cannot figure out how to apply them to my specific task. Since I am using Asp.Net Core, I also looked into using Blazor, but I couldn't wrap my head around it either.

Could somebody point me in the right direction as to what I should/could use to solve this problem? I have a vague understanding that there needs to be some sort of asynchronous function that retrieves the data, but nothing more than that.

CodePudding user response：

You need to fetch the data with JavaScript and manipulate the UI to show a loader. But anyway, a request like this should be so fast, that you don't even need a loader.

I'm also a bit worried that you are passing a tableName as input parameter. You aren't just string concatenating the query right? You might be susceptible to SQL injections, see https://en.wikipedia.org/wiki/SQL_injection.

To do a request with JavaScript, look into the XMLHttpRequest, see https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest, or the new way of doing it with fetch(...), see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.

This answer shows a more practical example: Display loading image while ajax fetches file content.

CodePudding user response：

You'll have first to make up your mind about the framework you want to use. You can mainly use Razor Pages App, in which case you'll need to use JavaScript (Fetch Api, not XMLHttpRequest), or use Blazor, either WebAssmbly Blazor App or Blazor Server App. I'll tell you how to do that in Blazor, as this is the only place I bother to answer questions.

When you create a Blazor app, the default template contains a page named FetchData. The page displays data retrieved from a data store, either by using the HttpClient service (WebAssmbly Blazor App), that retreives the data from your data store by calling an end point on your Web Api, or by calling the data store directly (when using Blazor Server App)

Below is a code snippet I've copied from the FetchData page...

The forecasts variable is an array that is to be populated with data ti be displayed on the screen. The code checks if forecasts is null, and if it does, a message with the string Loading... is displayed, while the retrieval operation is being taken place. When the called method completes, and the forecasts contains values, the data is displayed in a tabular form. You can place a spinner instead of the string "Loading..." or in addition, and more...

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{

Note: It's a good practice to validate the data before you perform an API call. You shouldn't validate the data in the contoller. Do not make any unnecessary calls, especially to Web Api and beyond.

I emphatically recommand not to use XMLHttpRequest as suggested else where. It is an old technology. Use Fetch Api instead. Blazor JSInterop uses Fetch Api.