Blazor Updates in .NET 6 - Hot Reload, Query Parameters, and More

there are a lot of changes to blazer in.net 6. these are quality of life changes not major shifts in how blazer operates but there's still great changes in this video we're going to look at a number of changes to blazer that will directly impact and improve how you build blazer apps now this is the first video you've watched of mine my name is tim corey and it's my goal to make learning c-sharp easier i provide videos twice a week here on youtube to help you grow as a developer i also have a full set of training courses on iamtimcory.com i encourage you to check out all the resources that i have to offer now in this video as with most of my videos i'm going to create some source code if you like a copy of source code use the link in the description so let's go over to visual studio 2022 i am using the preview version because at the time the recording is not quite out yet but it is a stable version of the new visual studio you need that in order to get the net 6 templates in the file new or create new project dialog so you can create the command line and do visual studio visual studio 2019 if you want but for most of you the upgrade to 2022 will be free because if you are an individual user or in a company that makes less than a million dollars per year you can use the visual studio 2022 community edition for free so let's go visualstudio.com and check that out okay so in here let's create a i'm going to create a blazer server app because there's a few more changes to blazer server than to web assembly so it's a little clearer to see in blazer server versus webassembly so we're going to do that but really just so you know blazer server and blazer web assembly are practically the same thing i get a lot of people push them back and say well but how you do that in blazer web assembly busy hitting server and the only code that really changes is the startup code and then the data access code that's really the only big changes between the two because the fact that blazerwebassembly lives fully in the client where blazer server lives on the server and the client so the actual blazer code though all the razer page stuff that's all the same between both blazers so um blazer updates that's called blazer updates that's fine um these are the updates 2.net 6. so we're using a.net 6 long term supported branch or long term supported version there is no non-long-term support for net six just so you know they're just saying that hey net six is the lts branch uh just like net core 3.1 was net 5 is not a long term supported which means its support will run out i believe uh shortly after six comes out so i think the it's 15 months i believe or 16 months something like that i think it's 15 months from the time it comes out which means that it's got about three and a half months left of support it'll still work well beyond that but net six will be supported for three years so net six we're not gonna do authentication we'll leave https on we should and we're not gonna enable docker so hit create and this is a standard blazer server application okay so um that's that's what the app is okay it's it's a standard app but if you look at it and you remember what blazer server five dot five or previous looked like you'll see a few differences so let's look first at the the program.cs because we're missing startup.cs so program.cs is using the new format where we don't have to have a namespace or a class declaration or even a method declaration for our program.cs so it goes right to the root and we're able to write our code here without the um that static void main wrapping it that saves us about i think it's eight eight spaces per line which is actually a pretty big deal so it makes our codel more compact the other thing to note though like i said there is no startup.cs there used to be but now instead of having a program.cs and a startup.cs we now have one file that does everything so this is the complete startup so we have webapplication.createbuilder and then from there we do our registration of our services that's our dependency injection we build it out we check if it's the dev environment or not the dev environment and we wire up the exceptions and we also turn on hsts this is only for production so this uh using the exception handle or the error page means that we don't see those pages that say hey here's the the line in your source code that has the problem we don't want to see that in production so we have https redirect static files routing that's our routing and then we have right here this line hooks up our signal r since we're on blazer server and then we have our fall back to the host page and you run that's it that's the entire program.cs essentially it's just the startup.cs and program.cs crunched into one and then using the new.net six features of not needing the um again the namespace the class or the method name so that's where you're gonna find everything related to your um your settings for blazer server okay so that's that's one big change um but then there's another big change and this one i want to show you so let's let's run this so let's hit the start button and we're gonna launch kestrel which is our our web server and once this launches we're gonna get this page right here but notice that it's a little different there's something you might notice you may not but if you look here let's zoom in and see if you can see it oh my zoom tool is not working there we go so right here that's a little different so it used to be that kestrel which was one of the web server options we have the other is iis express but kestrel used to be port 5000 was http and port 5001 was https and that was the same for every single project but now kestrel has a a range that that generates random port numbers inside of that way we can have multiple kestrel projects running at the same time and not step on each other's toes now the other thing is let's um let's leave this open but let's kind of shrink it down there's good and we'll come back over here and we're going to shrink this down as well whoops popped off the screen entirely that's not wide so right now we have this feature right here this is called hot reload and this is built into practically everything now inside visual studio so if we check here notice i have it checked the box checked for hot reload on save so what this means is if i make a change it will reload this page so let's just do a small change here let's go over index page and [Music] hello youtube and i'll hit save when i do that notice that on the right this now changed to hello youtube i had not hit refresh i didn't do anything else now you may say okay that's kind of cool you know it's making some changes but that's not gonna be really helpful if i'm in the middle of something well actually it is let's go over to the counter page and let's change the counter notice let's zoom in here a little bit the the counter is at 14 right now so let's go over to the counter and i'm going to say um updated counter and i'll hit save and now it says updated counter but the current count still says 14. it remembered my state it didn't change the state it just allowed me to make a change to this h1 let me say cool but what if i want to change some c sharp code okay so let's say plus equals two we'll hit save so now we're going to add we're going to go by two instead by one click once it's 16. twice 18. you say well maybe you're double clicking okay so 25. i'll click once 43 68. okay so this allows me to make changes as i go i can leave this up and running i can make changes to my application i can tweak it i can change the html the css um the c sharp code it doesn't really matter it will allow me to change this now there are exceptions to this if we go to fetch data page and this is just a sample page that you know pretends to fetch data when reality was doing here is it's um getting a random set of values but what if i wanted to make a change to this uninitialized async where i do something else maybe i want to say make this call twice oops i'm going to call this twice so that there's a change now to on initialized async i hit save and it says hey ads were made which cannot be compiled okay we can't continue until the compile error is fixed and so either edge make the changes to code or stop to stop debugging okay so it says no you can't do that therefore hot reload won't work with that change you can't just keep going now at this point i need to um actually i think i can since i undid it i think i can make some changes now um like so and it will still work so if i edit and continue but don't apply those changes it will con it will allow me to keep going so the point here is if you're making changes where um it has to reload the page or do something else that would be destructive it's going to say hey wait just a minute i can't keep going with this edit and continue hot reload stuff for this particular change but for other changes like we did on the counter page not a problem so there's a lot of cool stuff you can do with hot reload that's going to be a real game change when it comes to quickly making changes to your pages okay so let's also look while we're in here let's go to fetch data there is a new feature that allows us to make some changes to the header of our page specifically notice page title so we have weather forecast here notice at the very top of my tab it says weather forecast so if i were to change this to um tim's forecast like so it's gonna now say tim's forecast in the tab this is a new feature this page title that allows you to put this on and modify the page title based upon your current page this also means that you can put c sharp code in here so let's go back to our counter page which also has a page title so let's go back over there and now for the page title we're going to put colon at current count okay so it's always going to have yes we need to stop and restart because the fact that it's um made a modification that it couldn't continue on so let's bring it back over here let's shrink it back down to the right size let's go to our counter page and notice that up here we have counter says zero right well if i were to click now it says 25 both in the tab and on the page notice it continues to change as we change the current count so you can modify the page title based upon the data that's on this page not just a static title all right so that can be really helpful when you're looking at things like user records where maybe if you want to you know bookmark a certain page you would say hey that's the user records page but which record are we on okay where now you can say record colon corey comma tim okay and then that bookmark will know this is the record for tim corey so really cool stuff you can do here the page title there is also the ability to modify other head content so let's let's do that let's actually stop this and we'll maximize it for now and on the counter page let's make some more more modifications to our our header okay so we start with head content and then inside here we can modify pretty much any of the content in our header so i can say let's say meta and we'll say that the name equals description and then the content equals this description of the page so this is tim cory's counter page okay not a great um not a great description but but that at least gives us a a meta tag to add to our header so now if i run this let's wait for it to launch and i come over here and let's do it f12 to inspect and we go the elements we scroll to the top here and look at our head we do not have a head let's zoom in a little bit we do not have a head that says anything about uh the description of the page if i go counter we'll now notice right down here meta name equals description content equals this is tim cory's counter page go back off it it's gone go back on it it's back so this allows you to modify elements in the head in a way that makes sense for a specific page not just the overall site and again because the fact that we have this on the page i can make changes to this with c sharp so i can modify this um that's an extra tick there i can modify this so that it's using dynamic c sharp content so this instead of being tim cory's could be you know uh sue storm or john smith or whoever based upon which page you're on so again a modified uh c-sharp code so that's another uh modification to blazer let's look at some more let's look at what happens if we throw an error so i'm going to do something bad here i'm going to say throw new exception um this was a mistake okay now obviously i wouldn't just throw an exception in my code just for fun but what this is going to do is simulate what happens if your code breaks when you're running your application so right now if i were to run this page go to counter all looks good but if i hit click me it throws the exception let's hit continue this is what the user will see this unhandled exception has occurred see browser dev tools for details reload i have to reload the entire site in order to get this cleared well i used to now we don't necessarily have to do that now we can do is we can say well hold on may it doesn't affect the whole page may affect part of the page for instance what if i put let's get rid of that survey prompt what if i put um counter right here okay so now the counter is on the main page alright so now the counter is right here um and if i click this it breaks the whole page of course it pops out i had to hit continue and it breaks that whole page but what i can do is i can wrap this in a new statement a new a new way of doing things called an error boundary so i can say error boundary and inside here i could could just put the counter now we're gonna get a better option but this is basically a try catch okay so let's run this wait for it to load and now if i hit click me yes i get the exception but i continue it's just in that section it says an error has occurred in fact if i have multiple of these let's just put a couple on here and we'll put a header above this that says h h2 this is counter number two or count er there we go let me run this again so now we can do is we can see that even though this is an ugly page but even though i click here and i get an error and i continue i get the error here but this one is still live on the page now obviously if i click the button here it's gonna fail this one too but they're now independent and i could have one component fail a page but not the whole page again this is pretty ugly and not great so let's make this better so we can do is we can cut this out for a minute we can say child content and then inside there put our counter and then we can say error content and then inside here we can say oh let's say div class equals text danger and then we can say there was an error loading the counter something like that so now we have essentially a try catch where we try this if it fails we fall down into this meaning we're going to display the counter but when it has an exception we're going to come down here and display this instead so if we run this now i only wrap the top one just so you know but if we run this now and i say click me and i continue it says hey there's an error loading the counter but that's now a whole lot better than what this looks like which is that so you can put whatever kind of custom code you want or even c sharp code in there that you want to say hey this particular item has a problem but that doesn't mean it has to crash the whole page okay so that's now a really great feature i got really tired of this hey there's an exception that's handled it hasn't been handled the whole page has to be reloaded the whole site has to be really good now we can just say hey there's a problem with this specific one because sometimes exceptions happen and you want to handle them this way instead of trying to do a try catch on all your c sharp code because you can't always try catch everything so with that that's another one of my favorite things i think those are my my big ones those are the ones i think man this is just pretty awesome but there are others as well so for instance we could change this um this current count to be a passed in value so we could say public and let's change it to say current count and let's make it a property like so and we do have a change everywhere it references current count just so you know there isn't a a control dot to change that um like there will be a c sharp code that's because just so you know these razor pages are incredibly difficult to have intellisense and telecode and all the other stuff around them and the reason why is because we're mixing html and c-sharp in line and then having to figure out what is what so really difficult stuff that's why we don't have all the same features we do in just regular c-sharp but you have to do some modifying manually by hand but this now has a a property which is public so i can make this a parameter which means that i can go over an index i can say that the current count equals 34 and down here i could say that the current count equals six or nothing i don't have to say if i don't want to it's optional but now what that means is i can have a starting value notice 34 and six okay i'm a starting value that's that's been in blazer for a while but now we have a new option and that is come over here we can say supply parameter from query so now what happens is let's run this again and if we see that it's still 34 and 6. i'm going to count our page at zero but if on the counter page i would say question mark current count equals 37 i hit enter notice the current count is 37. it read the parameter from the query from the the actual url so we can now pull information from our url and use it to populate our values instead of just modifying it from the blazer side now you can make a modification here so that if you wanted to change this and say name equals and then in here let's call this count instead of current count like so then this will allow you to change what the parameter is named on the on the query on the on the the um url so if i were to say count equals 28 even though it says count right there it's still updates the value to 28 because i've now renamed this to count so that's how we now get data from our parameters so those the big things in for me at least those are the big things in blazer that have really made a big impact on.net six but there's a whole lot more let's go over to program.cs and just down here i'm gonna put um a comment section and we're gonna start listing all the other things that are in here that i'm not showing off but i want to make sure that you're at least aware of first of all ahead of time compilation for blazer web assembly wasm is short for web assembly so ahead of time compilation this can make your your blazer webassembly project run a lot faster in certain circumstances but it does sacrifice the compile time speed so it's not a silver bullet we use for everything but that is a possibility for certain applications dynamic components so we can now do things like having um let's see let's say the counter is the example we can load the number of counters and the starting values and all the rest right from uh from our c sharp code so we can say you know probably a better example is pulling users from a database we can pull users in database and generate new objects for them on the page dynamically so that's something new we also have the ability to call components components yeah there we go um from javascript so this is specifically for things like react or view or angular where you can create components in react angular or view that are blazer components that you can call in again angular react review so that allows you to bring just a piece of blazer into your angular app and use it so the the upload file size increased to two gigabytes so if you wanna on the input file uh which is just input file uh like that you can upload files that are up to two gigabytes in size now so it's a much bigger uh ability that we used to have so there are accessibility improvements and let's let us point out um one of those real quick if we go to uh let me refresh my memory here it's um not not there i think it's app yes so in app this is where we set up hey we found the page or hey we didn't find a page look at the the not found page so we didn't find a page we have this layout that that prints out that says with an alert that says hey sorry there's nothing at this address but now notice the role is properly set so this is it's not really going to affect a ton of stuff for you because the fact is just the the template itself that is more accessible the things that you do have to also be accessible but we could do that beforehand but now the template itself is a little more accessible a little more friendly for the the non-standard ways of using web pages for example screen readers where people you know can't see or whatever else this makes it a little easier for them which is a big deal and it's definitely a a welcome change so i would encourage you learn the accessibility for web pages learn how to do it well because just because you think you know hey i use the web with my eyes and my mouse and you know that's not the way that everyone uses the web and we need to be able to support a broader audience than just people who can see and can hear and can use a mouse and a keyboard so that's a nice step in the right direction so that those accessibility improvements are in there as well there's also the ability to manipulate the query string so you saw how i read the query string but now i can also in blazer manipulate that query string and change it that's really helpful for when you want to allow users to bookmark a particular user so you have one page that you look up a particular user and display is there but if your url is a generic url then when they bookmark that it's going to not know which user to look up so by manipulating the query string you can put in there the id or whatever else in order to be able to look that up later so that can be really helpful as well and i did mention before the the randomized castrol ports which by the way if we go to properties launch settings.json we will see the the randomized ports that are used so 5004 for http and 7004 for https you can change those so if you want to go back to make this 5001 and this one 5000 you can do that um i wouldn't encourage that i would encourage you to leave them the random that way you can use multiple kestrel instances at the same time and not step on each other's toes but um but that is an option to come in here and change it so everything for both kestrel and iis all the configuration is in here you can make modifications to this however you want to fit your particular needs so those are the big things that are in blazer there are other little things there's some edge case things as well i would encourage you if if you are really diving deep into blazer to check out the the change log and all the things that have come to blazer in.net 6. there's a lot of cool stuff in here again these are quality of life improvements you haven't seen anything here that's been uh that's a you know game changing really i think the biggest game changing uh change in how we do things is this program.cs but here's a cool thing if you have an existing application you can upgrade.net 6 without doing this you can still use the program.cs and the the the uh startup.cs um so both of those can be in place and it won't cause any problems so just just so you know that the upgrade process doesn't have to look like this you can go back to the old format you can still use the old format when you're upgrading it's just that when you're in this new format and you start from the new format you get this this new stuff so in the project itself there's a couple of things that we've talked about before with net six i wanna point them out as well first of all implicit usings they're on by default which means things like using system that's going to be that's going to be by default without having to see it using somewhere so if we right click on our project and we say open folder in file explorer and then we go to the bin directory we go to debug net six and look in here we will see that the um that in here whoops not the bin directory sorry back up here obj directory debug net six and then in here if we look we're gonna see the um the entry for our our global using so blazerupdates.globalusings.g.c.s this is a generated file do not modify it but if you want to look and see what the global usings are just drag that into visual studio and there are your global usings so these are all the ones that by default are added to our global using i have a video on global usings how to modify them turn them on and off add to them and so on but we're already used to a global file and that's going to be our right here imports.razer this is separate in blazer from our global usings so yes it's a little confusing i wish they would have just modified this file for the blazer project because the fact that this already serves as our global using but it is what it is so these are are our global usings as well and then yes they're marked as at using as opposed to our global using that we'll use in other formats so it's a little confusing because it's a new feature and they haven't worked out all of the the best ways of doing things but global usings is on or implicit usings i'm sorry is on by default you can turn that off just by saying faults here or deleting this line also nullable is enabled by default by default what that means is if you create a an object that you want to be nullable you need to mark it as nullable with a question mark so for instance if i were to create a string test like so it's going to say hey it's declared never used i could um you know say test like so but re really if i want to be able to say null here then i need to make sure i mark this as nullable which means i put a question mark in front of it saying yes that's okay not there though not in front test in front of string there we go so this now marks the string as nullable you can do the same thing with int you can do the same thing with bool you can do the same thing with your own types as well but just note that that's what that nullable feature is for is it it gives you warnings if there's something in there that's null that isn't marked as nullable that gives you a better clue as to are you expecting null here or not it's not a breaking change it's not something that's going to uh stop your app from compiling but it's going to warn you hey you might want to check this and either be explicit here or maybe you have a problem here because you're assigned null to something you don't expect to be no so that's another feature that's just kind of built into our our project but again you can take that off if you don't want that so a lot of these features and a lot of the new changes in net six in general are not things that you have to use you're not forced to use them even if the templates are set up right now for modifying them a specific way you can change them to the way that works best for your development environment these are options options are good being able to have these options is good and um then what you do those options you need to think through what your best practices are going to be okay so that's the new changes in blazer like i said there's a lot of stuff going on even more than we showed on video but i wanted to point out just some of these changes in blaze we just really cool stuff going on all this stuff applies for blazer web assembly as well this one particular is only for blaze webassembly but in general these apply to both blazer server and web assembly so you can try either one try it out let me know what your thoughts are what's what's your favorite feature here what's your favorite thing that you're like oh my goodness that's i've been missing that i wanted that i want to use that um i've got a few of them i really like all these features i'm going to be using all of my think all the ones i showed at least today some of these i won't use as much but i don't do much um angular react review development anymore but this is nice i like the fact that they're accessible now the query string manipulation that's gonna be huge i think because again being able to bookmark your application and have it load a particular record really cool stuff there so check them out try them out let me know what your thoughts are thanks for watching and as always i am tim cory [Music] [Applause] [Music] you

Channel: IAmTimCorey

Views: 25,429

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, asp.net, .net core, dependency injection, .net 6, blazor, blazor server, blazor webassembly, asp.net core, .net hot reload, blazor .net 6, .net 6 blazor, .net 6 features, .net 6 preview, .net 6 new features

Id: wT9EOfLghlY

Length: 39min 9sec (2349 seconds)

Published: Mon Oct 25 2021