Learn C# with CSharpFritz: Blazor Forms and Validation

[Music] so H [Music] me [Music] [Music] [Music] [Music] [Music] [Music] [Music] oh my gosh is it is it time I think it's time can did we do hit the thing there we go and 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 and today today we're going to be yeah I don't announce the date on on these streams today is is another uh live C with C Fritz episode it's so good to see you my name is Jeff Ritz and we're going to be learning about Blazer today in this discussion focused Open Session AMA style um a training that we're going to do talking about building web applications and with the Blazer framework building with with C look at that my hat's a little bit crooked there we go that's better and um learning how to build and and take advantage of the Blazer framework this this Rich framework of of tools that we have available to us that allows us to build on a server build to run in the browser and even a little bit of both and we're going to talk a lot about that today there's so many options that we have available to us we're broadcasting live on both YouTube and twitch we're going to have about 40 minutes of AMA up front here where folks are going to be able to ask questions we're going to interact with chat have a good discussion to talk about some of those things that are going on around web development Microsoft Technologies answer your questions live right here with uh no filtering no Cuts we'll be we'll be chatting away let me bring on the chat room they're they're right over here see that they're hiding in the machine here with me um let me say hello to to our friends that are here bright and early getting us started how you doing there fail to connect on Twitch John Peters here on YouTube Barry good morning to you in Kentucky Mr old player how's it going there um Eric is here on Twitch good morning to you Cesar on YouTube hey guys how you doing Ricardo good morning to you in Brazil hope you're having a great day you like the hat riddle time uh it I I have these made so the the Super C logo is available right a number of the net Foundation logos are available for you to download if you want to make stickers if you want to put them on websites if you want to use them the there there are limitations to how you can use them but if you want to use them in different places to promote and show your support for the various net Foundation projects and the like so there's there's also an fshp logo just like this as well um I'm I'm C Fritz so it kind of makes sense for me to wear this one so I I have a a couple friends that have have embroidery machines and I I asked my my good friend Georgia to make up one of these hats these Blue Hats right in in the perfect Superman blue color so um you love C Cesar you know I have um I have a number of folks that say uh they they've bounced around between different programming languages C Java JavaScript go rust and they keep coming back to C they keep coming back to it it's a great middle ground that gets you really good performance gets you all kinds of high level optimizations and framework content that's built and provided for you that makes you more productive makes you more efficient as a developer and like that's what I want I don't want to be writing code all the time but I want to be writing code that gets a job done gets tasks done and delivered and that makes me happy to to deliver and complete a project let me get some music playing in the background here this is uh stream Beats by Harris heler this is music that's dmca free it's royaltyfree you can listen to it wherever you'd like and we're just going to have it chilling in the background here kind of filling in the gaps as we chat and have a good time talking about tech there we go big thanks to Harris heler and his team of creators for making this music that we're listening to today how you doing there is it sonan in Istanbul hello hello uh Dr on YouTube says C is just Pleasant to work with totally agree there's a a group of developers a group of of researchers that are always researching and trying to figure out what's what's the next cool feature that we need how how is the technology ecosystem moving so that we can decide exactly what we want to enhance our language with right things are constantly changing evolving we've got new Frameworks and destinations and Hardware that we want to be able to deploy and run our code on so it makes sense to be able to evolve our technology our Frameworks our programming languages so that we can Target those new places C was started back in 1997 1998 we're when when we first started hearing about the the project coming together and when you think about that there was no such thing as mobile development iot development was a a glimmer nobody was really thinking about this Cloud thing at the time so to advance the technology bring features that make it possible to Target those other pieces of Hardware those other ecosystems that's some great Innovation we can get behind Cesar says started with PHP 12 years years ago C has always been my love you know what I think there's something to be said about that you know um the staying power of of some of these languages and tools and Frameworks that continue to get reinvested in um reinvented new features regularly really goes a long way um I I think about the folks who are who are using um Python and when they made the change from python 2 to Python 3 there was a a significant Schism Schism sure in in that ecosystem from folks that didn't want to make the migration I'm going to set a timer here for 40 minutes to get us started um and we will have a little bit of AMA a little bit of open discussion for that time because I'm going to go over to tag app so I can bring in some of the questions that uh you're talking about out there um Marcus with a a good one there um and her ratio so let's uh let's start going through here and I've still got some messages up there from last time that we can reference and talk about so let me head over to the main screen we can start talking about some of this so heading over walking over to the big screen not really walk and still sitting here and there it is so couple messages that are coming through I like this question coming in from Marcus what do I think of smart components in MVC razor pages and Blazer so this is this is something very interesting that our friend Steve Sanderson the gentleman who started and and put the first prototypes together for Blazer um he he started showing um this concept of smart components and um it is uh quite interesting when you take a look at this so you can find this atnet dmart components smart components and there's a couple videos that you can find out on YouTube that show how these things work but the idea is you have some rich bit of content that comes in some text and it'd be great if you could just have it have your form automatically break up that block of text so here's somebody's address information phone number and whatnot be able to copy that and have your component be able to isolate and break that down into name phone number address Fields appropriately very very compelling stuff the second one here is this idea of a smart text area where as you're keying in a response to something let's say it has information about the tone that that should be used policies that might want to be referenced in a text box frequently used URLs maybe you're building some sort of a ticket triage system to to respond and manage in uh incoming messages and to be able to get Ghost texts like that like we see in co-pilot that's really cool stuff that you can now add to your application I think this is very interesting last one down here is this idea of a SM a smart combo box so you have a series of items that you've listed in your combo box we've been doing this with pizza toppings but what this does is as you key something in it will find other things that might not necessarily be an exact match but get you pointed in a direction that somewhat match what you're talking about so they type in plane well there is no plane but there is travel and public transportation Hospital well are do you are you referring to health insurance or a charity maybe even car insurance really interesting stuff I'm going to drop this link into chat on Twitch it should get copied over to YouTube so that you can check out and learn more about these you can use these in your uh MVC razor pages and Blazer projects you need to hook up to an open AI or a uh yeah to an open AI endpoint you can use Azure open AI you can use your open AI subscription and you can get in and use those what do I think about them I think it's a prototype that is very interesting that will move us in the right direction for um building smarter applications right nobody wants to waste time keying things in when you can get something kind of solved for you get a little bit of of a machine helping you identify key data points and use them appropriately I I think there's significant opportunities to to work with this see a bunch more questions coming in over there let me see if I can grab some of these real quick um hey hey Carl uh we're doing well Chris Jones is here hello hello yep net 6 and above yep what is uh that's a good question I'll grab that one also um so let's dive back in here Horatio says I'm currently migrating an Enterprise legacy. NET Framework application to Blazer really enjoying the experiences thank you for the videos keep up the good work thank you Artio I'm glad you're enjoying that what kinds what kinds of challenges are you running into and importantly what things have been really easy to move forward can you tell me a little bit more about your experience there I'd like to hear more about that so that we can hear the things that we've done well for you and figure out what we need to improve so thank you for the comment um sonan with a question here how can we change the valid and invalid classes in validations bootstraps classes are is invalid or is invalid um you know what I haven't really dug into that that too much let me let me open up a notepad here and let me take a look at that um because I've always just relied on the valid invalid classes uh in the uh input components um that's a pretty good question I so there's there's really good reference Pages for those um and I don't think I don't think there's a property for it um but yeah but I could definitely see that being a useful enhancement let's take a look at the source code let's take a look at the source code like right that's that's something that's available to us right so here's the ASP net core source code um and uh let's do a search for input text sure so there's the input text component there's a base element to it build render tree blah blah blah blah blah uh there's a CSS class and okay so this inherits from input base all right so let's go find input base and let's see current value is string blah blah blah so is there valid valid message store let's see we got right like I don't know let's The Source codes here maybe there's something that that we can talk about here we go gets the CSS string that combines the class attribute with with a string indicating the status of the field being a combination of modified valid or invalid so attribute utilities combined class names additional attributes field class so there's a field CSS class here um let's go find that right can can we find field CSS class it's off of edit context okay so what's edit context well that's going to here it is edit context uh let's see yeah I want to [Music] find I want to find that no we're going to have to do a search is it hiding up here edit form no let's see if we can find it real quick edit context that's a field there we go there's the class all right so field field identifier notify field changed Marquez unmodified okay this feels like something that might be uh get field state so field State get value field States get value okay so what if we take a look at field State can we find something on that like walking all the way down this is so interesting sometimes so field State there we go and validation messages no I would have to do some more digging that feels like an interesting request to be able to on the edit context specify the uh the CSS class that you want to apply that's something um that's something that could be a potential feature um that that could be followed up on I like that idea so um let me see here python can be challenging there's was a bunch of libraries that allow different workloads C has new get libraries that get stuff done too from C can you wrap calls to python for something aiish yes yes you can um there's there's a number of ways to bridge Services you can stand up at entire python application make calls into it from C directly um you can also look at things like iron python if you want to compile something and be able to reference and call it directly Manan asks what is the correct way of implementing internationalization for validation and generally for Blazer so you're going to be looking at the resource strings that are available inside ofet this is uh this is another [Music] discussion that I should add as a feature here to to this series um so when we talk about validation and we talk about internationalization it actually refers to a key when we get to the error defining error messages you can Define the name of the key to look up in the internationalization resx files and inside those it'll grab the appropriate one for whichever language you're using if you're using um if you're doing internationalization with web assembly you're going to need to push those resx files to the client and that can get dicey because you might be passing a bunch of resx files for a bunch of different languages what I found and and where I've I've found some interesting success there's a couple of open source libraries built by the community that will store internationalization instead of in resx files in Json or CSV files and we can use those which are much smaller and we can request only the ones we need from the server and it would because they're static files they can be cached for a long time send those to the client so there's a bunch of uh bunch of content there CSS classes deter by a field CSS class provider right and how do we modify that so I I would have to do some some more digging on that CSS issue so um I'm going to mark that even though I'm not going to be yeah there is no property so maybe there's an opportunity to add a property my hardest part with blazer is choosing a component Library given fluent UI ago after the latest Aspire preview going down that path what's my favorite component Library I've had great success with um with the uh uh teler libraries I'm a long time I I used to work at teler so I understand the way they design and think about their components so it's it's it's a bias on my part but I've I've had great success with them mud Blazer a lot of folks use um tried mud Blazer but you think for me ideally smaller project all comes down to right how much time do you want to spend and how much do you want to load up components and ship so they can get significant you can call set field CSS class provider to set your own custom provider um I haven't tried that I haven't tried that set field CSS class provider let's take a look at that when we get into into the uh when we get into the uh the content later that would be interesting to talk about um there is one for everybody's taste you're right Frank how you doing hey it's our friend Frank bue hello hello um coming back over here um Carl comments and says I like this moderation tool did you write it yourself yes and no this is a a project this is is something that we've been working on and and I got a comment last week about this and and I'll I'll call it out now and in response to this on last week's video gosh Fritz you waste all of our time by only talking about the basics what the heck are you doing why does Microsoft waste all this time just talking about stuff for beginners you should really go and do something that's more advanced more interesting for other folks to learn from this is tags app this is the application that we've been building on my live stream that you can learn all about actually don't even do that go to tags app.net and it'll route you to the GitHub repository right now I'll drop the link in chat there if you want to learn more if you want to check this out this is an open source application this application you see me using over here this is open source you are welcome to download and try it out and write code and investigate and break it we've used it to we've tested it with the NFL kickoff this is a Blazer application that has a series of providers that connect in to many different social media websites so that we can interact with them and bring their content into live streams like this do analysis of of what's going on out there so we've got ways to pull messages out of azure out of a service called blot Blue Sky Mastadon twitch chat Twitter there is YouTube chat capabilities that need to be Rewritten they don't quite work well but we're getting a good experience bringing things in uh using restream but everything's customizable we can change this and make it look however we want so I can make this dark green save that change and I can use my keyboard properly and we'll get more of that information I can load up images for the backside of these cards more that we can customize in there and this is something open source that that we build on my live stream you're welcome to download and check it out you can follow me on YouTube on Twitch as we build this and discuss new features and and there's new capabilities that we're adding but importantly and in where this is the advanced content this is using a series of hosts under the cover it's using a whole bunch of threading there's many different types of Blazer interactions going here we're using bootstrap we're using um custom components that we wrote like this modal dialogue we're using all the features of the framework as as much as we can so we can learn more about the framework and it's battle tested and used live on streams like this one and we've also used it during netcon so netcon 2023 if you go back to the YouTube videos and you scroll through there you can see some of the hosts they've got a big screen uh uh right a surface Studio screen that they're touching and interacting with this application it's built with Blazer and they're able to use it and respond and moderate and interact so if you're looking for advanced intermediate to Advanced Blazer content check out tags app the work we're doing in there on Tuesdays and Thursdays over on my channel I'm going to start recording some summary videos of design decisions we've made how this works so on and so forth so that folks can can kind of catch up and also learn a little bit more about what we've built here so um yep fully open open source that's right Frank uh thank you Cesar uh you thought you recognized it from net conf yes yes indeed um Robert Robert Robert Robert sure last time I talked about Blazer State Management which method is I think you mean best uh cascading parameters injected State mvvm flux pattern is there anything newer to fluxor in this field I don't don't use the flux pattern I don't I'm going to use the stuff that's in the box so I prefer and and show and use cascading parameters injecting State I also load state from application State inside the browser right I want you in your browser to be able to save a little bit of state so that it remembers your preferences for next time you come back um so what do I prefer depends cascading parameters have a really good place but when you use them um you can run into a little bit of a memory leak as it's passing this same references to the same object around to many many different things injected state is kind of nice when you need to pass information into disjointed components that might not necessarily be referencing each other passing data into Pages like we saw last time we're we're sharing data between Pages as we navigate around the application so that kind of makes sense to use it that way but cascading parameters make sense to use when we have a parent page and we need to get data into the child components about the parent page or something the parent page is working on so that's important to be able to do so there isn't one that's best there's there's places to use each that have their tradeoffs that have their benefits that have their costs that we need to balance we need to understand and choose properly and that's why I try to choose and show more of these as uh as we go through here right and and why I've made the point as we're building and writing some of the code as part of this series that we're not necessarily writing the most optimal code or the best code to do a task right we're we're writing something to show a feature there are times that that makes sense to use for that feature when you look at and we talk about how that feature is implemented I'll make it clear that this isn't the best way to do this there are other ways that might be more interesting or compelling when we showed the the state of an order as it was changing because because your order was being being worked on and being prepared and then out for delivery and then delivered that the push of that state information would have been better delivered with something like signal r instead of a timer that was pulling data right when it's when it's trying to pull and and pull for that data while that that does work nicely in some ecosystems and some technologies you you see that where folks have built um I I think like the UPS website does this if I remember where it's pulling an API and every five seconds it goes and gets a new value from that API well that timer is fine um and when you navigate away that timer gets gets clobbered but you're making this this polling and you're putting extra pressure on the server when it doesn't really need that if you use a push mechanism with something like websockets like R does that connection stays there and stays open but there's nothing being sent across it there's a little bit of memory that's being used to maintain that connection and when you finally need it you can push that one message across and disconnect it that point hey we're done there's nothing more to say here that works nicely so we we'll get into those discussions around some of those topics uh let me jump back over here um thought you recognized it yep yep yep uh you like the the c cap thank you so what time do I stream on Tuesdays Thursdays same time that I start today that I started today 9:00 a.m. eastern time uh it 1300 UTC thank you fail to connect yep uh can we get AI smart components source code how it was built without internet it can work locally I the the code's right right here uh well not the the code the library um I don't if the source code isn't published uh can't imagine them well uh running the samples [Music] um so where can I find the source code haven't gotten clearance to open the code so they Microsoft can't just blindly publish source code when when we feel like it um there is a significant number of of lawyers and folks that review and approve what can be published and what can't there there are um there are always security reasons around how we publish source code how we interact with that source code because there are there are Microsoft customers that do not want source code published for the products that they use so there there are always concerns there are legal reviews that go through before um source code for things that aren't samples are published so if it's published great if not sorry there's not much I can I can say about that that is there are smarter people than I that are talking about and going through those discussions so um but evidently there are a number of people who are looking for the source code for that um yep not available so um we've got about 15 minutes left of uh of Q&A time here um I I but how was it built any idea built with.net it's it's built withn net so it's it uses open Ai and points to bounce data off of there there's training routines that are available to you inside the comp components that you can take a look at how [Music] they're how they're written how they work how to add them and get it trained so that it does what you're looking for so smart paste button [Music] um styling scoped CSS rendering an icon um customiz in AI inferences so um yeah there's a whole add smart components and then inference backend that needs to be declared and interacted with [Music] so that is a cool thing too yeah right I mean the these aren't these aren't fully supported um this is an experiment this is something that hey let's give this a try see what we think about it and if it's a good application and he what feedback we hear you you see these experiments from theet team and they're not always fully open source it's just a feature what do you think about this so you're welcome to download and try it out so Hey Stephen I'm doing well thank you for chiming in there on YouTube hello hello so um yeah getting started with smart controls and smart components and Blazer so add smart components um and now you can add right you need to configure open AI so specify some points get an API key and Away you go so um might try these sometime but for the the work that I've been doing building this application it's not it's not something that I necessarily need right now but might be fun to Tinker with as we go through and talk about other features other capabilities so [Music] um I'm only covering the forms and validation session today because the the next session coming up is the security session and I've got a little bit of I got a little bit of prep that we need to do for that session there's there's a bunch that needs to be done that we're going to cover as part of that so um I want to make sure that I cover that properly that I cover and and deliver some of the concepts that you're looking for um as we get into that and the challenge with delivering a security session is always nobody has the exact same configuration we can kind of take a shot and say Here's what a significant number of folks have here here's a generic idea of how to set up and do these things and when you need to plug in Azure active directory local active directory um um open ID connections to various Services well here's where you do those things but then the customizations that come with you the authorization and passing roles passing claims from those Services it it starts to spider and there's just not enough time to cover all of those topics and and cover them to the depth that are really needed um and and quite honestly I I think there's an opportunity for a a series of streams that will dig deep on each one of those and there there was a uh series of security team um identity team uh live streams that did dive in and talk about those things and quite frankly I think they need to be not so much live streams as reference videos so there's there's opportunities there so um you tried you you come on PO the message across there it is from the restream bot let me grab that message from stepen you gave up trying to get Docker running in WSL and windows uh running on it uh on Windows 11 arm well okay Docker on Windows 11 arm is not easy to set up I got it running on my arm device wait hang on you were trying to get I didn't finish reading that you were trying to get Docker running on WSL on Windows 11 arm on an M1 Mac Mac hardware Windows running I'm guessing in parallels on that Linux on top of that Docker on top of that you're virtualizing on top of virtualization on top of virtualization on top of virtualization there there's a point there where you've gone too far like you you're right WSL virtual Docker virtualizes on top of WSL virtualized on top of Windows virtualized on top of a Mac like there there comes a point there where you've pushed too far like um you're using wsl1 which was the recommendation I I'm not sure how many people are trying to do that level like why not just run Docker directly on Docker desktop directly on windows at that point which does work and we did do but you're running Docker on top of window and you can access it from WSL but you're at least limiting and taking out one of those levels of virtualization H you're really really pushing that hypervisor yeah it is Turtles all the way down um I'll go to this comment from from genga um did I scrape the comments or what method did I use to get the comments from the platforms I know YouTube has an API but I haven't really looked at the at the docs I tried using YouTube's API and quite frankly YouTube doesn't want you interacting with their servers um they don't want you querying their service for chat At All YouTube is not friendly to developers period they don't want you integrating with them yeah look you can do this when you read the forms and the documents and that they've written they are openly hostile towards you as a developer I'm using restream to get the YouTube comments pushed over to Twitch and I'm pulling them from twitch where twitch has has an IRC endpoint I can listen to and receive comments Google and YouTube do not want you interacting with chat at all when you look at and you read how their API is built they don't want you interacting with it it might be expensive it might be expensive for them then just prevent it and let me scrape it let me I mean scraping is the way that I'm going to go with it so that I can just have a browser window open somewhere that's echoing and sending messages messages into this that's where I think we're going to end up going it is the Inception movie all over again um yeah Turtles all the way down did you know that I don't have any idea how to finish this sentence what hey thall what so uh any idea how restream iio does it um they they went and and got the full contract they they have an API contract with YouTube so that's what they do um so but to to go through and submit for that literally you can't complete the form the way they have it built you can't it's they they give you 50 characters to type in Your Design documents there is a 50 character field for you to type in your design document they give you a 10m upload to upload a video that shows how your application works your YouTube why don't I upload a YouTube video and give you a link to the video on your own service that you yourself can watch because I think you know how to watch videos on YouTube you have a project ongoing that uses Firebase and part of the docs are confusing yes um I I am not speaking on behalf of Microsoft but in my personal opinion trying to integrate with Google services all Google services is extremely difficult as a developer and some of those Services when you read the documentation the tone is openly hostile toward towards you as a developer that's my perception that is not Microsoft policy that is not a Microsoft statement that is my perception of how to integrate with their services they've got fine Services I I use a number of Google services all the time we're broadcasting on YouTube we're we we use yeah we use a number of their services we search with Google and hey they're they they make some fine products they they can they can use some improvement in how they collaborate with developers to extend and add value to their services um where can I load my app state from indexed DB IGS runtime isn't hang on indexed DB isn't really a thing anymore um IGS runtime isn't hitting my JavaScript function when injected into my scoped service okay uh weaving mocha the there is context and and debugging that that you're looking for here that I I'm sorry I can't do over over a live stream um if you want to share some of that code in and that that so that we can take a look and debug a little bit you you can post a message in my Discord if you go to discord. CF fritz. it'll give you a login prompt to join the Discord there's a Blazer Q&A Forum there you can post a message with some source code my initial guess here is you need to load App State appstate loads and JavaScript load doesn't run until after render so you can't trigger that until the on after render um event fires then you can interact and do that that would be my the first place that I would look is how you are which event you are triggering to go after that to try and load App State you shouldn't be trying to use index DB right I think browsers are not making that as much available you can load app state from from application storage or session storage there are tools that will serialize that as Json and place it as a string out there the other thing to be concerned with when you think about saving and loading content from a browser and those storage spaces if the browser has cookies disabled if they've blocked cookies for your domain for your website you don't have access to write application storage um session storage or cookies you cannot write anything into that browser you'll you'll get errors when you try to write to it and when you try and read from it you'll get nothing coming back because the user has actively blocked you so those would be the first two or three places that I would look without some source code I I I can't give you too much of a response but that would be my hunch we're just about out of time here on the um AA up front let me grab just the last couple questions here and we'll go through through those um um Shara fudin asks any Microsoft products that use blazer with AI what are they okay so you're asking are there any products that use blazer with these components that we just published this week there are all kinds of internal projects at Microsoft that do use Blazer there are a number of products that do use Blazer they're kind of it's it's hidden under the covers um and the places it the places where we can talk about those projects those products that do use it [Music] um is I believe where's the case study who uses net there we go there's a number of customers that are listed here that are actively using Blazer and.net that you can go and check out um I don't think I don't think we there are messages that we've actively shared um about Blazer and Microsoft products for once again coming back to lawyers and and legal reasons we need to get approval before some of that stuff gets published um this is an interesting one The Academy of Motion Picture Arts and Sciences they use net and SQL Server you can learn more about about their stack there um because there's absolutely interesting things that you can see and they'll tell you about um do they use Blazer in this one no um yeah they use aspnet web apps on this one I thought no it's not there but you can check out the the customer stories that will tell you who uses what so there's the customers link that that have um agreed to publish and share some of their information so um but there there are a number of these that do use that do use Blazer that you can dig into and learn more about but there are are a number of Microsoft projects internally that are using it um and I'm not allowed to discuss if they haven't been published on that site sorry um so uh over here uh sarab uh good to see me thank you good to see you sir Rob appreciate you tuning in do I think it's a good idea to create a UI project a Blazer front end and back end API is separate projects initially no because I want to it when I when I start a brand new project I want to keep everything as tight as possible I want to keep everything as small and unified in one location so that I can iterate and build one project and get it delivered and and be able to debug and see how everything's working aspnet is built in such a way that it's it's pretty easy then to pop out those apis move them into a separate project and then build a little bit of connect connectivity so that you can do microservice type of architecture with those API Services living somewhere else making requests into them you could then set up grpc to do communication between those apis and your UI you can set up um open API if you'd like um you have a bunch of options available to you at that point but I I like to to start right until I I figure out and see how much I need to scale some apis more than others and where those architecture bottlenecks are where where I'm going to be pinched for memory or processor put them all in one place and then once I start really realizing oh gee this uh this uh whatever Accounting Service with with the business logic that's in it gosh it takes a lot of processing we should move that into its own isolated process so we can put it in a Docker container and scale that up on on machines that have more processors or we can deploy more instances of that and load balance across those so we can get better responsiveness and being able to to then allow my application to grow appropriately I don't know those as an architect until I have concrete evidence so I like to start having them in one project now of course in Blazer when I do decide that I want to use blazer with web assembly and Blazer server well even if I don't want blazer uh serers side rendering or Blazer interactive I need to separate out my blazer UI components that are going to be delivered and run in the browser that's we want that to be a separate dll that's only those components so we can minimize the impact keep that as small as possible that we're delivering into the browser that's a good thing so we're okay I'm okay with there being two Blazer projects there there was some work to try and make that one Blazer project and have it compile differently so that uh web assembly content gets delivered appropriately and and trimmed and linked appropriately so that it goes into the browser and server side stuff says all put together and on the server it was it was an experiment I'm not sure how far they are I purposely keep myself distant from some of that information so I don't accidentally leak things when I do amas like this um customer I might be a bit angry if you show their code on stream agreed um you can inject different implement ations yes absolutely what is the recommended architecture for Blazer that is such an open-ended question like what's the recommended architecture for Windows forms what's the recommended architecture for angular depends what are you trying to do are you building a game are you building a game server are you building uh are you building a Enterprise application are you building an application that's going to be facing the open internet depends what are you trying to do there's lots of options once you get experienced in in and you understand how the pieces fit together then you'll be able to plug it into your favorite architecture and take advantage of those capabilities so as an individual developer what does that mean I I'm an individual developer building this I don't really have an architecture that I'm following I have a series of providers that I build and you can see in the source code that that interact with the various services so I don't it's not a named architecture I have a a facade that knows how to reach into each one of these that operates on a separate set of threads and interacts with and sends information back to the user interface that we can present and share so sure you can use vertical slices absolutely yep um let me go to this question from coded [Music] beard do I know of any examples of how to add B Toc authentication to Blazer Azure static websites so that it can be so it can authenticate calls to Azure functions can't find anything so Azure static websites has authentication capabilities built into um the functions the function side of it so um Azure static websites uh I'll just start with off [Music] and um um yeah this um so if you want to use entra ID for authentication GitHub um there's information here about how to set it up you end up with these end points for provider specific routes um and you have login entries that go there Azure static websites then picks up and does some of that authentication interaction and sends information back to you at that point so that's directions how to do it um I haven't done this in a while but can be done and and you basically hand off all the authentication to that entra ID I think is going to get you there with the B Toc type of authentication that you're looking for so the smart component link yeah we shared that link a little bit earlier so all right I think that's all does it only work once deployed though doesn't work with local uh no it doesn't work with local Dev no um I don't think so I I haven't I haven't tried the uh the emulator with that so I I would have to Tinker and and explore but um you're basically handing off the authentication to out there so um all right I think we're about ready to dive into the code for today um I'm going to work in visual studio today so no you know what I'll leave I'll leave those sites up so we're going to work in visual studio today the source code for the workshop the the workshop content that we're on uh blazing Pizza Workshop this is this is where I'm I'm scratch working on this I'll share that link into chat so it should go across to both you and to both YouTube and twitch there we go you want to create a brand new blazer web assembly app I use the new or the old template uh use the new template it's much faster and you have uh a number of optimization capabilities available for you that I think you're going to prefer um great example gosh here I'm going to promote myself again I wanted to build a piece of of web assembly content my um C in the cards website this is Blazer this is Blazer server side rendered however the list of lessons down here and this is B this is is all based on the first series we did here on this um on this show uh teaching the basics of C this is web assembly all the interactions with this pager and the the content below it that's all web assembly you don't have to wait for that to load right it isn't blocking content on this page you get this ability to do pre-rendering and caching and display and have interactive content automatically with the new templates in net 8 with blazer can you deploy WM Blazer on static web apps with the new template no it's static so it's you're sending all the Blazer into the all of the Blazer web assembly into the browser it doesn't work exactly the same so you know um so I shared the link for for this um I have the source code down here running locally um I'm actually going to walk back and check out the where we left off after the state episode last time and um let's go up one here and I'm going to start the solution file and I'm going to kick off and have running out here the um the net watch components why is that taking so long to start like oh there it goes um I'll have net watch running out here so that we get instant refresh hot reload happening in in the browser for the application as we're building and working here you don't need to stay with the old template there is a newer version but it it's going to run effectively the same way so um yeah there we go so some of the files still open from where I was last time let me um now I want to close everything and we'll dive into this let's uh let's show where we left off last time so there are show it here there are four projects blazing Pizza blazing Pizza client component library and shared that make up this project blazing Pizza is our entry point this is the server component of the application the web server component so when I run net watch here it's going to start that up it's going to package all of our components all of our references and make those features that are necessary to run in the browser for web assembly make them available and deploy them into the browser and I get my blazing Pizza website so where we left off last time we added the ability for State Management here so that I could do things like put together an order click around and see well here's my older collection of orders that we've placed go back to my pizza and it still remembers my order here right it still has that that state that shopping cart that you see here saved in memory so that we can interact with it and there's options for where you may want to store that you you may want it to be can I shrink that browser just to smidge behind me hang on hang on uh yeah you no I can't no it's not going to work right [Music] um right this is um right uh let's see what can I do here right you you don't get this type of live update of the video anywhere else it's it's a feature that's only available here on my [Music] streams right push that up there a little bit and let me see if I can shrink and get just a little bit more I don't mind if you see my task bar that's okay there we go that's better now you can see the whole browser here okay so um what this will so it remembers our State and there are other places you can store State because I'm using an inmemory State object when I refresh the browser it's going to forget that's something to be aware of there are other places that you can store state of your application we mentioned a few of them earlier application storage session storage in the browser but you need to be granted right access to them now by default browsers will let you right into those storage locations you can by default do that however if a user has blocked your website from storing cookies you will not be able to do that what happens if the connection is lost when you're in the middle of an order does it still retain state in this case because the um because this is web assembly and it's running in the browser if we lose connection right so if the application stops and then restarts right I I can still right the application just restarted but I can right click out come back and it still remembers it because I'm storing it in memory browser side right that's important to know where storing things in application and session storage then becomes even more valuable is if you do lose connection if um I if the the if it's a mobile device if it's a tablet if not only they lose connection but right they they lose the application they have to restart well it's saved on disk on the device and you have an opportunity to load that back the question is how resilient does your state need to be you can go even further and push this state to the server and have it saved somewhere on the server right if you we all go to amazon.com to buy books to buy kitchen widgets and supplies I I buy cables for putting together and managing my home studio here but when you go there and you put things in your cart it's not storing that in memory or in your browser they're they're storing it server side and then they do other things with that data to recommend other products for you based on what's in your cart so this comes back to a little bit of that architecture question that we had earlier where do you want to store your state depends or does it make sense for you to store your state because you might have other business decision ision you want to make to add value for your customers so it it's a great question Stephen thank you for asking that over there on YouTube and we there there might be a combination of those that makes sense for you so things to keep in mind right and gosh if we store our our state our list of what's in our cart on the server well that means I can also do things like send a message to to my my parents hey Mom and Dad we're ordering pizzas tonight why don't you come over is there a pizza that you want to add to the cart and they can do that on their phone I can send them a link and they can add that to my card from their phone and I could finish and place the order there's interactions like that that become possible when we decide where to move our state around to but I'm showing just the inmemory state right now so that you get just a taste of what you can do with this okay so really good stuff there thank you I I I like diving into that conversation the next pieces that we want to build are when we place the order and at this point when we when we clicked place order it actually just went through and said okay your order's placed um how do you know where to send that like I didn't tell you where I live like you might know where I live you might know where I want to have that pizza shipped to because I've told you previously but I need to tell you how do we do that how do we give our application some input information not just clicking around on a menu over here but some additional information right that text capture of things like my customer name address and so forth and this is this is that that classic problem that we've always got to deal with we've always got to solve did I lose my other browser n there it is okay so um we're going to go through and we're going to add a checkout page along with the ability to key in address information as we're going along here okay so um let me move my content around here so that I can see everything fantastic so I want to add a checkout page let's let's start doing that um here we go so I'm going to go into visual studio and I'm going to introduce a checkout page now my orders my order details we built those to run server side last time and that worked out okay so let's start out with building and adding the server side so I'm going to add razor component sure and I'm going to call this um checkout. Riser all right so that we can capture that information in including the delivery address right if we look at our order down here right our order has a delivery address so I want to be able to capture that address information and pass it along to our delivery people so they know where where to ship the pizza where where they're driving their bike too right and so on and so forth so let's start building checkout razor here so I want this to answer it's going to be a page and we're going to answer on slash checkout that kind of makes sense that's easy to find and place content um and uh I'm going to put some content on that page so I'll just paste in a little bit of HTML to get us started here blazing Pizza checkout will be our page title um we're going to have an our order review component that shows we saw this last time um F12 into that that shows the list of pizzas and toppings that are on the order as well as the the total price so that's okay I need to get my order state in here and I need to know how to place that order so I need to inject some information here like that order state so let's inject order State and I'll just call it order State thank you co-pilot there we go um and um in order for me to place the order I need to inject we were we've been calling it The repository object here so I'll inject a repository object and right that's been set up so that I can directly access things with Entity framework when it runs on the server and I can access it using HTTP requests and apis when I'm running in web assembly so I have those two objects available to me I'm also going to need my navigation manager um so that when there we go thank you so that when I'm done keying in all my information and I click place order it routes me to the order Details page about that so on my right we had the place order component sitting on my homepage and that's sitting down here in blazing Pizza client so I'm going to reach in here and I'm going to grab that place order method I'm going to yank it from there and we'll create a code block here paste that in and it knows how to um now we'll rename that to Repository thank you so my repository object knows how to place orders and it's going to pass through the current order that we're looking at here um okay I need to update over on the homepage because now we don't have a place order that's happening here and this this button that's submitting and placing the order I'm going to change that to an anchor so that it's just an order button that when you click it is just navigating to the check out page so there's a CSS class here that is disabled um if the count of pieces that you're ordering is zero um and it'll just jump through appropriately okay um that's not too bad I can work with that so save that and if I go back over here to my page and I'll put put together some kind of reference and I'll shrink the browser just a little bit so you can see the order there behind me uh a little bit more a little bit further over the the order button looks exactly the same right so that makes me feel good that it looks exactly the same um let me make sure that everything rebuil I think that should work so I'll click order and it it didn't rebuild I didn't save things properly so save that let's oh I only did a net run I didn't do a net watch do a net watch we want this thing to update as we're going along here so right that's being put together sure right started there's my new browser all right so let's put together a pizza here and yeah put some hot peppers on it there we go place the order now it rounded to my checkout page it's got the appropriate title up there blazing Pizza checkout you can see it real tiny but my order didn't come through what happened there um that's weird right um Mark has a question on YouTube about the terminal I'm using this is Windows terminal um you can and I have a configuration on top of this called oh my Posh that gives me the power lines that you see down here you can download my configuration and instructions for how to configure yours including my little Fritz and friends wallpaper that's available also check it out in my files repository U GitHub comom C fritz. files dot files and you can find the instructions for this so my order didn't didn't flow through here why right like this this should have come through I I passed my order State here's the deal if we look at the code that we have over here that order state is on the homepage it's being created and managed on the homepage which is happening in the browser remember or the order State object we created is an inmemory construct so when we're rendering content on the server it doesn't have access to the things that are in memory in the browser so if we want to continue to use this inmemory interaction to create and manage that state which kind of makes sense to manage and run in the browser so that should something happen to the server right if it goes offline for a few seconds you can still have a great experience reviewing and placing orders for pizza I'm going to move my checkout then to the web assembly side so that it's available and has the content that's being managed in the browser so I'm going to go into my pages here on the server remove that and now it's only available down here on the client okay it's still listening at/ checkout it's still using the same repository interface but remember I have an implementation that that we talked about previously I have an implementation of my repository that uses HTTP client to go and fetch and work with that and our place order method here works with HTTP client to post the order to an API endpoint we we reviewed all of that kind of Plumbing last time so if I go back to my checkout page now that it's on web assembly side I'm going to force this to rebuild so that we can go through this process again and start building out a little bit there it is it's it's running over here I'm going to do a refresh so if I have a cheese pizza put some basil on it some bell peppers let's put some American bacon and I'll click to place that order and I don't have any content here where did it go where is it h here's what I've seen you need to do a little bit of a net clean because there's things that are linked and hanging out there that didn't quite clean up when you move things like that and and it's answering on the same location we need to kind of force it to relearn where things are so let's try this one more time and I'll just put a simple Pizza in there and I still don't have it and now Fritz is going to look at this and go what did I miss again I thought I had this I thought I had this um check out order state repository navigation manager there was something I did let me I'm going to cheat for a second and go back to my source code because I've already got this written and this was particularly something I wanted to show and be like oh look there it is [Music] um so components Pages check out oh I remember what I forgot so this component is sitting here and it doesn't have the things that are running web assembly side we have to also tell it that we wanted to run on interactive web assembly so I'll key that in it's going to attempt to hot reload if I go back over here and let's add a pizza no it we we need to rebuild there friend you're you're missing it right with great power comes great responsibility the flexibility to move things around we need to remember to include that when we want to declare things so I'm just going to add bake into this and now we've got the data all right so what did we learn by default things run on the server because I don't have a Rend mode declared globally they're declared per page because we're storing state in memory of the browser if we want to access and work with that state we need to run content in the browser then we can do things to push that state back and forth between the server and the browser there are options Available to You persistent session storage persistent local storage that you can use to do some of those things to store and persist in the browser Beyond just the current page that you're looking at right beyond the current refresh and memory instance of the application you're working on right this is just like storing data in a variable in a JavaScript script that's running on the page right same type of inmemory persistence but now because I moved my checkout page to run on the client and I added render mode interactive web assembly now it's running in the browser and bringing that content back okay so we have a checkout page that intermediary page that's going to allow us to review our order but we also need to capture the delivery address where we're going to send this to so let's create another component that will be our address Editor to bring back that type of content so inside my components folder here I'm going to in on the client I'm going to add address editor. Riser and we'll build out a little address editor here we don't want to header on there now because this component is going to be referenced on the checkout page it will that that interactive web assembly rendering is going to filter down and make sure that the address editor runs in the browser as well so I want to be able to capture the address that we're working with so let's take in a parameter it's required you need to give me somewhere to store and work with the address you're specifying and it will be a regular C property of type address called address and we're just going to initialize it if there isn't one provided the address is sitting here in this shared um class Library down here that has a number of other classes that that are those business objects we want to be able to share between client side and server side to make it easier to work with these things so nice and small just a couple of objects that we can work with so we have this address and it's a typical address you might see in in any application so let's put together those different form fields that we need for this and I'm just going to copy these in from the notes in the in the project so we have name line one line two City region poster code and then there's our address at the bottom so let's let's put that on our checkout page so on the checkout page so there's our order details right here uh right next to that I'll add a block for the delivery address with a little header up top deliver 2 there's our address order and it's going to take the order that's currently in our order State our inmemory storage and grab that delivery address field out of the order and specify that's the address we're working with right remember inet we can pass around classes they're reference objects right we have reference types and value types because this is a class right an order is a class and the delivery address is a class because we're passing that delivery address that class object it's a reference so the address editor gets a reference to that address class and it will be updating going going up the chain it'll be updating our order appropriately and the address Associated there will the review order allow you to make changes to the pizza Etc no we don't have that as part of this um as part of this tutorial you certainly could add those features that might be an interesting um an interesting step to try and take to uh uh test yourself and and add additional features you could certainly do that yes but um when I save that and let this update uh oh no address editor address it's not saved yes we need to restart now because I've I've broken it here we go and now I have my address fielded and because I I broke the application in hot reload it forgets all the things so now to your question um stepen if I wanted to edit the order well I I could just go back and edit my order on the homepage right so I do have that option to kind of go back and forth but if you wanted to add the ability to remove toppings here or remove pizzas or maybe add a coupon code that might be interesting to as a as a next step in in your exploration working with this tutorial to try and integrate and see how that works so let me finish showing you what we're going to do with this address editor here all right so um very simple set of fields there and I can start keying in whatever I want here right [Music] um sure Springfield Illinois 1 two 3 4 five there's no validation on these right it's just kind of out there and we want to be able to validate and ensure that this is delivered and and adheres to some basic standards that our address has and how we work with it so first piece we always want to make sure we do is of course add server side validation right at the end of the day your server isn't going to be tinkered with by your customers by the folks that are interacting with your website so to be able to to modify and add validation into your server is going to give you protection from any kind of um bad data that that might be attempting to get through our controller our orders controller has been decorated with this API controller um attribute so when we do place order here and it's receiving an order that API controller um attribute for all of the decorated methods inside of our our controller it's going to do a little bit of model validation for us and that model validation is is something that we can go after and enhance using the data annotations capabilities that are built into net so data annotations are very powerful feature that allow you to decorate properties with validation rules that are appropriate not just for in the browser but also for scaffolding and working with your data store Entity framework takes advantage of some of these same um annotations to build and design and architect database tables for you so you'll have the same requirements inside the database that you have on the front end user interface using the exact same annotation and you don't have to write any code to enforce it that's pretty powerful stuff and we can customize that and do interesting things with that we're going to talk about a little bit of that in just a second here let me go to uh um Hightech redneck on Twitch asks why do we almost never update the city state uh when the zip the postal code is entered that's a excellent point right now this is a dumb um this is a dumb editor it doesn't know the relationship between City region and postal code um there are lookup tables out there that are available where you know what if somebody does key in a postal code maybe we prompt for that first because we can derive the city and region appropriately from them right I ke in 12 345 well I can tell you right now 1 2 345 is not in Illinois 1 2 3 4 5 is somewhere in the Northeast um so there are intelligent capabilities that you can add with that um build in an API so that when you key that in it goes and identifies appropriately you can absolutely do that um we're just making this a a simple interaction um for now for the tutorial so thank you for the question but that absolutely there's another cool feature that might be fun to add to to create a postal code lookup combo box we talked about smart components earlier maybe there's a postal code lookup combo box that that we can build and publish and make available so that when you do key in a postal code for a given country it will look up that country's postal code table and give you the appropriate City region information sure there's there's an opportunity there to build and integrate something and I would challenge you based on some of the things that we've learned there's another interesting place to continue and extend this tutorial and try something different so I'm going to add some data annotations for these fields to do things like well I need to know what your name is you know so I'm going to add a required attribute over here this annotation and I'll include the appropriate using statement for it system component model data annotations this is available with with net all versions ofet that are available that are fully supported have this capability doesn't matter if you're on NET Framework net core net 67 or 8 this is available for you to work with and I can do things like decorate and say this is a required field and I want to specify that it has a max length of 100 characters I don't want you to keying in a name that's that's gigantic here it's most folks only need 100 characters for their name I I know there are some people that have longer names but 100 character is enough so that I know to go and knock on the door of Mr Fritz and and go and uh and prompt for and and deliver the pizza hey Mr Fritz I've got your pizza here for you so um don't most model apps cash some of the common details for entry like when you put in orders it recalls your address how does that work browser it'll do so that's not browser local storage that's actually um your browser will remember your address information So and I've I'm purposely using features and things here that don't show mine um so I'll add some max length entries here thank you Coop pilot for helping with that uh City well it's not just max length but I want to make sure we need to know what city you're in um yeah I think that's about right for the region it's required and max length 20 postal code you're going to suggest one for me there co-pilot look at that required max length 20 that works for me for the postal code so I've added I've added those attributes there so now um because of the order controller why aren't you finding that there it was right the orders controller because it has this API controller up here it will reject orders that don't have that are missing some of that data right so if I click place order here I get an error has occurred well what error occurred well it's right I I got an error coming back from the server Json value could not be converted when I look at the network um right uh um right I got a 400 error coming back from that bad request one or more validation errors occurred so the server is blocking if I'm if I forgot to include a required name field and that's nice and and I can do things to kind of surface that error information if I want to but really I want to be able to catch some of that information client side I want to be able to catch that before you even get there right so we can add validation into this with some of the buil-in Blazer validation components particularly we're going to use something called the edit form so I'll go back to my checkout page and where I was setting up the the checkout page here I'm going to add an edit form component this is built into uh Blazer real easy for you to reference and I'm going to specify that we're going to the the model that we're working on that we want it to validate is the order State order particularly the delivery address and I'll go down here now I didn't ask for that there we go [Music] um I'm it should be oh it's it's after the button down there that one that's where we need to put it okay so we're going to tell it to review and inspect and give us information about that order and I wanted to to validate those data annotations so I'm going to add an entry here for the data annotation validator component right this is what's going to tell the edit form hey I inspected the the object the model the delivery address here and applied validation for all the data annotations that are in it so the delivery address is an address it's going to inspect and apply validations appropriately for all of these um for all of these attributes okay and validation summary is going to list those errors from the validation piece of cake now we need to do just one or two more things here this button that onclick is calling place order well we're not going to be calling it from there and we're going to change this into a uh submit button instead we're going to place the order when we have a valid delivery address in the submit has taken place there's a couple of methods couple of event handlers on this that you can um interact with like on invalid submit so if you tried to submit and it was invalid maybe there's some cleanup tasks that you need to do or maybe you want to put some other error information on the screen you want to handle it differently whatever your business logic is you can do that here and interact with it so on valid submit we're going to go and call place order and place order is down here that's an asynchronous task that's going to go and do that crossbow on YouTube asks I want async form validation that that is right that is an event call back an event call back is asynchronous so it's going to trigger this and do whatever you need to do so you've got that so um now now when we go through through and we look at interacting over here if um if my name isn't on there and I click place order now I get in my validation summary that I added down at the bottom I get this generic the name is required message output there in this typical red text formatted there and there are ways to to change up the template of how this is formatted and displayed down there um you can see that in the documentation of the validation summary component we can change some of that text if we want that to appear differently right so if we look at the required attribute here look it it's already giving me some of the entries here um I can specify the error message there was the question about internationalization I can specify the error message resource name and that's the um the key that it's going to use to look up the appropriate translation for that message inside of resx files or whatever Library you might be using to do um to do that uh uh trans translation for you um so I'll add here error messager is uh what should we call you right and and that just reloaded so I'll click um I'm going to have to do a oh it's going to make me it's going to make me right and if I click place order yeah it still has the same message I'm going to have to refresh and I'll lose my [Music] information what should we call you so now that information is coming back through here and we can get this appropriate information right appropriate not just the the standard message that's output here you can customize it however you'd like for your application um Eric on Twitch asks can you have the validation colorize the form field needed spoilers that's the next piece that that we wanted to address here so if I want to add that information I can um and well I want to also put those validation messages let's do this part first I want to add those validation messages right next to my [Music] um one second yeah um if I'm want to add those right next to the fields so they're not hanging out down here I can add validation messages right next to the fields so I'll put right next to my input here a validation message thank you and I'll do that appropriately for each one of these it's not going to autocomplete these for me fine I will copy and paste for the win and just change this to line one change that to line two it's interesting co-pilot nope isn't picking up that hey look at what Fritz is doing let me complete these so finish that one and I'll update there we go so now not only do I have the messages down there in the summary at the bottom but now they're right next to the appropriate Fields but to to Eric's question well how do you customize these and that leads a little bit into the question we had earlier um about wanting to be able to change the classes so these are just standard HTML inputs we can add just like we had nav link that adds extra capabilities we can update these to the input text type and we're going to bind the value there I'm going to do the exact same thing for all of these not bind text bind value right and it will bind as a value the that value right that line two or the city name here as the value of that text box there we go this is this is the important part where you really enjoy watching Fritz type so so now I get a little red outline around them that indicates these are invalid so that red outline when we Mouse over it comes from it's been decorated with an invalid class okay now that um yeah that's okay that's easy for us to pick up and triage and and do something over here now there was a question earlier gosh I'd really like to make that some other value and the the resolution we heard was well there's a a set field CSS class provider method let's do a quick search for that [Music] um so we can specify and change that here okay so there's the edit context right which is the the context of the component that of the form that it's working on and it's working on this model object and being able to pass in another provider to to work on that that specifies well here's the field so it looks like that's an an appropriate solution for this um I've only got about 10 minutes left um yeah let's do this let's do this real quick so there was the comment that we had earlier was um the bootstrap glasses are is is valid and is invalid so let's try adding that like why not right you don't you don't get this anywhere else this is the advantage of the the live coding fun that we do here on the stream so uh let's add a class here and I'm going to call this uh bootstrap field class provider and uh right it's going to be something like this um and if it is valid what was it is what's the bootstrap class bootstrap is valid is that the class [Music] name uhhuh uhhuh uh invalid uh valid was validated uh is Dash valid right and then is Dash invalid okay um so we need to turn that into context on our order page this is interesting so instead of just having a model because we want to interact with more of the context of what's being edited here I'm taking that out and I'm going to specify edit context equals um and I'll call this my edit context so we need an edit context and I'll call it my edit context um nope can't do that but uh thank you my edit context equals new edit context order state. order and set field class CSS provider oh it was right there it was right there come on friend new bootstrap field class provider so with that in play let's see how let's see how our application updates right so now if I click place order now I get nope it's still using invalid uh oh it didn't restart that's why it didn't restart we'll let that rebuild and then we will call this so there we go doesn't have an order yet so let's put some pizzas in the cart place order and something not quite there yeah the Json right I'm getting the the eror from the network the 400 over there so it didn't catch locally right um what did we miss right so one valid submit submit yeah um I don't know what it missed edit context on valid submit and it has the validations down there huh [Music] yeah um no I'm not sure where it's missing that because it's clearly calling into here [Music] um right nope it hot reloaded and it's still not no it's still not hitting it something with that edit context it's not picking up um I'm going to do some digging on this and I will have it updated for us next time let me because I'm right at the end of of time here but I know there's ways to make that work with edit context um order State [Music] order delivery address actually wait a sec because that's not the right object that should be passed in as the order that's why it should be order State order delivery address that's why did that says it hot reloaded nah still didn't pick it up give it one more try I was referencing the wrong order there we go so you see it has the is invalid bootstrap class attached to it and evidently I don't have those available for me to go for for them to be attached here but the is valid um invalid default entries are there um do it again and it highlights with the appropriate entry there and when I key in values it changes it to valid and that it's been modified so we get a green border on it in this case let me do some more tinkering with that and and add some information about that set field CSS class provider um and we can talk more about that next time so thank you so much everybody for tuning in this has been a lot of fun always great to talk through and and go through the various um pieces of the Blazer frame work and and I don't work with all of these things all the time every day so sometimes I do get caught with features extensibility points that I haven't worked with so I learned something new today too and and that feels good Campo with a question here how uh just endered the stream is there a place where I can find the start of the stream and older videos absolutely go over to youtube.com. net check out the CP with C Fritz series all right um that's all the time that I have for today there's other folks coming up there's more videos coming here live on the visual studio twitch Channel on theet YouTube channel lots of great content from Microsoft from the visual studio team from theet team as they teach you more about technology and all the cool stuff that we have building and coming with with new versions of net with new AI tools with new Visual Studio versions with Azure capabilities with net Aspire it's growing it's it we're getting lots of new things here this is the place to tune in to hear the folks that build and work on those things tell you more about them as they're getting ready to release as the preview versions are coming out all right thank you so much for tuning in I really appreciate you if you're watching on YouTube check out some more of the videos we have on theet channel there is an entire collection of these videos in this series available this discussion focused interaction teaching about all the things C Blazer that you can tune in and find there's um all kinds of other introductory videos available check out learn. microsoft.com and you'll find some great content there um tutorials some Hands-On walking through content that uh that we've written for you that we think are pretty beneficial and for those of you that are watching on Twitch it's time for a raid let's see who else is streaming on the big Twitch TV network that I can get you connected to that's doing something interesting out there um I you know what I think we're going to go over to our to our siblings uh channel here we're going to go over to the Microsoft developer Channel where they're talking about using generative AI to to get your startup together so let's set up a raid for those folks thank you so much for tuning in I'll be back on my channel tomorrow working on Tag app you saw me use it earlier today it's an advanced Blazer application completely open source that we work on um to add new features and build new capabilities I'll be back here next week talking about security as our next topic authentication authorization as we're building our blazing Pizza website but I want to make sure you tune in Friday at this time 11:00 a.m. eastern uh what is that um 1500 UTC on my channel youtube.com C Fritz Twitch TV C Fritz we're going to have a community-led event called modern. net web day we're going to be talking about architecture we're going to be talking about Blazer features open Ai and how you can use that in yournet applications we have some conversations about GitHub co-pilot we're going to go through and we're even going to learn a little bit about net Aspire so check that out tomorrow I broadcast on on my channel 9:00 a.m. eastern 1300 UTC Friday I'll be broadcasting and we'll be hosting that um that modern. net web day on my channels um at 11 a.m. eastern 1500 UTC uh let's go raid the Microsoft developer Channel there on Twitch thank you so much for joining me today I'll see you later byebye

Channel: dotnet

Views: 4,066

Keywords:

Id: Q-K4thzWXtU

Length: 121min 56sec (7316 seconds)

Published: Wed Mar 20 2024