How to show one by one record on the UI returning from the Web API?

ajax angular c# entity-framework-6

Question

Just for information:

I can not use the pagination (skip, take) since the records are coming from the multiple tables. For detail you can check the Report model.

I have to tried to get the data one by one on the UI from WebAPI.

The below code fetches all the records at a time but the records are huge and it takes more than a minute which is not good as per UX.

Model

public class Report 
{
    public string Region { get; set; }
    public List<Country> CountryList { get; set; }
    public List<State> StateList { get; set; }
    public List<District> DistrictList { get; set; }
}

Web API

[HttpGet]
public HttpResponseMessage GetReports()
{
  var tempReports = this.mService.GetReports();
  if (tempReports == null)
  {
    return ErrorResult(HttpStatusCode.NotFound);
  }

  return OK(tempReports);
}

Service

public IEnumerable<Report> GetReports() 
{
List<int> totalValidRecords = ; //This comes from a table on the basic of which the report will be generated.

foreach(int id in totalValidRecords)
{
   List<Region> regions= //gets list of record from Region table.

   foreach(Region region in regions)
   {
      List<Country> countries= //gets list of countries from country table based on region.

      foreach(Country country in counties)
      {
        List<State> states = //gets list of states from State table based on country.

        foreach(State state in states)
        {
           List<District> districts = //gets list of districts from District table based on state.

           //Other logic which computes and access other rest of dependent tables data.
        }
      }
   }
  yield return report; 
}
}
1
0
2/19/2019 6:16:10 AM

Accepted Answer

What you want it's called WebSockets and for .net you have a library SignalR which allows you to create connections to those websockets where you will send data to that channel when the front end makes that request you connect to the right channel and all the data sent there you can start by showing in your interface, that's a solution that requires some effort to setup but I would highly suggest it to you. https://github.com/SignalR/SignalR

Example : FrontEnd request API , API gets the first list 'regions' filled send to the channel all the regions, front end will receive those values and populate some variable and display to the user, and so on...

1
2/20/2019 4:05:45 PM


Related Questions





Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow