Avoiding despair while you wait… with AngularJS and .NET

Whenever there is a pause of a few seconds for a heavier process to be executed, it

It is important for the client not to feel deactivated when there is a pause of a few seconds in a heavier process that is been executed. Know how to avoid despair while you wait… with AngularJS and .NET .

Whenever there is a pause of a few seconds for a heavier process to be executed, it is important for the client not to feel deactivated. The most user-friendly fix for this would be to know what is happening at that moment.

AngularJS and .NET

To do this, we use a Progress Bar to indicate the status of the operation, so that the user may continue to use other options on the page. Let´s discuss how to approach the solution:

In this example, the user needs to save a movie to the base, an operation that takes about 10 seconds.

  • The client performs a POST with the content to the server (“/ movies”) and it launches the process.
  • The server responds to the request with 202 –´Accepted´ indicating that the request has been accepted, but the process has not yet been completed. In addition, the server modifies the header of Content-Location, which will indicate the URL to which must be accessed to know the status of the operation.
  • The client executes a polling to the received address, showing the percentage of progress in the UI.

For starters, let’s look at the code for the class Progress.cs:

We can see that our class contains properties like ‘ IsCompleted ‘ which we will use in the front for polling. The StartProcessing method will receive a generated id, set the initial values and launch the process.

StartLongRunningProcess will simulate this heavier process. In this case, use several Thread.sleep to help slow down. Later, UpdatePercent, as its name implies, will update the percentage of our process.

Each step has a custom message to the UI is a little more user-friendly and doesn´t just show a number.

Now, in our controller we have:

You need to add the header “Access -Control- Expose- Headers” since the only headers accessible by default are:

  • Cache- Control
  • Content-Language
  • Content -Type
  • Expires
  • Last -Modified
  • Pragma

With that we would be ready in the backend. We will use the Postman for operation:

We perform POST and get the following response:

Avoiding despair while you wait… with .NET and AngularJS

And if we execute a GET to the direction indicated we obtain:

Avoiding despair while you wait… with .NET and AngularJS

Now, for our Front, we will use Angularjs to create the polling that will go on processing our requests and also update the progress bar.

For the graphics, we will use the directive: Bootstrap from Progress Bar

So in our view we have:

Where we have a small form for the POST of the movie and our bar, which would be something like this:

Avoiding despair while you wait… with .NET and AngularJSAnd our controller would look like this:

Where we have our saveMovie function the URL function that performs the initial post and keeps the URL obtained from Content-Location header, to then later call loadProgress, which has a $timeout every 1 second where it finalizes the GET, obtaining the state of progress, and once we’re finishing the process, I end the $ timeout.

Avoiding despair while you wait… with .NET and AngularJS

Avoiding despair while you wait… with .NET and AngularJS

Share this articleShare on LinkedInTweet about this on TwitterShare on FacebookShare on Google+Email this to someone
Go Back