Blazor .NET 6 Fixes: Carl Franklin's Blazor Train Ep 64

hi i'm carl franklin you know this is the first episode of blazer train i produced since dotnet 6 shipped in november 2021 so i'm going to revisit some code i wrote in previous episodes and see what happens when i flip them over to dot net six from breaking code to new features it's all coming up right now right here on uh what's the name of the show again oh yeah blaze [Applause] [Music] okay so if you want to use the same materials that i use to learn about net 6 and what's new in blazer go to dotnetconf.net and scroll down to this guy right here watch session replays so that'll take you to youtube and you can see the playlist here in youtube and i watch the keynote and then what's new in c sharp 10 enterprise gradeblazerappswith.net six and then next generation blazer components with net six so this combined with just looking around and trying stuff out i came up with a fix to three projects that i had previously done in blazer train let me show them to you so the first one we're going to talk about is this guy blazer component life cycle because there's some exciting news for webassembly developers in that next we're going to talk about this one all about files so this is file uploading downloading and storing and yes uploading a file in blazer server doesn't work with this code in.net 6. so i'm going to show you how to fix that and finally blazer sliders blazer sliders is a component that i wrote for net5 we're going to take advantage of some of the new javascript features to make it work with net 6. it works with net 6 as is but with these new javascript features it sort of takes away a lot of complexity so let's talk about the life cycle stuff i'm creating a new blazer webassembly standalone app with dotnet 5. you see that now i'm just going to go to the index page and i'm going to paste in some code that we used in that life cycle episode i don't have any markup so let me just add some here there you go just hello now i'm overriding um some of these virtual methods here in the life cycle and the first one is set parameters async and this is the same code that i talked about in the life cycle episode i'm just going to put a break point here now this is webassembly and what do you think's going to happen dot net 5. nothing absolutely nothing happened we didn't get those break points that's because in dot net 5 and before if you put break points in life cycle overrides they don't happen when the page first loads however watch this if i go to counter and then back to home now we can hook them all right but that's not what i want i want this to work right out of the gate so let's flip it over to net six now here's a easy way to do this if you have a moderately simple project change the target framework from dotnet 5.0.net 6.0 just like that now as far as these guys yeah you can change them manually if you know the numbers the latest numbers but an easy way is just to go to the project right click and select manage new get packages click on updates select all the packages that you want to update and click update okay and now this is a.net 6 webassembly app so now let's run it see what happens there you go all of the life cycle overrides are getting called of course they were getting called before but now the difference is you can set breakpoints so that was the code in blazer component lifecycle episode 8. so now let's check out the code from episode 37 all about files so i've downloaded the code and i'm just going to run it as is this is the.net 5 version of file uploads in blazer server now just to show you that it is indeed.net five let's look here in the cs proj file and yes it is dot net five this is right off of the blazer train website now the thing i'm interested in is large files i have this file earth dot png that is about 30 megs so i'm going to drop that here in the large file chunked uploader and you can see the progress going there it's telling me the percentage here and it worked and just to show you i'm going to open the files folder in file explorer and there it is looks right all right now let's flip this over to net six and for the moment i'm going to ignore the azure storage thing now this is a blazer server project there are no package references that i'm going to use that need to get changed from net5.net 6 so we'll just go with that and let's just run it and go to large files and try it again now that was very fast don't you think if you look in the files folder now you can see this guy here how big is he well he's 30 megs but it's definitely corrupted yeah sorry photos can't open this file because the format is currently unsupported or the file is corrupted it's the latter so i struggled with this one and uh i found a good reference out there right here in the docs asp.net core blazer file uploads and i noticed this the following approach is not recommended because the file stream content is read into a string in memory stream reader browser file open stream read read end this is kind of what i'm doing here all right so this is what they recommend using openreadstream.copy2async and then your your output stream the problem is you don't get progress in here let's just take a look quickly at what i'm doing in the code so here's the code in question on large file input change right we have some variables that we're using to disable and enable fields this one disables the file input field i get the total bytes i have a variable percent i have a chunk size which i've set to 400 000 it's fairly arbitrary and i left that comment in there because you can change this so then i calculate the number of chunks from the total bytes and whatever's left over using the mod operator so then i get a new file name i delete it if it exists i open the input stream i open the output stream and i read and write so i have a buffer that's the size of the chunk and then i call read async into that buffer and then write it out to the output stream this is what isn't working so i'm going to replace this entire method with some new code so i've changed this we still have our uploaded bytes we still have our uploaded large file and the chunk size and the percent but notice i don't have any number of chunks in remainder here that's because and i'm going to skip down to where we do the read and write i'm just going to open the output file for writing and i'm going to open the read stream and copy to async passing the chunk size as the buffer size to the output stream but i'm also passing this copy progress info now i've added this file called streamextensions.cs and i have a static class called stream extensions in here and these are extensions to a stream i have a copy to and a copy to async both of these take this progress info copy progress info and then i have versions that also have a cancellation token so there's four things in here this is the one i'm going to use now let's look at copy progress info copy progress info has total bytes it defines an event called progress it has a bytes transferred property that has a backing field and the get just returns that backing field but the set after setting the value raises the progress event and then there's a percentage which is a computed read-only property that returns the number of bytes transferred times 100 divided by total bytes and that'll give us a percentage so flipping back here you can see i've created a new copy progress info there and i'm hooking the progress event with an inline event handler i set my percent i set my upload bytes and my large upload message these are all these are fields in the ui and then i call status changed now all i have to do is just say open read stream and copy to async now let's give it a shot well that looks like it worked and it did now i got to give credit to tour for this i found stream extensions on uh tours github and he has a little github just here and this adds the stream extensions including the copy progress info although his copy progress info is very simple just had the bytes transferred i added the event handler and all of that finally we're going to look at the code for blazer sliders so blazer sliders i did in net 5 and this is making split screens with multiple panels and sliding splitters and i have a repo for this on github and i basically just cloned the project and i'm running it here in visual studio 2022. now you can see it is a dot net 5 application there is the component itself blazer sliders right and this is a razer class library project and then you have a blazer sliders test which is a blazer server application that tests the blazer sliders and also a wasm version so i'm going to set the startup project to blazer sliders test and let's just run it dot net 5 no swetsky and i'll zoom in a little bit so here you go i've got a slider and the slider goes left and right and it stops at a certain point so you don't go off the screen here's a horizontal slider here's four panels let's make this a.net 6 application that's the first thing we'll do so starting here i'm just going to change the server application to net 6. i'll go to the test wasm i'll change that to net 6. and i'll update the nuget packages and i'll go to blazer sliders and we'll make that a net 6 application and also update the new get packages all right so i don't expect any issues here running it just as a net 6 application and there are none however blazer sliders is a component right it's a razor class library and i've got my components here horizontal slider panel with my code behind and a css file that's scoped very good now i have this sliders.js file that has my code in it and in dot net 5 you have to have an interop class to access your javascript so here is my slider interop then i have to import the content from blazer sliders sliders js and then all my methods that i would normally call just with regular javascript interop i have to wrap them up this is just what needed to be done in f5 and the js file all of my functions have to be written as exports register window force resize register vertical slider panel etc in dot net 6 you do not have to do this you don't have to have all this interop layer what you can do is simply rename your javascript file to the library name which is blazersliders.lib.module.js so you can see it's the library name dot lib.module.js and now i can get rid of slider interop but i gotta change my code to use this correctly so just like i would do with you know putting a script tag in either my underscore hosts file or in my web root index html for web assembly i'm going to do these the same way so i'm going to say window dot capital register window equals arguments and then a lambda and i'm going to do that for all of these now we're not out of the woods because we got rid of that interop thing so everywhere we're calling it is going to throw an error i'm going to replace my slider interop with just ijs runtime and we'll go into the code now we're going to get some errors here right there instead of a weight.js interop register horizontal slider panel we're going to say await js runtime invoke void async name of the method is the first one and then all of the arguments so this is what you're used to doing now and i'm not saying you have to change anything what i'm saying is when you build a component if you name your javascript file correctly you can access it in the the razer class library just as you would uh in a regular blazer application all right so let's do the rest of them now we have other issues because we added slider interop as a scoped service to the test programs so get rid of that get rid of it here in program for web assembly and try again nice so that's a really nice bit of dot net six for you now of course there's other things that i could show you about net six and i have started all that stuff but you'll have to tune in for more blazer train back to you in the studio carl so this week i also produced a new episode of the.net show episode 13 which explores new features of the c-sharp language in c-sharp 9 and c-sharp 10. it's all about records and how they compare with classes and structs along the way you'll discover why immutability really drove the design of these new features head on over to the.netshow.com and watch that space for the next couple of weeks where i'll unpack more.net 6 goodness hey thanks for riding the rails with me today this is where i jump off i'll see you next time [Applause] [Music]

Channel: DevExpress

Views: 1,062

Keywords: Developer Express, DevExpress, Visual Studio, Microsoft Development, Software Developer, blazor, blazor train, Carl Franklin, Microsoft Blazor

Id: C6ef3ONGbKU

Length: 19min 35sec (1175 seconds)

Published: Wed Nov 24 2021