How to Report Progress with Async/Await in .NET Core 3

hey everyone brian lagunas here and today i'm going to answer another tech question if you have a question you'd like to have answered now's the time to subscribe to my channel like this video leave a comment below with your question and i may just answer it in my next video today's question comes from a message i got from linkedin this person was writing a wpf application on.net core 3.1 and like most modern developers they're using the async await pattern for asynchronous operations so this developer has a process a long running process that's occurring on a separate thread maybe they're copying files or uploading or downloading or something's happening that's taking a while and this person wanted to you know report that progress or let that user know uh where the process was what percent complete is this process in right now it's very similar to the copy file dialogs that you see in windows something similar to this right here so how do we do that how do we report the progress of a background thread to our end users on the ui thread in the application well that's a great question and i'm going to show you how roll that intro the application we're going to be working with today is a very simple wpf.net core 3.1 application this application has a window that contains a button that when we press this button some type of action is going to occur we have a progress bar that we're going to use to track the progress of that action and then we have a text block that we can use to notify the user when that action has completed now let's go ahead and look at the code and as you can see we have a button click event and when we click this button we're going to perform an action called loop through numbers in this case a hundred numbers if we look at the loop through numbers method we see all this does is it loops through a count of numbers right in this case a hundred and we're going to thread that slate for 100 milliseconds as you can see this is just simulating a long running process in which we can report some type of progress so let's go ahead and run the application and see what happens here's the application running i'm going to click the loop through numbers and when that happens something strange occurred uh my ui seems frozen i can't click on anything i can't move anything uh it looks like my apps froze and i can't do anything about it oh well something weird just happened right my my ui suddenly became active it moved off to the side and now i have a completed notification at the bottom well that's because right now this loop new numbers action is occurring on the ui thread so our ui is blocked the entire time this process is running so the first thing we want to do is we want to place this work on a separate thread to do that we're going to await a task.run and we'll make sure we change this to async so all we're doing is we are wrapping our loop through numbers method into a task.run which will then offload that method onto a worker thread or background thread so now let's run the application and see what happens here's the application running i'm going to click the loop through numbers button and something's happening i don't know what but look i can move my window around i can interact with my ui my ui is not frozen so obviously we're doing something right okay boom the action has completed i can see the state of the text block here has been updated to show me that is completed but the entire time my ui was still active i could interact with it it was not blocked and that's awesome and that's because we wrapped our synchronous method inside of a task.run now your first instinct might have been well brian why don't i just come down here and we will return a task dot run and we will wrap the loop inside of the task and then we can return the task once we have done that let's just comment this out real quick we can await our loop through numbers and pass in our number technically you can do that but that is highly inefficient this is kind of the rule of thumb when dealing with task.run do not use task.run in the implementation of the method instead use task.run to call the method so keep your method synchronous but when you call your synchronous methods wrap them in a task.run so let's go ahead and undo all this okay so now we're back to where we started we have an interactive ui it's not blocked anymore and our loopthrough numbers method is running on another thread awesome this is great so now the next step is we want to report progress to our end users that this uh that this method is being invoked and something is happening so to do that we're going to use what's called i progress of t okay and this is going to be used to notify the user that we're updating progress right some type of progress is happening this is what we're going to use to report that progress so to do that i need something to report in this case i'm going to report an integer that represents the percent complete so we'll say percent complete equals i don't know let's say what's percent complete of this would that be like x times 100 divided by count so we have our percent complete now we can say progress dot report and then our percent complete so now we are reporting the percent complete of this loop through numbers method now what we have to do is we have to capture that report and then handle it okay so let's go ahead and remove this to do and let's go ahead and create another progress here and this is going to be a new progress of t which is going to be integer and in here we're going to take the value that we receive from the report and we're going to do something with it in this case we're going to update our progress bar dot value to the value that we receive from the report in this case it represents a percentage now we just pass this progress into our loop through numbers method and let's go ahead and run the application and see what happens there's the application running now i'm going to click the loot new numbers and now as you can see i can still move this around everything's interactive but look now our progress bar is updating to represent the current progress of our action which is pretty cool right boom completed uh we could take this a step further if we wanted to and say hey let's update the textblock.txt let's set that equal to something like i don't know let's take the value like maybe put a percent sign behind it right so let's run this and so we're going to update both of these now so let's run the application loop through the numbers everything looks good we're updating our progress bar and we're updating the text showing the percent complete of that progress pretty cool right and that's it that's how easy it is to report progress to your end users using async await [Music] you

Channel: Brian Lagunas

Views: 12,041

Keywords: report progress with async await, async await c#, async await report progress, async await, async await .net core 3.1, c# async await, task.run c#, task.run example, task.run .net core, report progress async await, asynchronous programming c#, await task.run c# example, iprogress c#, async await progress bar c#, async await progress, async await show progress, async await update ui, asynchronous programming, c# async await update ui, .net core 3, .net core 3.1

Id: zQMNFEz5IVU

Length: 6min 58sec (418 seconds)

Published: Wed Jul 29 2020