Learn C# with CSharpFritz: Managing State with Blazor in .NET 8

[Music] [Music] [Music] [Music] [Music] [Music] [Music] e [Music] [Music] oh man did I get it right do I have the thing set up and this needs to go up here and let's do this over here I think I got the thing I think I got the thing it's set up right and there I am good morning good afternoon good evening whatever time it might be in your part of the world welcome back to the live stream my name is Jeff Fritz this is C with C Fritz this is a discussion focused uh uh live stream you're going to be watching the recording perhaps where we're going to talk about learning Blazer we're going to have it a excuse me we're we're going to have a discussion here where we're going to learn about some of the cool features of blazer with net 8 so that you can learn to build web applications and and have a good time getting engaged and and being productive with this new web framework that's available from our friends at Microsoft uh let me say hello to our our to the the folks that are out there watching in the chat room um hello hello chat room let me bring them up it is uh make sure I get this one right right is it this one is it that one I think it's this one yeah there we go there's the chat room there right over here hello hello um uh it's good to see folks pop in here um my gosh let me start up at the top Jay with a question from YouTube I'll I'm I'm I've I've pinned that question we will come back to that in just a few minutes um I want to make sure I greet some folks here lanky Scottish nerd good day to you sirly Dev hello I am not omnipotent oh my goodness um Harrison on YouTube a asks I hope that I go wh storing a bearer token from Identity we're not doing Security today but it's going to be coming up and we will be talking about how to connect security how that's going to fit into things here as we we move along um it's definitely part of the agenda as as we get into things here um continuing here let me I've I've got Tag app running over here and I'm trying to keep an eye on things coming in from the chat [Music] room and it looks like something happened we got disconnected there we go now we're getting messages um let me see here Adrian and Anon hello to you in Madagascar lanky Scottish ner nerd is Right authentication and authorization is just a little bit outside the scope of what we're going to be talking about today Robson Prato is here on Twitch hello to you in Brazil thank you so much for watching Steve is watching from Germany Frank is is is tuned in from Cuba hello hello coffee and en coding very good evening to you it's midnight in Australia oh my goodness oh my goodness how you doing there Wayne in California thank you so much folks that are staying up late really appreciate it uh sirly Dev is watching from Lancashire England um I got a problem with our our rexam AFC squad over there in Wales coming up with the nil nil result last night I don't know about that um uh is it bar is here they Vietnamese hello you'd like to do devops great not quite on the agenda for today we'll get into some devops topics around Blazer as we go through this series we will definitely be covering deployment continuous integration a little bit of uh GitHub actions a little bit of azure devops as we get later in the series right now we're working on those key development topics um how you doing there sadit in India hello uh aquac I I hope I pronounce folks names properly um hello to you in South Africa um continuing here Mahir is here from Macedonia hello hello um is it ssad says the problem with net and Blazer is that it is changing so fast once you learn something one year later it's so different let me tell you something can I let me Le let's just let let's just uh dial that in for a second here and going to I'm I'm going to go and and activate uh AMA mode here set a timer for 40 minutes so and uh let's let's talk a little bit about about some of that and we've got uh we've got Tag app running here so that I can pin some of your messages that are coming in and make sure that we get to these um so let's start with this comment uh um problem with net and Blazer is that is moving so fast once you learn something a year later it is so different so here's the thing here's the thing this can be said about just about any technology as net developers we've been quite privileged we've been quite uh we we we've received quite the gift from the Microsoft team that net Technologies when they do Advance are extremely backwards compatible here's the thing talk to python developers about the migration from python 2 to Python 3 talk to JavaScript developers about the migration from angularjs to angular talk about um react developers around some of the licensing challenges that they have talk to node developers about how quickly various libraries come and go out of favor you are thank you Microsoft I appreciate you interrup my live stream here so that you can force me to reboot we're not going to do that right now here's the deal all Technologies change that's the only constant in this space when you get in and you decide that you want to work with technology whether it's mobile devices it's the cloud it's desktop devices doesn't matter what it is technology is always changing nothing is constant yes there are companies out there that are still running their entire business off of a Mainframe that they bought in the 1970s buying Hardware writing applications and expecting them to last 50 years without modification is not realistic things change security issues happen new technologies Advance are you really connecting to that Mainframe with an iPad no if you are there's a series of shims in front of it that you built yes you didn't modify the main frame but you built a bunch of stuff in front of it so you could open a terminal connection and get into the main frame you're not using the main frame directly you've built a bunch of things in front of it that technology has changed and advanced so that you could adapt and support folks who are using phones and tablets and watches with your technology this is going to happen for everybody for every technology and working in the web space things move even faster because everybody's got input and and goals that they want to reach so stuff changes stuff changes a lot and and we we aren't even getting into some of the geopolitical changes that get forced upon us as technologists not just hey we got to move the technology forward because we want to support cool new feature or Hardware X Y and Z but then a government comes in and says hey you know what we're changing what daylight savings time hey you know what we're not going to allow you to ship data like that hey you need to start asking questions about privacy before you can start letting folks log into your application hey you need to prompt people whether or not they can save cookies into your browser because when they engage with your application stuff Chang let me get some music playing in the background here and we'll get things set up and we'll have some fun here today I'm going to play the stream beats synth wve playlist here in the background this is music that's dmca free it's royalty free listen to it wherever you'd like check it out at stream beats.com big thanks to Harris heler and his team of creators for making this music we're listening to today uh let me continue to to greet some of the folks here hello uh Albert in Toronto uh sonan is here from Istanbul Turkey um Gabe is a German uh living in Thailand how you doing there Big Daddy McCoy in Knoxville Tennessee love Knoxville love Knoxville it can be a headache that's right sad yes hello I'm sorry I can't read your name in Moscow umn net Cloud what is which best titch um are you I I'm sorry there's too many questions here I I need a little bit more what you're looking for there give me some more discussion here they made a bit of a mess when handling State when using Auto rendering mode that's there's a whole there's a whole whole thing coming there um how you doing there Al Allan uh this one here let me grab Wayne's message um hello gatekeeper in Indonesia Australia is where stevenh is Hello uh guacamole good morning to you hello to Eric in Ireland let me jump back over here to the waterfall let's queue up some of these um so um Harrison on YouTube is asking about about being able to see Bearer tokens with identity apis coming later on in the in the series we're absolutely going to be covering we'll have a whole stream focused on just security definitely coming soon um Wayne with this comment they've made a bit of a mess with hling State when using Auto rendering mode no no there's the we're not going to get into Auto rendering mode we're going to focus on web assembly uh State Management today and we're going to show you a little bit of the interesting things about that because when you when you think about the various rendering modes that we've been learning in Blazer when things render on the server or things render in the browser where you manage the current state of the user where you store their preferences the the current we're going to see today the current things that are in their shopping cart how you want them to experience that is different based on your application do you do you want their state to follow them when they're using web assembly do you want their state which means then that it's tied to their browser so if they're working in Microsoft Edge and they open a Chrome browser it's not the same shopping cart or do you want it to follow them on the server so that when they are in Chrome and they open Microsoft Edge ah they see the same shopping cart furthermore when they pick up their phone and they they start to browse do they see the same shopping cart uh then we want to keep it on the server or is there a mix of the two that we want to we want to consider ah now there's even more complexity with great power comes great responsibility the same can be said the the coraly in Tech with great Flex ability comes a whole lot of code you got to write and that's just the way it is and we're going to see some of that over the next stream or two um sad says all texts do change very quickly I feel often the same things are invented with a different name this is absolutely happening as folks in other Tech Stacks start to discover things that other Tech Stacks have generics in the C programming language were easily brought into typescript because they're written by the same guy it's the same the same language design team that build and manage both languages so when generics come into Java when some of these other features and Link you see starting to come into other languages right they're inspired and folks say hey I really want this feature yeah they bring it over um Gabe says I understand you can keep your old Blazer code with net 8 even with the new serers side rendering and Auto Options you bet you you can just straight update your version numbers of your libraries and your application will just work when you want to take advantage of some of the new um the new capabilities the new rendering options are key amongst those features you will have to do some re writing there's no two ways about that catching up here uh hello Muhammad in New York um I will grab this one uh I'll grab this one I'll grab that one [Music] um sure we'll grab this and I'll grab thind doll's message there as well um let's start with Muhammad here in the top right do I recommend Dapper with blazer for a large application I recommend you use the the data access technology that you're comfortable with Entity framework can be really good at doing Simple crud into a database table it can be really good with that however as soon as you want to do some denormalizing you want to start to do some some alternate data structures that than the kinds of structures that Entity framework will create and maintain for you you're going to want to write some userdefined functions or stored procedures that run in your database at that point Dapper executing those stored procedures is a fantastic choice either way I recommend repository pattern so that you isolate in one location how you're using Dapper how you're using Entity framework to interact with your database furthermore as we're seeing in our sample application here when you choose to move some of your data access interactions into a web assembly portion of the application well now instead of querying with Dapper or Entity framework directly from inside your component now you need to use an HTTP client to request that or maybe you'd like to deploy some of your data access capabilities into a microservice somewhere so you can reuse it across multiple applications by wrapping your data access in repository pattern you then have that data access isolated and you can choose to use Entity framework or Dapper or HTTP clients or whatever other technology to fetch and interact with that data it gives you that flexibility so the dependency injection with the repository pattern means you can choose Dapper now if you want you can change it to Entity framework later and your user interface is none the wiser so do I recommend it at some point at some point why not sure um continuing over here Survivor 28 says HTTP context is null in interactive web assembly mode um make sure you're logged in properly and you're passing your security um and and make sure that your your security context is properly coming down um HTTP context should be a cascading parameter that you're receiving make sure you have the I forget the security piece there's a cascading value that you wrap in routes inside your web assembly to get this to work um we do this very well inside the tag App application if you want to see some sample source code that shows that this application that you're looking at right here continuing on um and we'll get in and we'll do some more um we'll we'll talk more about that we'll show more about this tomorrow when we're working in tagap um and when we get into the security episodes we'll absolutely be diving into that um Survivor if you'd like to share a message if you'd like to uh dig in further have a little bit of Q&A um you can join me on my Discord server we set up a a redirect URL for that you can get to my Discord server now check this out uh at discord. cpf fritz. um Steven asks will I be covering entities and dto that's a little bit more of an architecture discussion so I'm not covering those directly we're going to be using some dto as part of this um but we're I'm not going into the architecture discussion between these during this during this series this is a a web framework series teaching and learning about the web framework that kind of architecture discussion is just a little bit off the path uh thall says when doing interactive mode web assembly or Auto you need to assume you can't do anything on the server absolutely um Dennis with a question here I hope to talk about recreating state after reboot of server so users barely notice the server changed or fail over this is a really good question I'm going to take uh I'm going to take a a uh note on this for a uh possible followup okay I don't have it in the queue for today but uh recreating State uh after reboot that's a very good uh good question question I think there's there's several things that that we can talk about with that including how um Blazer interactive server mode uh how it does its reconnection you can customize that that's actually something we want to customize in tag zap as well but this is uh something I'll take and and I'll look at for a followup in a future episode um trying to keep the server state is absolutely a good strategy here storing things storing State uh in a database so so that if the server does need to be restarted you can still pull the state back from the database it's pretty good strategy as well let's uh let's catch up here uh Blazer is stateful to begin with it is so you can store state in the browser as well so can you reverse scaffold with Dapper uh don't know don't know um let me see here um thank you thind doall for the uh message there uh recommended Discord group thank you big daddy McCoy yes we've had some pretty good conversations and and I want to do some refactoring of the Discord server I meant to do it over the weekend but I got distracted with a couple things and I was out of town on Sunday um that's a good um let's uh let's catch up on a couple more questions that have come in here love the questions coming let me know what you think of Tag app here how we're using this panel to discuss and and come back to your questions because I want to make sure everybody sees your question and when your folks are watching the recording um we can come back and highlight some of these things as well and it's a little bit easier to pick up on this um Moran on YouTube how you doing there Moran I always use Ado and write all of my SQL myself I have to run on Oracle and SQL server on multiple database instances where the schema is not necessarily in sync oo okay using multiple multiple database uh database providers here absolutely you're in a scenario where where I I would 100% be wrapping things and I I'm a big preacher of Repository pattern because if you decide to move some things from Oracle to SQL server and back again or somewhere else this is a a fantastic real world scenario where you're going to want to push that logic for maintaining these things somewhere else thank you for sharing morun yes that great uh real world example there thank you that's cool that's very cool um Gabe with a comment here since I'm working at my Microsoft well I'm not working at Microsoft I work for Microsoft I I work here in the cloud in in in the video Services right I'm I'm I'm just a guy with a ugly Xbox hat sitting in the corner of a video but here we go are there going to be some Microsoft learn certifications as there are for Azure professionals so there is a c certification that you can get um in a collaboration that we have with free code Camp um there have been similar requests for other certifications around Net Technologies um we're prioritizing and and scheduling and building those as quickly as we can I have nothing to announce at this time but we're working on more because we we hear you um I got to be careful not to do the KD Brit we hear you no sorry um Big Daddy McCoy recommends the Discord so discord. cpf fritz. comom that'll get you in and uh yeah there's there's been some discussion off and on there but we're we're leveling it up um we're going to have some better isolated areas for talking about the projects we're working on asking for help around various topics um I tried to jump in and do some office hours last night and it it didn't feel quite right to me so um I'll be I'm I'm definitely around on the the Discord server and responding to folks questions uh Marat asks I hope I'm going to cover on on premise hosting nowadays there's a lot of azure pushing I hear you um I will make sure that I um add that to the on premise hosting uh to the hosting discussion um building and delivering on on premise should be very easy to do because you can with all of our net web Technologies you can build for a container um so scaffold host in your own kubernetes instances you can build publish and deploy into IIs if you'd like to do that um if you'd like to deliver and run um if you'd like to deliver and run on a Linux server we have instructions for how to do that I'll make sure that I cover this when we get to the hosting session hosting and deployment sessions which will be a few week out but it's it's on the schedule um of topics yes fantastic uh continuing here how do you store open ID tokens to you and use them later to query a secured API spoilers coming up um we'll be doing this uh in the security sessions that we're going to have I think it's about two weeks out about two weeks out we'll be covering this in the security sessions um if you if you want to see how I do this with tags app with the application here behind me because I am you can see here um I am logged in as hey look there's my email as uh with my Microsoft token to this Blazer application you can absolutely see the source code how this is done um on my Tuesdays and Thursdays streams okay happy to go through and discuss those Discord link doesn't work what do you mean Discord link doesn't work right uh Discord C Fritz come yeah there it is try that again click that link it worked for me just there uh tags app and restream oh fantastic I'm glad you're liking that um let me see here tags apps in in good use fantastic glad you like that uh Hey pause uh random clippy in Seattle don't know about that uh a GitHub link to the tag or blazing Pizza app um so you can go to Fritz and Friends uh there's tagap and um I'll give you the link to the the workshop that we're working through here in uh just a little bit when I put that up on on the uh on screen uh you can run directly on the metal that's right um yeah Discord link work for a few folks getting a DNS eror uh do a hard refresh I updated the DNS for that over the weekend so it should be coming through I do have a great Blazer in clippy costume link work for Steve okay so three more messages Tred to join the server using Discord UI oh yeah click the click the but click the link and it'll jump you right through I I don't have a a rated Discord server so it won't pop through um life events and and marriage Trends Vlog how's Dapper how will it work with blazer works great works fantastic we've used it in the past and had great success with it what what questions do you have about that because Dapper does work fantastic with it um on YouTube Allan asks why is a net 8 app running on Azure Linux slower than its Windows counterpart is Microsoft deliberately slowing down Linux web app instances no we're not tell me more I give me some cont YouTube chat is is not a good place to discuss this type of thing um drop me a line on the Discord server drop me drop me a tweet um let's talk about this in fact the Linux app should run faster on the same Hardware on the same allocation of processor and memory it absolutely should not be running slower um here we go here comes some more messages uh have I tried fluent UI in Blazer tested and it's awesome but lacks tutorials totally agree at lacks tutorials the fluent UI folks um need a little bit of help they do have um right they do have samples um out there Microsoft fluent UI Blazer and there is fluent ui- blazer. net and H the there's a handful of YouTube videos here but I mean the examples are here and they're kind of structured the same way that you see samples for things like the bootstrap framework and and other Frameworks out there so what more are you looking for in the tutorial like for a user interface framework this type of hey here's what it looks like when it's rendered and here's the razor to make that happen here's the markup to to do that that that feels useful along with here's a list of all the parameters you can pass in and what they do so I feel like this is a pretty thorough set of documentation it's not a tutorial per se um so help me out what what are you looking for in a in a tutorial and maybe there's something that we can do there to to improve things so that is for those that are interested in a fluent UI There's the link to fluent UI for Blazer um let me see let me get a couple of here [Music] um all right bring up a couple more questions here we go from Steven on YouTube are there things in Azure to prevent me from getting a large bill for hosting a SQL Server database yes there are there are budget constraint that you can set up on your um on your account you can you can set up alerts and budgets so that as the cost goes up through the month of for your Azure account you can you can receive notification emails that say hey you're at 75% of your budget you're at 90% of your budget so you can decide to scale back the use of your resources and if you hit your budget maximum for the month it will shut cut off services so that you're done you've spent all the money you can for the month and and it won't charge you any further than what you've said is your maximum allowed um Jim I Scott ask or is it Jimmy Scott asks uh looking forward to getting into State Management we're we're going to talk a bit about that today we need to catch up and finish a little bit of what we started last time and then we're going to get into um we're going to get into State Management today uh Moran says IIs is and and Endor was great no downtime no client Interruption when upgrading web applications how would you do this with a net 8 monolith grp is still not supported on a grpc not supported on IIs um I think the issue is IIs doesn't support HTTP 2 I can't remember um how would you do this with the net 8 monolith with so several ways to do that the easiest way to do it is stand up a secondary instance of your application and do a DNS swap you can do this very easily with Azure app service other cloud services have similar features where you deploy and it stands it up it it'll stand up your application in a staging slot in any secondary hosting location and when you can verify ify that everything's working properly and then you can push a button and it will swap the staging in the live instance so that what was staging is now live and there's no downtime it it will bleed off right it'll drain users off of the live instance and put them on what was the stage instance so there's absolutely features to help you with that th doll chimes in and says lacking tutorials is unfortunately a recurring theme when it comes to a lot of component libraries professional and paid for and free ones as well it's one of the weaker parts of everyone I've come across yeah it's not a question of writing documentation it's a question of how do you write a tutorial that shows off 80 plus components like do you really want a tutorial or do you want sample pages that show here's the things in use and here's how they were configured like a lot of developers just want to be given the answer of how do I use this component how do I use this widget to return this user interface capability I like the way that thing looks how do I do that so um that's that's in from my perspective as somebody who used to work for a component vendor that was where we were uh we were focused um let's see here let's grab next two questions Albert on YouTube I'm interested in flu and UI but it is still having the issue to make it work on Android the work round did not work for me I I I'm sorry I haven't worked with the library enough that I can speak towards how it appears and works on Android um Daniel says mud Blazer looks by far much more mature than fluent UI it is mud Blazer is a user interface framework it built and managed by folks in the community that have been working on it since the beginning fluent UI was migrated over by Microsoft folks um from being used in various other Frameworks and it's um it's it's just a a maintenance thing because the fluent UI team manages many different Frameworks that uh that that design system is is built for um on YouTube WM asks do I know any Blazer CMS for net web API with mongod DB a Blazer content management system with net web apis and mongod DB no I don't know of one off the top of my head no um why Blazer like the this is something that could be built this is something that might be a fun open- source project for folks to build um what are your thoughts it what what gets you interested in this let me know let's let's talk about that a little bit so [Music] um up a couple more questions here what do I think about using mvvm in Blazer well Blazer by the very nature of how the Razer template engine works with the various state has changed interactions um gets you pretty close to mvvm user interface architecture gets you close it's not entirely there if mvvm makes you happy go for it I think it's a it's a fine pattern um I I just kind of use whatever I don't really use a design pattern with my user interfaces in Blazer um but it's a fine pattern to help force a structure and and allow you to um to to build a testable user interface where you can pull various components out and test them so it's not a bad idea steeve um Eric with a question here isn't the web engine uh Castrol I believe you're referring to uh it is supported in production yes uh is it supposed to replace IIs no so uh Windows internet information server IIs is an Enterprise grade web server that that's been hardened over years and years and has integration with active directory with Windows authentication if if you want to enable those types of interactions with the windows ecosystem and your Blazer oret application you're going to need to host on IIs definitely um definitely a feature definitely something that's fully supported um and it it speaks towards that flexibility of what we can do with net um last time I was building and working in in full Visual Studio 2022 today we're going to build and work in Visual Studio code and uh compile and work a little bit at the command line so I'm I'm going to make my way around to various ecosystems and environments so that you see you can be productive and work on these samples the the the lessons that we're teaching doesn't matter what operating system what editor you're using you can be productive and work in them if you tune in to my streams on Tuesdays and Thursdays this is this is a theme month that I host every year that I call minimal March and we uh we we build and work completely at the command line all month long so I've been on Linux using Vim with blazer this month um so um we're going to be getting onto a Raspberry Pi and working from a Raspberry Pi in the next week um and then eventually we'll be on a Chromebook as well because you can build and work on a Chromebook uh let me grab a couple more of these questions here uh is it Reggie on YouTube how you doing there is Blazer web assembly harder than Blazer server what do you mean by harder um harder is an interesting adjective here right more difficult to learn is it more is it trickier to understand is it uh more processor intensive what do you mean by harder um give me give me some details on this so uh Robson with a question about the last uh session that we had together here was working with the sample from last time notice that the rendering is causing a a second database hit yes trying to avoid that and I ended up using web assembly globally instead of per page and I don't think I catch the wise I love this question thank you Robson you're right you are hitting the database twice in in Blazer when you host an application that has web assembly components what it will do is it will pre-render those pages with web assembly when it pre renders those it's going to go through and everything in the oninitialized on parameter set and on after render those events all fire and it will um it will capture that HTML cach it and display that immediately from the server okay when the web assembly application is ready to go it hands off processing to the web assembly and and you'll see a slight flash in the user interface when web assembly takes over there's ways around this including disabling the pre-rendering instead of going to the database to get data that you're going to present the first time on the page fetch it from a cache somewhere put it in memory so that it's easier to fetch there's things like that that we can do this isn't uh a this is a real good question and and Robson I'm glad you're following along and you picked up on that because this is absolutely something that folks should understand and in some cases it's okay it's just fine um you should know that that that does happen um let me catch up just a couple more here um yeah caching will still cause a little bit of a flicker on page it will yep uh game asks Vim will there be a stream with the prim agent no sorry no um much respect to him and and his Vim editor skills but no uh Stephen on YouTube asks how is Blazer supported in support in vs code is it the same as visual studio um it is but the visual studio interactions I think are just a little bit better um vs code has just about the same editor there they should be in lock step there's there's a a few minimal differences there um I prefer um Blazer in Visual Studio you'll run into scenarios in vs code where it doesn't have up to it doesn't have the um the content and and the parsing of the C code in sync and you need to force a refresh to get it to pick up some of those things um Gerson on YouTube uh says with blazer web assembly I can access local devices like iot um you're in the same sandbox that you're in when you when you build and develop with JavaScript so can you reach out to other apis and things on the local device if they're exposed at with a port sure you can request them but you you can't reach in reach outside the the sandbox and and access Those sensors and things directly you're going to need something in front of them to interact with we're coming to the end of my AMA time here um pre-render if enabled works the same in Blazer server too time bet you're right we're going to do a little blazer server interactive server today let me see if I can grab just a few more questions um looks like I'll just grab this one from Survivor and then we'll move on for a Blazer web app is it possible to set it so initially everything is delivered via Blazer server then the whole app will be web assembly after load with some components with server interactive yes boilers coming up not today coming up we're going to get into that we're going to get into that H for games time for some blazer with Fritz well thank you there's my timer 40 minutes for the for the AMA is up thank you so much really enjoy the questions um I will keep tag zap out here [Music] um and uh we can absolutely get back into into some of that later uh Daniel when navigating from one page to another page that has to do some heavy task like loading data busy animation doesn't work instead you keep seeing the leaving page until the other page is ready watch what we do today Daniel you're running right into what we're going to do today that's exactly what we're going to talk about about today like yes that's right you're I there's nothing more for me to say yeah we're going to do that um let me do this let me yeah I'm just going to move tags app down there all right um I will be keeping an eye on on chat I won't be keeping as close an eye on it so uh folks that are moderators folks that are VIPs if you can help out with some of the questions that'd be fantastic uh Eric imagines uh Jeff in an Eric world in in a world with multiple monitors I've got to show you how I code when I'm in VR maybe I'll do that during during office hours on Discord at some point here I will absolutely show that maybe I can even record like a like a two-minute YouTube video showing folks around the VR space because that's exactly what I do with my quest headset I've ordered another there's a new headset coming out called visor I have a referral uh link if folks are interested in checking that out and want to buy one of those they're not it's coming out you can pre-order it now but it's got higher resolution than the Apple Vision Pro they claim haven't seen it yet um but I am very excited to see that made by the same folks that use the app that I use immersed VR on the headset really good stuff um you still want to see the VR setup oh yeah Surly Dev maybe later today this afternoon I'll I'll jump in or at the very least record something and show it so uh the link to the so browse to the uh discord. cpf fritz. comom open that up in your web browser and it'll get you through to the Discord server um this is is blazing Pizza Workshop there we go and I should open I I have to I have to do some dock updates on this but I will share this link for the workshop let's head back over to I don't think that's it is that it is that my is that the right page I think it is ah there yes it is okay this is the uh the source code that we're working through you can see I was tidying some things up last night um but this is the Blazing Pizza Workshop it's updated for net 8 I need to put it into some better folders but there's a couple of tags here for the various episodes that we're going through the start where we ended when we were working on the home screen in that our last episode and two this is the uh the the state that where we end at the conclusion of our state session here today okay he going to say uh the next episode should be sted the the next song uh so I'm working at I'm going to work at the command line today and I'm going to work in Visual Studio code because I want you to see that you can do that you don't have to be in Visual Studio this same experience works on Mac works on Linux I'll try and use the mac and and Linux uh on other episodes in this series because it's important to me you're important to me okay it's important to me that you feel comfortable using your favorite tools on whatever operating system whatever Hardware you have to build and work withn net we've we've gone to Great Lengths to make sure that all the code all of the applications work wherever you are okay um um just get a couple things moved around here you hope Microsoft is not replacing visual studio with Visual Studio coat not happening Mor no it's that's not happening but we we do support and and have multiple editors for folks that have different needs for how they build and work with their applications um let me so uh uh here's my list of tags here so I'm going to go back to one home screen thank you um and I'm going to open Visual Studio code for this folder hello there it is I didn't finish last time showing how to actually finish buying a pizza in the user interface let me start the application here um and I'm going to start it with a let's do this uh let's split the terminal you can see I did alt shift minus to split the terminal this is Windows terminal I'm using oh my Posh that's how I've got the power lines here my configuration is available on my GitHub if you'd like to download and try this out this configuration including even my background wallpaper um where was I so down here I'm going to drop back into blazing Pizza workshop and I'll just scoot that down a little bit up here uh I'm going to pop into the Blazing Pizza folder and I willnet watch um I'm all right here we go so there's this is the Blazing Pizza website it's fantastic order your favorite pizzas now operators are standing by is hot reload coming to VSS code I'm going to show you how you can use hot reload right now and you don't need it like net watch boom done um so we finished going through online um configuring and setting up our pizza customization here so that you can add pizzas to the the side panel here let me squeeze that down just a little bit more so you can see the order button down there at the bottom um so here's here's the deal right this order button we need to have that process and actually save data and I want this little x button to also remove pizzas from the cart that's pretty easy to do so we know that when we placed pressed that order button we put together inside of my configure Pizza dialogue right we had a not the toppings here we go here's the order button and we wanted to be able to say hey confirm and do something with this so we already know how to set up an onclick Handler here and we also set up an on click Handler for cancel but we have them pointing to these things um on cancel on confirm right well those are actually set up as parameters and we do that so that you can set for this component right for that modal UI that pops up right I want to be able to pass in to this window what I want want these two buttons to do so if I want to pass them in from somewhere else I need to pass in a delegate okay I need to pass in a pointer to a method that's going to be executed later so that's what this event call back is that you see here okay event call back is a delegate it's a pointer to another method that we can execute when we call on confirm or on cancel right when we execute these properties because click happened here it will go and execute whatever is passed into it so if I back up to the homepage here and we scroll down to here's my configure Pizza dialogue I'm passing in two methods for on cancel and on confirm so cancel Pizza dialogue here's the method so I want the inner window right the window component to call this clear out the configuring the pizza that we're working on and hide the configure Pizza dialogue nice that's pretty easy to follow and the confirm well if the pizza that we're working on if there is really a pizza there right add that pizza to our orders and clear out the pizza that we were working on hide the configure dialogue nice um larno on on Twitch is asking about editor required what's that editor required um that that we have there is that something that we should use almost like a required parameter so here editor required um it is effectively a required parameter yes um but if you if you put required on on these uh parameters you're going to run into an issue where you need to have an initial value set here to work with and um that might not be exactly what you want so by doing editor required it'll kind of force the issue up front right and at build time that hey this isn't uh there isn't a value supplied for this you're missing a value so editor required forces you to include so because I have that editor required there right if I go back to my configure Pizza dialogue if I remove one of these I now get my editor telling me Oh wait a sec you're missing something it expects a value for the parameter on cancel okay I make sure that that parameter is defined yellow line goes away all right so that's what editor required does it it helps to tell you hey you're you're missing a value that should be assigned the last thing that we built and added was at the bottom we had that order pizza button right so this place my order button here so on click we want to place the order well that we we have a Pizza Store object that we've been passing around right I've been using a repository pattern here to Define this so I have a place order method defined see here we go I can't F12 into it I have a place order method defined on that but because I'm in web assembly it doesn't it it needs to know how do I go and push that order into the database so I updated place order so that it says HTTP client post this Json as to the orders API my order that's it done so it'll upload all the contents of your order it'll turn it into Json post it out to the server so that it's saved to the database not bad easy to follow that's where we left off last time that gets you up to speed with where the the tag um where the tag one home screen left left off now let's start to do a little bit more around managing State and interacting with the application here okay um because there's there's things that we're going to want to start doing with our pizzas so after you place the order I'd like to be able to see the state of my order I'd like to be able to see the list of the orders that I've made in the past so I can interact with them so let's start doing that I'm going to start adding content for a new page to show um the the list of orders that we have and then we're going to manage State and and navigate around a little bit and show that we need to manage that cart a little bit more diligently so inside my application over here right right now I just have a a single page get pizza well if I want to show a list of the pizzas that I have I should have another menu bar item up here that says show me my previous orders so I'm going to go into the layout and our layout if you remember is being managed up here in my server part of the application called just blazing pizza and there's my main layout and there's the navigation button for that get pizza button so let's add a my order orders button and I'll just copy this in so it's just a simple anchor it's going to go to a page called my orders it's going to be a navigation tab it's going to have a little bike SVG as its icon and we'll show the text my orders so um I have automatic save set up so it does periodic saving in Visual Studio code for me so if I navigate back over to the user interface it's already been patched and hot reloaded to to the question that we saw earlier cuz I'm running net watch here at the command line you see hot reload succeeded okay and it added it added my button and if I click the button it doesn't go anywhere yet CU I don't have a my orders page so let's add a my orders page and I'm going to add it to the server so I'll just go up here and inside my pages I'm going to add a new file called my order . Riser and inside of here we're going to start off with a very simple page that says page my orders and my orders will go here so that's going to yes go ahead rebuild that's going to now be where we go to now it's running on the server it's going to be server side rendered right it's going to be a static page so when I click my order now I get and I'll wait for the alt tab to go away my orders will go here so I have a page that it navigates to so that's pretty easy to do let's add a title to this page and I can do that with the page title um directive here I'll use that component so I'll just save that jump over here and now my page is called blazing pizzas uh give it a second oh go over to my orders blazing Pizza my orders all right you see it up there on the tab bar so that happens that works because when you look at our um our app it has these two components the routes down here where it's injecting the content of the page and it has this component up here Head outlet where it's injecting anything that we specify that needs to be part of the header of our web page it injects content there from our components from our pages when we specify things like page title okay we can add content into the header of our page so let me catch up here um it okay continuing here we go just keeping an eye on things uh okay good good good good all right so I don't need to look more at that here we are on the my orders page so let me continuing so there's a little navigation problem here that we're going to to address uh when I'm on the get Peach of pizza page see how it's highlighted there it's got a little triangle at the bottom to show this is the page P that I'm on when I go to my orders it it doesn't show me that I'm on this page this is a nav Link versus an anchor this is a special component that you can use in Blazer that when you're on the page that it specifies it adds an active class to the Anchor tag that it renders so when I go back over to main layout here right the homepage is is the root of the website so it doesn't actually have a a slash or a homepage that it specifies when the href is empty and it's it matches the entire length of the requested path right we're on the homepage highlight that Mark that is active so when I'm on the my orders page make that a nav link so that when I'm on my orders it highlights and shows that is the active page so now when I click over there now it stays highlighted so when you're Building menuing Systems in your application nav link instead of just a plain anchor gives you that extra bit of awareness where your application is in where your users are navigated through your application so that you can show their information right you can show them where they are in the menu here's how you got here all right that type of thing so we want to display the list of orders here on this page it'd be really nice to display the list of orders so I've already got right I've already got a repository that knows how to get and display orders so let's inject repository and and I'll call it repository so and I'm I'm purposely doing this as a repository here right um because if we decide to move it it might change so the default code that was originally delivered said hey go get this with HTTP clant we're not going to go get it with HTTP client we're going to say repository uh um get orders async okay so it's going to go get all of our orders and return them into this orders with status uh collection now right my repository I'm running on the server now right is going to use this Entity framework repository that knows how to join through query and get all of that data all right so it's actually doing this behind the scenes but if I was running on the server I'd have to use an API running on in the browser I'd have to use an API to get that data so let's update and paint that information so instead of my orders will go here let's put a little bit more user interface there so if we don't have any orders yet show a little loading information there little loading block of text if we else if we don't have any order so if we did get a collection but there aren't there isn't anything in it well no orders have been placed yet hey maybe you'd like to order some pizza send you back to the homepage otherwise we're going to show the list of orders down here at the bottom and thought I did we save all of our Pages here I thought we saved that um where's the rest of my content yes reill and we'll see what that shows M here we go where's my user interface um think it through Fritz what do we got order some piz two show all parameter set mhm mhm right that should be using this get orders async it should return that what did I miss no that's everything um no why am I not getting any oh oh it's showing this block uh yeah okay so it is correct I haven't actually there are orders but it isn't showing them yet okay I was right um there's a question in chat uh on from YouTube uh slip soon asks why do I use on parameters Astin instead of on initialized async good question so these are two of the these are two of the event handlers that run as our application starts as as a page starts or a component starts to be rendered one initialize happens as the rendering first starts on parameter set runs after any parameters are set about the page that it's going to paint and load later on in the series um we're going to receive security information about who you are and only show your orders in order to process and handle that we need to do it on in the on parameters uh on parameters set event so good uh good eye there slipon yeah for picking that up um parameters in the page model uh yeah when parameters are set in the page model so uh um you'll see as they as we get to that okay so um the text element is important here for doing razor work because otherwise it thinks that's net code so in order to put a block of text that it doesn't think is net code we wrap it in this this fake HTML tag called text that's that's what the text is so um all right so I could go and reset the database so that we see the content that's out there um sure let me do that let me let me wipe the database real quick so um the no that's that's the right folder uh so I'm going to drop into the blazing Pizza folder and I'm going to delete the pizza database um I need to stop the server in order to do that because it's it's got those files there we go and I'll restart and it'll repopulate there we go there's the web page and if I click through to my orders no orders placed so it knows that there are no orders um and if I go and order some pizza uh just give me a really big cheese pizza just give me a really big cheese pizza and it didn't actually save the order I feel bad now what happened I thought we didn't we insert the order didn't we insert that no is this is this one of the things that I forgot [Music] to um oh something that I didn't do last time that I I hit kind of the the wrong way here um the interaction for the API to save the pizza is here in a controller so you need to configure it to allow controllers to be used so Builder Services I'm just adding controllers not with views just add controllers that one and down here I need to tell it to actually map and use that so app. map controllers so that will I need to actually restart the application and it will now be able to save pizzas we should see the insert occur here so I'll choose a I'll choose a pizza give me a really big cheese pizza [Music] order and there we see the insert happening okay so if I go over to my orders not showing any orders yet all right why text instead of span um you could use span Matthew absolutely you could use span um where I was doing that on the my orders absolutely you could use span there um nothing wrong with that span just turns will return and show that HTML tag on the page right but maybe you don't want to use an extra HTML tag then you can use text so as a tutorial we want to also teach you about the text tag you can absolutely use span if you want to but for a tutorial we wanted you to learn what the text tag was so why did I use controllers instead of minimal apis Andy good question there as well as a tutorial we wanted to show you that you can mix and match and have more complex order uh more complex controllers out here in addition to having some minimal apis as well for some of the simple requests like get me a list of the specials that are available get me a list of the toppings that are available we wanted to make sure that as part of this tutorial you sh you you were shown here are the various ways that you can build these and they all work together nicely you have your choice so um how am I logging the raw SQL calls while debugging that is configuration that is available as part of app settings it's logging all the information by default so when we're in debug mode it is going to log all of the info so Entity framework automatically shows you at the command line here's everything accessibility semantic HTML usage would make a span a tad questionable sure sure maybe a span with a with a uh with an ARA on it to show that it's a [Music] um right to show that it's a label right or it's a it's a content missing message something like that definitely options there so if we want to return a collection of orders I have a little bit of code that'll do that let me close that um I don't need to look at configure pizza but yeah my orders so right here let's replace this so we want to show a list group an orders list so this CSS is already built for us for each item in our list of orders so for each order item take a look at the order give me the created time give me the count of pizzas that were ordered the total price um status and uh give us a little track button there as well right no what is it I keep forgetting the format uh format document shift alt F I thought I whatever so and now when I go over it's updated and it shows me Wednesday March 13th my my pizzas were delivered and uh a little track button there so I can track my order now that it's just an anchor and it's it's been formatted as a button right but it's going to this page my orders and then this order ID so we can see more details about that specific order this page I want to I want to take a second here and talk a little bit further about this page because um this is this is something that goes a little bit towards what some of the questions we had earlier were this page is being rendered statically on the server the contents are delivered as clear HTML here there is no interaction just like the header there is no interaction with this where we need to do something to interact and do something interesting with the contents on this okay what if it takes to to one of the earlier questions what if it takes a really long time to get that data out of the database right so what if like this takes a really long time right I'll put it in for three seconds right takes a really long time to get data out of the database so it just kind of hangs and I I I get the little spinner there right so click over to my orders and I'm kind of I'm kind of hanging waiting and eventually it loads how can how can we mitigate that and provide a better experience with that right so what you can do to kind of get around that and make it a little bit friendlier is with particularly with the serers side rendered content we can add an attribute up here called stream rendering and what stream rendering does is it takes anything that we're awaiting like here and it will render as much of the website as possible and while we're waiting for something to happen it'll proceed and return and repaint in that content when it's done on the server right you've seen these places on in all over the internet where while you're loading content YouTube does this spectacularly while it's waiting to show you some of the other videos that are available it gives you a little gray square that that has a gradient that that um that flashes that pulses for you while it's loading to kind of give you this loading effect you get this just by adding the stream rendering up here it's it's already built in look it says loading boom it's a static page the content is being added and it updates for you you didn't have to write anything different but when I click into my orders it appears immediately and right now I've got a little block of text that says loading put a gif in there put a put a a a a progress bar that fills up whatever this is stream rendering that says ship as much stuff to the browser as you can and as the rest of the site is finished rendering painted in and that's how that works okay so that's stream rendering for your website doesn't put any extra pressure on your web server okay it just works nicely there a cube space spinner sure absolutely you could do that um that page is server side rendering and and we're calling an API endpoint no we're not calling an API endpoint I'm using a repository that calls that uses Entity framework directly you could use an HTTP client to call an API endpoint you can stream rendering if is for SSR not wasm um I think you can do it with web assembly I haven't tried it we'll get we'll we'll take a look later so the my orders page now is a little bit nicer has that live rendering returning stuff for us on screen right I I feel good about that but I want to click through and have an orders display page how we doing here I need to pick up need to pick up the pace so let's add a order Details page that'll show here's the details of my order so I'll declare this is a page that we're going to navigate to so it's at my orders and then we want to be able to pass in the ID of the order as kind of as a part of the path so we use this templating to capture that order right we're going to capture it as an order ID and it's an integer right so colon integer says this must be a number in order for this page to render okay so I'll save that and this should should have rebuilt and present it so when I click track show show details for order one okay um now if I if I try and change that to Fritz's order for dinner and stuff I get a blank page because that's not my order Details page it it that's not where it's going change it back to one and it actually knows and it gets there right so that's what the route constraint of that int does it prevents other data types from trying to sneak in here and there's other route constraints that you can use for your route to make sure that folks aren't trying to hack around and do something that they shouldn't be doing on your website right this is th this is a point where folks could try and inject some some code or something that your website doesn't want to be dealing with so adding a little bit of that constraint there it gets cut off at the router and doesn't try to present anything so um let's actually put some some content on inside of our code block here about this order that we're receiving so that order ID that's specified here is a is going to cap copied in and placed into this parameter right order ID is this order ID parameter and because it's a parameter that we're receiving from outside the page if we want to work with that we need to work with it on parameters set when the pages parameters are set then we can move forward Moran asks what happens if we change that value to two doesn't know what to do with it yet doesn't know what to do with it yet so we'll get there it's coming up [Music] um codo melon um we're outside the AMA part of today's stream I will pin that message and I'll try to get back to it when I get to the end of the session today no guarantees okay um no guarantees but I've I've got the message pinned there otherwise drop me a line on on Twitter or on the Discord and we can take a look so this page I want to set up so that it it goes and pulls for updates and tries to check to see hey do we have any updates about about the current um order and the way that it was originally done when it was web assembly was it it use HTTP client and go get it well I'm running on the server so I'm going to inject my repository and I'll call it repository so down here where I would be pulling for updates instead of saying go get that order with status right uh I'm going to say await repository get order with status and I'm going to pass in my order ID and you know what even before I start trying to pull for updates just go get a copy of it first like you know how to do that and I'm going to make this an async task so that it it runs this asynchronously and tries to get that order with status and I'm let's not even do this pulling bit yet let's make sure that we can get that order so id2 would pull data from the database we need to prevent this yes and no um so let me actually put the order here on page so up here where I would have this let me add some HTML if this is an invalid order let's output an appropriate error message if we haven't loaded an order yet uh put out a message hey we're loading otherwise here's when the order was placed here's the status and we'll show some more details about the order down here at the bottom so let me go back to my orders let me take that little timer out right I'll even make that 300 milliseconds just so you at least see that it's doing that bit right uh there it goes so show details for order one right um we're not getting that content yet rebuild rebuild let me see make sure we got this right Fritz there we go so order details track it and there's my content and I'm doing serers side rendering and it looks okay here but if I want to start polling so I can show you how the status is changing right that kind of interaction where we're going to check for updates well we can't we can't do that as as a a loop and push updates into the user interface because it's been rendered and painted on screen th this interaction to show hey I've got updates we need to do that interactively and that brings me to our next rendering mode um server interactive before I show that let me set up the poll for update so it actually starts processing so you can see that it's rendered statically and isn't going to do anything so I'm going to set up a task here called a polling task and I'm going to assign polling task equals PLL for updates and I'm going to have this return a task um and down here at the bottom right as it finishes its while I will return task complete a task uh oh no I don't need to do that that's okay good so that will run and be hanging out there in the background looks like it restarted let's get another Pizza so I'm going to order one of these one of those and some of this cuz chat room is hungry let's order place another order here there's my second order it's preparing so I'll click track and I want it to pull and show now wait a sec there's a big error back here hang on my my database context has been disposed because it's server side rendered everything's been delivered and it shut things down okay I don't need to do anything more but that task is still out there running we need to clean that up and we want to be able to push that status into the user interface so this is where interactive server comes in okay so I'll add interactive server just by adding interactive server now it says out for delivery and we [Music] should do that refresh it's going to pull every few seconds and I'm still getting this error here while it's trying to pull for status what's going on there it's trying to pull and it's it's getting disposed let's take a look at what's going on here so I'm going to bring up the network I'm not going to get to the state part of this uh let's reload and it's not actually getting into server mode here so even though it's marked as interactive server let me rebuild I don't have watch this it's in interactive server mode we need to configure the application so that it knows how to use interactive server mode you can't just decorate something as interactive server we need to configure it so that it knows how to use that so back to program and up [Music] here uh it's up higher there it is where we added razor components and we added interactive web assembly we also need to add interactive server so that it knows how to interact with that similarly down here when we set up the mapping for the routing so it knows how to do that we need to add interactive server render mode as well save those restart this and we'll get it so at this point now we're also using Blazer server that's right Robson yes how Atomic is the serers side rendering of server interactive does it resend the whole component level data for updates or only what changed um only what changed so now it says delivered and look over here it's connecting to SL Blazer and if I look at the response you can see it's passing messages back and forth this is interactive server all of your Blazer content is hosting and running on the server and there's a little heartbeat going on where it's sending websocket messages back and forth very very small messages back and forth um so that it can be sure that hey we're still connected right little three byte message that it's sending hey I'm still connected over here and it responds with a three B message so that it's sure that it's connected all right but when I navigate away that connection is automatically closed for us because the front page we know is web assembly so let's recap our front page is web assembly cuz we've got some rich interaction that we want to happen in the browser it's being pre-rendered for us on the server delivered and it's handing off control so that you get content running in in the browser really really fast really really responsive okay when we go to my list of orders well this is just a static list of here's your orders right it's effectively like a receipt right so this content I'm going to statically render I don't need it to update there's nothing magical we need to do about this let this be server rendered and The Details page here where we're going to update the status we're going to make this interactive server mode Robson asks Blazer server not Blazer web assembly tutorial purpose Tut tutorial purpose that's right I could make this static rendered and make just the status a web assembly component and have it listen on a socket so just the status updates but for the purposes of this tutorial we're going to make it the whole page interactive server so you can see the difference between the various modes and how easy it is to dial up and down those various render modes when you need them where where you need them okay now that I have all three modes available here inside my program file there's nothing more that I can add they're all activated and available for me so let me go back to order details uh I'm already on order details and let's start adding some more information about the various pizzas here so I'm going to create a component that lists here's the the contents of the pizza and that component I don't know if I'm going to use it on Blazer web assembly or if I'm going to use it on server but you know what I can put it inside my client library and just use it over there and I noticed I I forgot to create a components folder over here in the com in the client Library so I'm going to create a components folder over here and I'll also add inside of that a Pages folder right so um I'll put home inside there right home should be inside Pages uh I'm going to put configure Pizza item inside components there configure Pizza dialogue that's a component we'll put in there and um I'm going to add to my imports up here let's make sure we also have blazing Pizza client components okay um just to make it a little bit neater to kind of see where things are so let's add a Order review component here that'll contain information about to to show the various pizzas here so I'll just copy in some markup that so for each Pizza in our orders collection of pizzas show some information about the name of the pizza the size the price and the list of toppings then the total price at the end and this component will pass in an order once again we're going to mark this editor required because you can't show it a the contents of an order unless you have an order so let's mark it required all right now back on my order Details page I can reference and show those details here so I'll just add a little bit of markup for that right there we [Music] go so so track order details and then there's our order review component and we're passing in the current order so that it formats it nicely on screen and what rebuild that yes it does it does we added that it's there and there it is so I ordered just a couple pizzas didn't customize them or anything and there's my total right kind of a plain user interface there let me go back and let's make sure that our polling now works so uh order details in the polling area down here it should try to get the order with status and then it's going to call state has changed well state has changed actually happens right this is a way for us to force a refresh of content on the user interface well this actually happens outside of the main thread so we actually have to invoke this asynchronously so that's one thing that's kind of weird that that you have to do here and we'll await that to make sure that it updates the user interface properly same thing down here if there's an exception we'll invoke that asynchronously so let's go place an order and actually watch this update so let's add a let's take a base basic cheese pizza here make it really big add some Tomatoes I'd like some extra cheese ah good enough to start here place that order I'll go over to my orders page there it is being prepared there it is preparing and it's going to pull every few seconds and it should now automatically update and paint that status there it is you saw it update and you saw the console go by in the background it updated to out for delivery and in just a few seconds it'll update and show that it's um been delivered okay here's the problem with this page that's right you need to unsubscribe you need to clear up some of these things eventually right this is going to go through and do its thing and it's connecting to the server and it's checking for updates and eventually that's going to tick over and say delivered and it should update the user interface am I going to use signal R to push the updates I that's a little bit further advanced than I want to cover in this you certainly can do that we cover that extensively with Tag app on Tuesdays and Thursdays and we can talk further about that but for this demo that's just a little bit further outside the scope that we want to cover there it automatically updated and shows delivered it's going to cancel that task in the background if we didn't cancel it it it's going to sit out there and just keep pulling the database for us so we really need to make sure we dispose and clean up that task for us so we can implement we can Implement interfaces on our you on our razor components so I'm going to implement I disposable on this page and go down to the end of this page right and right in here I'll add an implementation for I disposable so if we're disposing of the page if we've navigate away and cleaning this up cancel that that token stop polling right so that'll cancel this the the task will complete and it will release and it won't be doing any more work in the background yes please restart the app there's the restart indicator as it's attempting there we go all reconnected so if I try and order another pizza here right and I go back through it's we're going to see it pulling here in the background as it tries to get information about the pizza right there it goes now it just updated right there we go so it's updating but if I navigate away there you see it stopped pulling right it's not going to pull and pull more more information right and if we look at the H I didn't load the network it's it's completely shut down the circuit it's not connected to the server to do that interaction anymore all right it'd be really great if when I complete the when when I complete order putting together my pizza and I click the order button here if it actually navigated to the order Details page and showed me that we can force navigation inside of an application with something called the navigation manager so I'm going to go back to the homepage and add the navigation manager to the top of this all right uh I'll add it right there and at the end of the place order method down here I'm going to have it navigate and go to the page for that order so place order should actually return a information about an order for me so when it does a post here there's actually a response that it gets and we can inspect and get the New Order ID off of that by thank you reading that content so if I go back over to orders controller so when you place an order it actually Returns the order ID that's already built for you okay so let's get that order ID and let's uh return that New Order ID well that New Order ID in order to be returned means this should be a task of type int which means I need to update my repository so that returns a task of type int and I'm going to want to go to my EF [Music] repository see place order I don't I don't even I didn't even finish out that instance but it should return any task of type int so back on the homepage um after I place the order well let's get that New Order ID right um and let's tell the navigation manager will go navigate to thank you co-pilot go to my orders for that New Order ID go show me what what's in my order show me the status so this automatically forces the browser to go to that other page all right and Yep looks like everything restarted here so if I start placing an order give me a Baconator rizer and uh I'd like some peppers on that too order and navigated me right away over here they're preparing the pizza the it's it's a timer and it's going to come back in just a second or two here and show me that uh it's out for delivery there we go nice all right um I've got about 10 minutes left you know what um State Management isn't too too bad I can probably I could probably do this pretty easily since our since our homepage and our shopping cart runs in the browser in this application we want to maintain our shopping cart that runs in the browser in the browser so we can put an order State object in the browser so that it remembers it CU right now if I go and and start trying to build an order and I I go away and come back it forgets this so if I want it to remember that order State I I can create storage for that so what I'm going to do is inside my client here I'm going to add a new file and I will call this order State CS it's a C file for order State um let's give this a name space right blazing Pizza client thank you um and uh wow wow that's not quite what I wanted but I will start with just a class here and I'll add this class you're no that's not what I want you're getting ahead of me here co-pilot so inside of my program on the client I'll register that so that it's available anytime that I need that state so I'll say Builder services at scoped order State and now that's available to me inside my homepage now right back to home and I will not not just inject my navigation manager but I will inject order State sure call it order State and that should be it it's just working in the browser right so I'll rebuild let it pick up th those updates and uhoh what's this what's this there's something in the air what's this cannot provide a value for property order state why is this what's happening right it's rendering on the server because it does that pre-render well when it pre- renders order State doesn't exist so we need to populate order State on the server also even though it's not going to have anything in it we've got to make it aware that hey there's a thing here that that you're going to want to be able to to at least reference so I'll add a using for that as well now with that in the mix I'll restart so that it picks up and has that new dependency injection configured and now it has the content how do you get SQL light to work it should just work it just build and makes it available to you when you restore all of your libraries it should be there I need to see what kind of Errors you're having uh drop me a message on the Discord or on Twitter with your error and we can we can take a look further at that so so now I have I have someplace that I can store State about the orders as we're navigating around the application so let me copy in what our order state is going to manage for us whether we're showing the configure Pizza dialogue the pizza that we're customizing and the order that we're working on right what's in our cart and we're going to copy in some of our methods that work with these as well from the homepage so that these these properties can be pretty much internalized as far as managing adding and interacting with them I'll go back to the homepage and now I'll go into my code down here and we can get rid of I'm not working on order here I'm not working on a configured pizza or the pizza dialogue it's all coming out of my order State you see look at all the red that I have here so let's start uh and don't need that method show configure Pizza dialog cancel confirm remove those aren't part of this anymore place order so we're going to place the order for my order State order and I gosh order State I this here I can say reset order because I there's a method now here called reset that just clears that out right allows us to do a little bit of um uh oh what's the solid principle uh open and close principle but all these places where we're saying show configure Pizza dialogue we're going to put order state in front of this and good here Order State order oh come on uh order State order order State remove that pizza uh here we go order State order right and we're just moving out that management of these and here Order States show configure Pizza dialogue this is the pizza that we're working on and those methods in order State um [Music] wrong should be that parameter so by changing all that over there it is rebuilding it's going to refresh come on there we go so now when I add a pizza there's my pizza navigate away come back and because it's in browser memory it's not so safe to dis but it's in browser memory it remembers shows this okay so we have a way now to persist content in browser memory as we navigate around our application there are other places you may want to store State you may want to store State on the server in the database on diss some other cache maybe reddis cache you may want to store it there so that folks that are logged in right you see this with with storefront websites like Amazon doesn't matter if I'm logged in here on this machine or on my phone or another machine or another browser when I'm logged in it shows me the same shopping cart because that state is managed on the server you may want to do that you may want to save State into the browser into disk or into a cookie so that it's available later when folks come back in this browser to interact with this website those options are available to you and we will talk more about those next time let me head back over [Music] to to the chat room here we are wrapping up um I see a handful of questions coming through uh let me see if I get a couple of these here that I can um sorry I'm not going to go back and bring things back up Tony you can rewind and take a look because I'm right at the end here um yes you can also use local storage when saving State yes um let me bring look at a couple more questions here um should we use I async disposable now no because there's nothing asynchronous that we're doing in the dispose method so no you can just use normal dispose there what are my thoughts on State Management for libraries for Blazers such as fluxer they're great idea there's a bunch of libraries out there that will take care of that and manage and Pass State back and forth between server and client you can have a great experience with them um but it's easy enough to put this stuff in memory for you Steve on YouTube asks what's the scope of browser memory will it still be there on reload no if you reload if if you refresh the browser so that it reloads it will not be there because it unloaded the application that's where you want to use some things like um application storage local storage I'm sorry in the browser and that is available for you to work with you're waiting for puzzle 26 coming soon Blazer puzzle that's our my other podcast alra on YouTube asks at the front page was uh SSR interactive would the state automatically be server handled it wouldn't be automatically server handled but you could handle it on the server yes by doing a similar but you would have to persist it somewhere um specific to that user yes that's all the time we have we are at time thank you so much for watching friends we've gone through a lot today and and there is so much more for us to cover I I hope you've enjoyed this we're going to continue building iterating growing this I'm going to update the uh the website with documentation with more contents on this if you have questions if there's content that you have want to dig in further on contact me on the Discord browse to come on give me that Discord there we go browse to that URL discord. cit.com you can join my Discord ask questions there there's a group of folks that are happy to respond and help you out I'll jump in there and answer some questions as well I'm going to try and have some office hours later today where I'm doing some work in working in virtual reality on software development so you can see how that works thank you so much for tuning in if you're watching on YouTube there's lots of great videos available for you check them out over here down below over there somewhere up here it depends on which YouTube application you're using there's great content available for you and if you're watching on Twitch let's get ready for a raid let's see who else is streaming on the big Twitch TV network that we can raid that we can say hello to and uh support them um and and have a good time um I'm going to get you connected to we I think we raided him last time and I think this is a fine raid um our friend the bald bearded Builder he's a Microsoft MVP and he's doing a little bit of co-working time it's a little bit of chill time to talk and chat with other developers who were doing things similarly and and have that co-working space to uh hang out and work together so that is bald bearded Builder his name is Michael Jolly have a great time with him my name is Jeff Fritz I hope you have a fantastic rest of your day I wish you good health and good cooking take care

Channel: dotnet

Views: 7,495

Keywords: blazor, dotnet, csharp, beginner, webdevelopment

Id: zPaRsU-kLrw

Length: 122min 19sec (7339 seconds)

Published: Wed Mar 13 2024