.NET 8 Blazor Component - LIVE CODING

with blazer components um you may be asking yourself okay what is a component so if you're new to this you may wonder what it is it's really reusable UI building blocks which means that we're going to build all of our UI component componentry with this component stuff inside a Blazer so anytime I'm building a page it's a UI component anytime I'm building a anything it's it's a it's a component and inside this component consists of four five things number one it's HTML markup and you'll see when I putting this together it's standard HTML markup which is kind of diversion if you've looking at react components and how those are put together it's not magic strings or anything like that you can use the editor to mark up your um your code with just pure HTML with some razor sprinkled in and we'll get into that um it also has CSS and we're going to talk about that too where each component has its own CSS file F and this is called um CSS isolation which means that the Cs that we put into our components only affect the component um this is a very rich feature to allow the components to behave properly when you're designing and make them look correctly um because you can have a CSS stylesheet that can't be changed with other stylesheets that could be in the project I'm assuming question about that I'm assuming Global style still applies on that right like it's specificity right intense cascading right so what happens here when you're creating the CSS is that it it puts a an identifier inside an attribute on all the CSS that's in this component and then you have to select it specifically for you to be able to access it so okay that's why you put it in isolation so that for example if you had an ID on a page called results in your component and and then you had an ID somewhere else on the same page those could be select elected separately because there's an attribute that says this is part of a component that it does at runtime so when it compiles it compiles a new stylesheet pushes it into the main stylesheet but they're they're all attributed out so that they can only be selected inside the component we'll see that in your demo here right I'm guessing yeah and we'll look at it the other thing that we're not going to show today but we also can do the same thing with JavaScript um I haven't had honestly I haven't tried this a whole lot and when I have tried it's been a little bit unsuccessful so I'm doing something wrong there but you can isolate JS code as well inside the component so that if you have code or variables or anything declared inside of JavaScript that you wanton you don't want to be stepped on with other things you can you can put that inside your component so your component can can ride with everything that it needs to function and look great now there's five main types of components on the first one is the app component now think of your app component it's going to contain the base HTML page it's contain the HTML tag and the body tag and every component that you build will be inserted into the app component so if you've built things before with HTML and you're kind of injecting things in HTML page whether using react or angular this is what this does but it is a component and this is very important that everything inside of Blaze is a component now you also have a router component and so this controls how to discover routes for web apps and this is out of the box really simple to do comparatively to other Frameworks out there this makes the routing really really simple and you just give it a route and then it listens on that route it's pretty cool so you can have slome or slab or slash index and you just declare it at the top of um your page all right we also have a layout component now think of layout components as things that you want to repeat over the pages so let's say like a nav bar and you want your NAB bar on the top of every page and you want your footer at the bottom of every page you push that into a layout component now you have to have an app component you have to have a router component and pretty much you have to have a layout component even though if you don't even have knv bars of footage you can make a blank layout component for things like landing pages and things like that so and each page can specify what layout component it wants to behave in so you can have more than one layout um if you have for example if you go over to an admin area and that has a a Navar and footer element you can have a layout for that but you have a user-facing app that has a different set of nav bars and elements and so you can have multiple layouts or just one then we have something called a page component now a page component declares a route at the top of it and that makes it um available to be responded to that means I could type in the route in the browser bar and that page will respond now a page is injected into a layout and a layout is injected into an app okay kind it works and then finally is what I call UI components and these are custom components that we're going to build think of them like building blocks so let's say that I need to build a custom component that I want just run and put it on a page whenever I want to and you put these in like new HTML tags so think of this what we're going to show you today is a component like a popup that gets me to sign up for an HTML um page now you might thinking why would you make that a component because I was I was registering for the Wall Street Journal yesterday Kevin okay and um when I was doing it huh paying for that now I'm I'm not now because I'm gonna tell you why I didn't but they had I think it was six popups after I registered that came up and says hey do you want this and I was like no I don't want that well how about this no I don't want that well how about this no I don't want that either and it was like four five maybe six like these popup components wanting me to enter information or register or something like that and that's really the Genesis for this demo because like wow if I had to build that I would make a custom component and just change the message and that's what we're going to do all right to show you how we could build a real simple component but then we could use it on any page we want without having to know anything about the component which is pretty powerful okay so what's like what's another example of a component too then because we're going to use it as a popup right or like a a little popup but is it could it be like a section on a page too is that yeah it could be a section I think another good example would be if you were building say a news site You're Building CNN or Fox News or msbc news or whatever it is and you want comments on the bottom of each article so you would build a comment component that would be injected on the page at the bottom of each article but it would be custom to that page that it's on so it's aware of the page it's on so you show the right comments and you can do that either through parameters or code or whatever it is and I'm going to show you how to pass parameters in these components so that we can modify them at runtime and it doesn't have to be everything at design time and that what makes it powerful now what's great about Blazer is from the ground up this is a component first framework everything that's going on today in the other Frameworks is we're tacking components on to these other Frameworks and they're not super well integrated like well this is how you do it and they always have some magic string or some kind of complex syntax um whether that be angular whether that even in current NBC if we're building like partials it's kind of problematic well Blazer takes a different approach and they're saying what if we made everything in a component and therefore the entire framework is built on components and everything you build in Blazer is a component every page is a component every layout's a component the app is a component the routes are a component your Navar is a component everything's a component so it just works when you put them on a page now components are clean which what I mean by that is use standard h2l markup to do it standard C code to do it there's no like kind of like cryptic syntax to do this so they're fairly easy to build once you understand how to do it and then components can execute and this is what's cool components can execute server side or client side and real real realistically it'll be both and what I'm going to show you is a server and client side the same component that can execute on either side depending on the render mode and that's where render mode Auto comes in for Blazer and that's what we're so excited about is because I don't have to build these two components that do the same thing but they behave different therefore I've got to do it this way for Server this way for client and then I got to figure out where does this execute where does it run I don't have to do any of that I just build my component I give it a render mode and then Blazer takes care of the rest execute it executes it where it needs to execute and I have to figure that out pretty powerful Okay so let's look at what we're going to build so um this is a popup here and I'm going to click off this here and notice here I've got this landing page here um never give up on your dreams learn to master your life mind a career so let's say that we're making you know a website for Tony Robbins or some kind of motivational speaker you know something like that yeah know so when me and Kevin retire from cter founder this is what we'll do we'll get on we'll give TED talks every week you know but if I refresh this it's going to go through the refresh page and then after a minute it'll come up here and say hey would you like to sign up for our mailing list and you've seen this on every site um that you ever go to anymore now what you may not know is these are called ctas or call to actions and if you've never had to build a commercial site before you may have as in case of Wall Street Journal six or seven of these things they just happen to put them all on the same page but you may have different sections of your site that would ask you to enter in information and I can tell you from Cod founder perspective we do this we have a popup that says hey do you want a syllabus we have a pop up T you want the five steps to get in a job you know and I think we have two or three we don't put them all on one page but you have separate pages that are showing similar popups and so to do this you would need a component that you can modify and then so I'm going to show you today how we could modify this text here um through parameters but if you take it one step further and you'll get the code here um you could enhance what I have today to maybe change the picture even change this form um there's a lot you could do with this and I'm just going to show you the simple one here of changing this what I call this heading and the subheading here to make it um flexible so we could put it on different places of our site all right so that's what we're going to build let's get after it yeah cool okay so what I thought I would do is this is visual studio um the latest preview that came out um on Tuesday so uh and this I want to go walk you through kind of the project structure they currently have and probably in November or January we'll be releasing a video onl like what our preferred architecture is to building out Blazer apps because it's really up in the air of how you do it and it doesn't really matter really how you do it it's just that if you have common pages or common folder structure where you're organization code it makes it easy to go from Project to project um and so in here you're going to see this um one project here is called a server side project this is Blazer component demo here and then over here we have our client project and this client project runs in web assembly you can see here that it's saying that it's going to run in web assembly all right now they're name the same with do client and that's important and then in here we have Pages inside of our client component here now notice here in this Pro particular project um I've got some other um pages in here but I don't have I have an error page and that's it and so my client side Pages run here all right so if I look at um this right here home you can see here I have page right here and this is how you do routing in Blazer you just give it an at page attribute and type in slash in the name of the route you want and just a slash by itself denotes that this is the default route now this is discoverable at compile time so you can't like have two things with the same route or anything like that so it's well thought out but it makes it easy to do if you've ever had to build routing for other Frameworks you know it's kind of magical how it works this is if you build a page you put a if you put a app page on it this turns this component into a page and now it's ratable and here the attribute here is saying how do we want this to run do we want it to run on server do we want it to run on the client and in this case we're saying render mode interactive Auto and this is brand new to rc2 so if you've been looking at Blazer over the last year this is a new way that they're naming it they're coming in with what they're going to to name it and this is interactive Auto which means that I'll either run signal r at first and then convert over to web assembly as web assembly downloads now one of the downsides that people talk about is web assembly can have a startup um problem with it when when you start it up it may take a second for it to download and start up I don't think that's the biggest deal as everyone makes it out to be but if that's a concern you can put this as auto mode in your p will come up right away and then in the background it downloads the bits that it needs for web assembly and then the next request to this homepage it'll run client side but either way whether this is running on the server or on the client our code doesn't change and that's pretty cool all right so this is going to be your standard layout you're going to have some server side things and you're going to have some client side things and you'll decide which of my apps or which of my pages I want to run where now um one thing that it does support well is um just completely static Pages where we don't have to make it any render mode and it just Returns the HTML so that's supported here as well we're just just a static render mode pretty cool all right so let's look through um a couple of things that's important that you'll need to know I mentioned that we have this base component called app this is app Razer and this needs to be in every laser application and if you look through here this is my HTML tag right here my head tag and this is where I'm going to add in things that I want in my page and you can see here I've added in some fonts and I've got bootstrap linked in here and I've got bootstrap icons linked in here so there's nothing magic about this it's a it's a really a standard HTML page that behaves like any other HTML page that you've been building um it's just in this component um but you can see here this is standard HTML markup no magic strings I'm not having to put things together and you can see here in Green in visual studio um it has some specialized components in here and let's look at this one this is called routes if I click over here to the route component this is how it knows how to find pages okay and so if it has an at page attribute this component takes care of that if it does doesn't find it it'll show you hey a 404 and also gives us the default layout and we can override this layout on a page by- page basis but we don't want to type in oh the layout for this page is that we can just say okay for all the routes inject the layout into these page unless you tell me something else okay and all standard right this is just standard out of the box just works and I can't tell you how simple this is to do it is this simple and so if I look at my my layouts here and I put these in a folder here um and you can have one to many of these and you can see here here's my layout and it's just simple HTML now with a layout component you got to have inherits layout component base so it knows to be injected and that's the only magic you have to do and then here standard HTML and you can see this footer is going to be injected at the bottom of every page and now also have a component here that's nested inside this component called top nav menu and so that's pretty powerful that we can Nest components as well and so here if I have my top nav menu here you can see this is nothing but HTML it's all it is and so this is a bootstrap menu this could be for example if someone's asking this can use Tailwind with Blazer and I tell people all the time it's just HTML CSS you can use any CSS framework you want you can roll your own you don't have to use bootstrap you can use Tailwind or you can just use something that your company's been using for 20 years you know your own CSS library and so whatever you do you just mark it up how you normally would build a page just like you would if you were building it in vs code or whatever it just runs in here and then you have your code block now none of these have any kind of code behind but it it begs to tell you that hey if you have something complicated in my layout out and I need to do things based on a user or I need to do things based on an area or I need to do things based on security I now have the code to do that and modify this nav menu like I want so pretty cool so that's an overview of how this works so let's go over to our um homepage here and let's look at our homepage and we're going to build our our component um right off the bat here so I'm going to close out the server project here and I'm just going to go into demo client demo here and I'm going to look at this page here and you can see I just have just some divs in here and inside of here I have some CSS and you can notice here that this CSS is attached to this razor markup page and um boom that's the CSS for this component I even have some really complicated media queries in here that um allow me to change the way this looks based on the size of the um the viewport and what we're going to show you in a project coming soon is we're going to use something even more powerful than this where we we look at viewport queries and so that we can instead of just doing a media query we can do other types of um queries here to really dial this in so if I run this I'm going to show you how the CSS um gets kind of put together so I'm going to make this big here so we can see it and you can see it it modified at my media query changed the location of this kind of cool um based on where you're at and this is all done through CSS so if we look at and we just um in inspect the page here and hopefully you can see this kind of small um a little bit small but um we can look at the stylesheets here I'm go scroll up here look around here and you'll see down if I go down here far enough you can see where it's adding in some attributes here to my CSS it's pretty powerful and this is makes it so that when I look in here we'll get right down into my container the button in here brand let me get down into the main here and you can see right here it says main B- IR for there's it's it's tagged this at runtime to know that this is part of this component in here and then any CSS has to be referenced with this tag here and that's how isolation kind of works it's basically changing it at run time so that you can't select it and you can see it's putting these tags on all of these pretty cool right and so you have to use this attribute to select class main title has to have this attribute here and we put this attribute also inside the stylesheet right so that's kind of how isolation works we'll probably cover that more in our courses about more detail but in general it's making each element unique in the component so therefore it can be selected uniquely through um specific U specifity selection with CSS it's really not make anything new it just says oh this thing has a new name and I need to use that name when I want to verify I want to look at the main title class here I got to use BG 4z 65 you know whatever it comes up with all right okay so let's um let's build our first component here I'm going to stop this and let's build our very first component and so I'm going to come into Blazer component because I'm goingon to get this component to run on the client and so I'm going to add a new folder here and this is kind of what we're going to do in our architecture and we're going to call this folder components this for us is UI components that aren't Pages these are building blocks and so while we could put it in the pages folder they're not really pages so we're making a little bit of a separation from that okay all right and um then I'm going to add a new razor component and I'm going to call it newsletter CTA this stands for newsletter sound it from a newsletter CTA stands for call to action you can name these whatever you want there's no magic names to these but once you name it that's how we're going to reference it throughout the code and click add here and so it's added a brand new component and you can see right here made me a code block and it made a newsletter H3 tag okay but what I want to be able to do is turn this into a popup so we'll start off simple I've got some HTML here because type in HTML according to Kevin is like watching paint dry so uh we won't do that can be we can explain it but watching someone type it is like h i rather see the code and the fun bits yeah so what I'm going to do first and foremost is I'm going to put a standard model in here straight from the bootstrap docks um again you could have used the HML dialogue you could have used almost any control that you want to use um I'm using bootstrap for this and the reason I'm using bootstrap is because when I do this in order for this to pop up I need to use JavaScript to do that and I want to show you that we can call JavaScript components from within Blazer using something called interrupt and um I want to dispel the myth of doing this because a lot of people say that this is a weakness of the platform it's really hard to do and you'll never figure it out and it kind of sucks and I'm going to show you that it's not that bad and actually kind of works pretty well okay so I've got a component here and notice here it's not a page okay okay so that's that's good and it just sits on um this page here right now I do need to add attribute here because I need to tell it where to run so I'm going to add my attribute here then um you put a square brackets here and it'll say render interactive mode Auto so that's what we're going to do that's how you turn this component Kevin into a component that runs on the server or in web assembly that's it that's what it does so that's giv choice of those two right yeah and it does it automatically and we don't have to go wire up anything else or have another file or anything like this at compile time it'll figure this out and tell it where to run it's kind of cool that's about all you have to do to do that all right okay so now that I've got this built what I want to do this is a component it's not a full page I want to tap attach this to my page here so I'm going to go over here to my homepage here and I want to put my U modal right here on the page here which is um you know pretty cool now what you don't know or may not know if you've never used modals before is models have to exist on the page that they're in they're just invisible to start off with and you have to trigger it through some kind of action to make it pop up but they're in the page itself they're in the markup itself self and this is why components can be so powerful because um what if you had to redo this modal on like eight or nine different pages of your website and what do you do when you want to change that and this where components come in well we can make this reusable and we can change it in one place it impacts all the pages where it's inserted and that's powerful so I'm going to add this here here now to do this we got to say hey you know what um I'm going to say using and I'm going to say Blazer component that's the name of my project and I need to say client that's the project that I'm in Blazer component. demo. client and then I'm going to tell it folder I'm looking for now they have a fancy name for this it's called a namespace namespace tells us that okay for the types in this folder in here blazer. client um what can I see all right and so now once I do that watch this this is cool I can in like an HTML tag oh and that's that component right there the one we just made and that's how inject that component then into that page yep and it'll do it at runtime all right and because this is a a popup we need to trigger some code to pop it up but if we run it right now it won't show and it shouldn't show right all right which is okay so I'm going to run it again just to show you kind of like how this works so the page came up and this is the other nice thing if you haven't used Visual Studio before is that we have an IDE a web server and everything right here in the box and it makes development local to my machine and also can publish it out to servers or whatever so makes it real simple for you develop and you can be real productive now they do have some stuff with hot reload here that as I make changes in hot reload this will work I've noticed that since this came out on Tuesday that's been kind of buggy honestly but they'll fig figured out because it was working pretty well the release before so it could be either something to do with that I'm running an arm windows and armnet on a Mac in parallels it real complex to make it complex and so maybe this works great on just a Windows machine um so but also too that when you're in previews you kind of expect that you know that it's going to kind of work so we'll try hot reload today if it doesn't work don't worry about it it's going to be fine okay so you notice that U nothing's in here but if I go look at my page Source here and I make this a little bigger um you can see that it injected it right there into the page here there is our modal inject right in here class modal fade CTA modal right there it's injected into the page it was that simple so this could been a comment this could be you know your tags if you're running a Blog it could be some side navigation a different section whatever it is uh you know your favorite component would be like the ad display you know where we show you ads on the side Kevin oh yeah you got buy a car or the TV sets you're looking at robot dog follows me around robot dog you know whatever you show in there so those those are components as well so really easy for us to do it now let's use JavaScript our next step so what we've gone through is how do we build components I just built one with HTML hopefully you'll see that's really easy to do how do we add the components to other Pages basically nested them that's what we did here and now this component requires that we use javascri script okay and so we want to use JavaScript to invoke this to pop up all right now I've already written some code here in this project here and I'm going to show you where it is and um this is I haven't got to work yet I'm not exactly sure why but um according to the docs you have to say window. show um newsletter modal makes this anous function and then in here we write our code now what seems to work just fine is if I call other things inside of the browser like local storage or things that built in the browser it works just fine so I haven't seen anything that doesn't work but if you're writing your own custom function vanilla JS um currently right now this is the way you declare it and maybe that's a weakness in it or maybe there's something else that I haven't got into yet and now as I learn more about this and write more apps we get into it but currently right now corner of the docs is you got to write it and so what I'm going to do is um I'm going to use document. ID and call this bootstrap function and this is in the bootstrap JS here new bootstrap modal and then I tell it what model by getting the ID from it and this declares a modal and then I'm just going to say okay now show that now notice that this is a bootstrap method call here so we're calling into another JS library to show it and that's why I wanted to show you this is not only am I writing my custom function but inside my custom function I'm calling into a third part of JS Library okay now how this is all Linked UP is if you look at our app CS or um excuse me our app razor you can see here down at the bottom and I've got my web.js in here and I need to add the JS that I want to run in here so let's do that real quick just copy some code here I'm going to put two lines of code in here that we can do and I'm going to put this right before here so what I've done here is um I've pulled in the bootstrap JS because we need JS for popping the modals and other other components in there and then this is my custom JS right here Noti this is the folder and the name just like you would link any other um Javascript file now here's the thing that will drive you crazy if you're doing this and this just comes from experimentation is that when they show you this in the docs they're putting these after the Blazer web.js here and the best I can tell that does not work and so these have to be declared before this runs okay I'm sure there's something in the framework or reason behind that the way this this operates is that this whole page must be loaded before we inject this into web assembly or wherever it needs to run so just know that that's is the order that this should be the last script file you load any script files that you want need to come before it even though the documentation shows otherwise it just doesn't seem to work for me when I do it behind the scenes all right so just a word of warning there so don't drive yourself crazy when you're like hey it doesn't see my Js why not it looks injected in the page it just doesn't see it because this thing loads these in in afterwards and if it runs after they're not loaded in the best I can tell right okay not a big deal there all right so now that we have our JS connected to our app razor here we can go back to our homepage here and I can write some JavaScript code okay now this is the specialized JavaScript code that we've been talking about it's called JavaScript interrupt and this is how if I'm from web assembly how I can get out of a web assem and call something in the browser or if I'm running on the server and I need to go through signal R how do I call into the browser it handles all that doesn't matter where this component runs we can invoke js on the client all right now what we do is here is we're injecting the um interactive JS runtime okay and this is something that's built into Blazer and if you want to use js on a page pretty much inject it right here just like that okay and then um inside my code here I want this to run during events now I haven't gone through this a lot um and we will make other videos about this about the page life cycle of components and they have some built-in methods that happen um During certain times you know on initialized and what I want to do is write a specialized function on this page life cycle and it's going to be protected and I'm going to override and it runs asynchronous and it's on after render async right and what this means is is that um once the page is completely finished rendering do stuff okay and so this only fires after the page renders um and typically um when you want to change how a paid behaves or you want to like we do invoke some JavaScript right um we don't want to do that until after the page is fully rendered or we could be trying to go after things that hasn't finished rendered yet okay so I'm going to write a JavaScript function so I'm GNA say await and I'm G use JS keyword here I'm show you why it's JS because that's what I named it that's right here in this injection I named this JS I could have called it JavaScript you know I could call it whatever I called it JS for short and now that I have the runtime in there I can call functions and so I can say invoke a sync and if it returns a string I can say the return type here and then I just give it the name of the JavaScript function that I want now notice I'm not telling it what file to look in or anything like that it's just going to go look through all of the JavaScript that's loaded and find the method just like it would in any other JavaScript file okay now you're probably if you're if you're new to JavaScript or you're writing a lot of JavaScript you're probably thinking hey can I pass parameters to my JavaScript absolutely you can just hit the comma here and then we can add in the objects that we want to pass into it that could be a string could be an array whatever you're doing that whatever your object that your um function would take you pass it right here so it's basically the name of the function in quotes comma and then the name of or the type of object you want to pass in and that'll be your parameters okay so you can call pretty much any method you want that is Javascript interrupt that's how hard it is to do Kevin yeah doesn't seem difficult at all no it's it's fairly easy to do so hopefully if I've done everything right um we can look at our code here and see if it's going to run here hopefully it does and let's save it and see if our yeah all right so that's the what that is is the um hot reloading oh so that's the error that it throws up yeah and I don't know if it's my machine or and and I hope people give me forgiveness this came out on Tuesday yeah and you literally put this together like yesterday so yeah I put it there yesterday so hopefully if this runs and notice look it popped up there so now this is our modal here that popped up okay it's kind of grayed out you know it's kind of kind of ugly um but it did pop up and notice here too I don't have any code here for the close or anything like that this is bootstrap doing this and boom it works refresh it it's going to call this method right here inoke async show newsletter model and comes up so that's on after render async now you'll notice a delay there um primarily that delay has a lot to do with that I'm running in development uh once you're running this in production this is lightning fast but in development it's a little slower you know maybe a beat slower it's not like really slow it's just a beat slower but once you compile it down these things are lightning fast and we haven't announced this we have a product coming out that's written in Blazer and you'll see how lightning vast it is pretty cool U but we'll talk about that more onet day in November little tease there Kevin that's what they call In The Biz is that what that was a little tease Kevin says you just guaranteed something don't do it that's you did that's I'm I'm not saying anything no we we'll be good that we'll be good all right so now I have this all wired up so now all I have to do is change how my component looks all right so let's close this down here go back into here and now I want to change how this looks and so let's add some some real markup to this so I have some more markup here and we're going to put some real markup in it now I will say this um the reason I'm not typing this in now is because I did spend a day maybe or or more building this out and testing it and coming up with how wanted to look and everything so um I didn't do this all at once okay but let's go through what I just did so I've got a modal in here that I pushed back in there and then um I've got a dialogue in here and then I'm going to center it and I'm going to make it large so this is built into bootstrap and then in here I've got the content area that I'm going to make transparent which means that it doesn't have a background okay and I want my modal to be completely transparent and then the things I'm going to lay on top of it um won't be and notice here that I have my motal body here and I'm going to round the edges here so it's got like this nice rounded look and then in here um I'm going to build out my graphic on the left side okay and then on the right side I'm going to build out my form now notice right here I have a logo here I've got some classes here and then I've got the heading here and a subheading here and I've got sign up today and monthly newsletter tips and tricks okay and then I have this form here now this is out of scope for today but inside of Blazer we have support for forms and so if you've done any web development of any type um you know that forms are crucial part of building out um um web applications when we want to post information back to the server and do something with it a lot of times that's done through a form and this is no different we can post forms back to the server and validate it run it through processes and come back with a result so we have a complete uh form model here okay now when we put forms together just like NBC we have to have a page model so let's go ahead and add our page model and our page model just says what are the fields what are the properties that we want in our form and in this case we only want to track the email address so we just need one form model okay and so let's just do that real quick and so in our cahan let's write our first kind of lines of C here okay and so I'm going to create a Model A page model and we say public M and I'm we call it email model could be called page model if you want to make it generic um but this is C and this controls the type of information that we want and in this case um this is a string of emails and we can also using um annotations here and say that this is required so it'll trigger a validation for us when we submit it say public and we give it a type and we'll say email address and getting set done C before this should be really familiar for you but anytime you're using a form it needs a model and that model you'll Define it right here or you define in another class and just reference it you can do it either way I'm putting it in the page right here okay now notice here this required is white and it's going to throw us an error but we can also bring in extra kind of using statements here at the top here to make it made those annotation annotations so I'm going to say system dot onent model data annotations these are really powerful that allows us to um use validation in our forms um we can make strings of a certain length we can make sure that it is actual email address or we can make sure that it's a phone number or a zip code or whatever we want to do um this allows us to do that I'm just making it required so if I submit this form this is going to be a required field all right now notice too that I have a button and it needs to submit here okay and um I'm not going to cover this I will maybe come back and add it but if I want to submit I can um write a function here and just say void I'll make this private excuse me I do a quick question about your email model class from somebody here yeah go ahead you want to know um Wiley wants to know is there a reason why it is made nullable when it is required because it's a string and so every type inside of a in net strings must have a value and um if you don't do it you'll get a warning okay and so it'll just tell you that hey this thing could be n and so we we even though it's required um we're in the habit of just making sure that it's nullable all the time so that we can avoid some of these compiler errors that we run into okay even though this is required you we we're just a standard practice to make sure that it's nullable so you can have you can avoid some errors that you come across or you can handle it yourself you could set a value here if you wanted to um you could put a value in here that's default value but it needs to always have a value for a string type okay makes sense so it's kind of a thing that we do I'm not going to go over this method but this submit button would call this we're not going to go over that today I may I'm not going to promise this hook this up to like a MailChimp instance later on down the road where this would submit to MailChimp kind of like we do at cutter Foundry right um just to show you how that could kind of work but for today we're going to leave it blank okay now notice here and then in our input text here this is in green these are specialized um inputs that are built for Blazer components and these are built into the box of um laser and we they have components for a lot of things and one of them's input text they got date they got all the controls for forms that you can think of um and these operate inside a Blazer and it gives us this right here now I'm going to show you the power this in a little bit in a second that's even uh more powerful but this is two-way binding means that the value that's in this input box is the same value of this variable right here okay okay so let's finish up our code here and then um I'm going to create another event here I'm going say protected void override void and um this is on initialized so this is one of those events that need to call um if we want something to happen when it's initialized and what we want this to happen is create an instance of this class now a class is just a class until you make a new version of it then it's an object and this needs an object okay so what we need to do is just inside of our page model here is declare a new and what I'm going to do is say model I'm declare it up here I'm going to create a variable here and we'll just say public of type email model we'll just call it model you could call it page model then in here inside of my initialization function I'm just going to say model it's null just initialize it or new excuse me not null new okay so this will create a new instance of email model because this is of type email model and then this allows us to reference this variable in our code specifically up in our markup here where we can say email model for this form is here and then in here it says hey look at this email address we've got a warning here hey this could be null but we're not going to worry about that all right um so if we run this that's our kind of our wire up and pretty much um when you're building complex Pages that's what you're going to do you're going to create a a model and you're going to map it to a bunch of fields I have one this could be 30 Fields um see come back back now notice here we've got our thing here let's make it bigger and it's not the best right so we got some stuff here um and so if you're looking at this you're like that's ugly I got this giant rocket here and I got this sign up today monthly news ser and it's down here it's really big it doesn't look anything like the sample any guess why that may be Kevin um I to the image size just off with yeah maybe we didn't put any CSS on it and so what I want to do is I want to come up here and um I'm going to add a CSS file to my component here so that it's always set correctly so I don't have any CSS here so I'm going show you how you would add that all right so I'm going to come here to the component folder here the folder Above This is at this folder right here I'm going to say add new item and I'm going to say stash sheet and I'm G find it down here and I I name it exactly the name of this component so I'm going to slide this over so you can see so it needs to be called the same thing news letter and this is a pattern you have to follow CTA knows the same Razer CSS and that's the pattern the name of the component. Riser file. CSS and when I add it the solution went away here well now it's it's it's attached to it so now when it compiles it'll compile this stylesheet into the global style sheet all right and if we look at over here an app razor you can see this right here is our compiled stylesheet that when I hit my compile button and it's running it's going through all the components and all the stylesheets and pulling them into this stylesheet here which then turns around and gets hoisted up into the main application and it's linked here so I don't have to link in a component by component stylesheet it does that formula compile time and puts them all in here and that's why it uses those specialized Keys um or attributes so it knows what style goes where and who who it belongs to okay so this is called CSS isolation all right now notice here and this is of note here that when you create it it'll put a body tag in here and I want to tell you like how this kind of works in a real short fashion is that um any tag or selection or css or anything you put in here has to be in this component if I try to override the body tag in here it won't work okay because that doesn't exist in this component this CSS is isolated to the markup in the component itself so if I want to to change this ad heading and subheading and maybe this logo here then they have to be in the markup I can't change anything out of it and that allows um that keeps from a component from breaking the whole site only CSS it can break of itself okay so if you have a bad designer he's only going to break his own component okay so I'm going to just create my CSS here and I'm just not going to type this all in because I I did spend a while doing this okay and you can see here I've got a lot of CSS in here that's referenced inside this component and you'll see the result here when I run it okay now I will say this that uh sometimes when we change CSS it doesn't automatically compile it in there and it just did I had to refresh it and did a a shift refresh and now my component um sees the new stylesheet okay it was cached before so that's how quick that is so um pretty powerful so now we have a really cool component very cool all right now let's look at one more thing and then we'll let you out of here so notice here it says sign up today monthly newsletter tips and tricks okay so let's remember that and let's kill this and let's look at our component here these are hardcoded what if we wanted to like modify this component based on the page that it was on in other words like if I'm on the homepage I want the message to say this I'm on another page I want the message to say something different and so what we could do is pass text into here to change this um on a page by- page basis and so that's what we're going to do and one of the things that's well thought out and I'm only going to show you one feature of this is parameters parameters can be passed in Via code they can be passed in through query string they can be passed in through forms um they can be cascaded down from the top to the bottom um You can call out and hit a hit a parent component there's a lot of things you can do with this it's well thought out um super powerful I'm going to show you how easy it is to add components to this it's pretty slick all right so we're going to have a keyword in here called guess what parameter right I could type then um in this parameter I'm just going to give it a name I'm going to say public string and um I'm going to call it message this is the second message that we that we saw our main message get our tips and tricks then I'm going to make another parameter so I can have more than one I can't I can have as many as I want C in as an array too I'm just going to do two parameters just to show you how this works and I'm going to call this one title that's how easy it is to do parameters now how do we use those well these are now variables inside the page itself so now we can reference these variables so I'm going to come over here and where this right here says sign up today and this is what really Geeks me out Kevin like when I that I can do this I can just do this get rid of this text here use my at sign say title I'm going to come over here and I am going to get rid of this say Aton message so now whatever the value of this is will be injected in this page at runtime now here's the other thing that we want to do is when we're expecting parameters from a component a good designer would say what if they don't send me anything what do I do okay and that's what I'm going to do in my initialize here I'm going to write some code to make sure that we get something and I'm just going to write some if statements in here just to show you that we can write if statements I'm going to say if title equals null set title equal to something I'm say sign up okay so this is the default value of the component going do one more I'm going to say if a message equals n and I can set message equal to something sign up and receive milk I spelled that right a bland message it works for the purpose of this now what's cool about one thing I did notice in Visual Studio 17 lately is now if you misspell text in here it tells you which is kind of cool oh interesting you know so it's a spell checker too it didn't do that before that's a recent Improvement so if you're like me and sometimes you can type things wrong fat finger things this will give you a blue underline say hey maybe that's misspelled oh that's cool you know kind of cool all right so let's see what happens so now what we expect to see is sign up today sign up and receive email updates that's what we expect because this is being set at runtime now so I run it and then when my component runs it's going to take the values out of here we'll let the on render async complete and then it'll pop up look at that sign up today sign up and receive email updates but kind of cool but you know Kevin like what's kind of interesting about this is that if I was designing this component for real I would look at the messages here and I'm say that's kind of bland I need something more something a little bit more Punchy to make them like make sure they sign up here you know email updates isn't exactly a great scta right but I want this to be Bland in my component design because I don't want to be opinionated on how the programmer should use my components I put something here intentionally bled and so what I'm going to do now is show you how we could call this from our home page pass in the custom message we want and override these defaults okay all right and I think after we do that we'll be done okay so let's do one more thing here and let's go back to our homepage here and hopefully you'll appreciate this now I've changed my component I've added parameters and check this out Kevin watch this I'm going to hit space here and it's going to know that I can put title in here oh cool right there boom now I can just say join our mailing list wow that's very easy isn't it intuitive markup and this is the benefit of having types and then those here I got message and then I'm going to say sign up I'm going I'm going to do what you need to have you need to have that fomo thing here to receive life changing too on too hard tips and tricks thought it be like 100% discount forever yeah if it was a discount discount in yeah so I'm spelled I misspelled receive again I before E except after C which isn't even always true I know yeah you know English language man you know all right just to keep it interesting okay this should be capital T title it's just not green there I'm going to go look at this this is blue so that maybe I Nam this wrong um let me go look at our component here I thought I called it title that's what I did capital T title all right okay it did let's compile it and see if it if it um compiles and this another thing that I do is I do check to see if anything's going to compile you don't have to run it compiles quicker and so I don't have any errors over here so I can go back to my component and um or my page excuse me so not exactly like I want but we'll see if it runs we'll see if it runs Ben wants to know then wants to know if it's a uh it's a 100% off the project launching in November um what project you know the secret project we haven't talked about yet it's a product it's not a project right oh no no no he said product sorry that's my bad Y no 100% discount on the product launch in November oh I what Ben says yeah yeah yeah um maybe for Ben I don't know I haven't I haven't really talked about we haven't even talked about it yet so I'm sure we'll give away something um there'll also be a free tier to this so there'll be a free tier to it so everyone that's watching it be able to use it and play it um I will say one more thing about our mystery product is that it is a product it's not necessarily Cod related it's nothing to do with the course or anything like that it's just that we decided to go build something in Blazer to show you that you know F says hey what's built in Blazer do you have anything in Blazer what's you know name one product built in Blazer and we're going to be able to say this one's built in Blazer but check it out so we think it's kind of cool so notice that you know look at this it overrode my stuff and there I have the life-changing tips and tricks join our mailing list and Bam that's our component and a final thing of note here is [Music] um if I go in here and look at the homepage here just to see show you how this worked and um me bring up my homepage or it's actually in the in the component itself sorry the uh it's just checking here to see if it's null and if it doesn't have a value being pushed in it'll put the default in there but since I passed it in through um a parameter right there in line and gave it a value um this is not null so it took the value that was passed in that's it cool so that's components man I mean it's pretty slick it's pretty powerful um I can say that we're really jazzed about Blazer in general but like when you start looking at components hopefully your mind is rolling and you're like wow okay that is easier if you've ever looked at react components and you've ever done it you know what I'm talking about you know this is just I think and I'm probably biased here it's easier to do it's more fault tolerant in that you don't have magic strings and those kind of things and it's not as you don't have to use cryptic syntax to do this you just use markup and even once you get a component and putting it on a page it looks like an HTML element that you have access to and it has access to its complete parameters and this is just the tip of the iceberg to show you how to do this um I have a question from Kristoff here too then he says um can you set it in the Declaration public string title get set equals default title yeah okay yeah y you can do that the reason I didn't do that is if if I if I did that in the homepage here or in the component here then it would always be this if I said it in the direct laration so this is set up so I can override it because it is a parameter I'm expecting a parameter I'm just coding around the use case if they didn't send me something um but I wouldn't do it as a parameter if I just wanted it to be um hardcoded I would just put it up here in the markup but here you know and I hope it's not lost on people that these things are two-way bound and so as it pushes in it gets injected in there from another page it's kind of cool um hopefully that's not lost on everyone um so but yeah you could hardcode the value in here and just set it right here title equals this message equals this right here on on initialize I'm checking for null and if it's not null I set it or if it is null I said it if it's not n i just take it whatever the person sent in for me you also could do validation in here like depending on what they send in to make sure that the parameter value they s in is of type that you're expecting that it corresponds to what you expect so you can do validation there's a lot of things you can do once you can intercept these parameters on initialization and check them or set them or whatever you want to do all right cool all right let me go back to full screen here Kevin I can myself there we are um okay cool I do have one question one other question um uh John wants to know any idea what we'll be building in Blazer on the self-pace course yeah the same things we've been building so we'll build a Blog we're going to build a bug tracker and we're going to build a um a contact Pro in addition to that there'll be three other projects we're mapping out now I'm pretty sure don't quote me on this it's going to be movie list will be one of them um you've seen that that we've shown that example already in Blazer so we already built that um then we'll build some other ones like we yeah AI Chef's already built we're not rebuilding that in the course um you can just take it I um inet 7 and then we may convert that toet 8 that won't be our first release we'll just keep that inet 7 for now um but if you take the Net 7 course with AI Chef you can convert that to Blazer 8 it's pretty easy to convert over I mean it should we haven't tried it yet but it should almost convert over with minor changes so take our course in the net8 and then take Ai shf and see if you can get it to work in net8 it shouldn't be that hard to do y cool yeah this was good I like this this is uh yeah there's some pretty powerful stuff in there that's that is intuitive is the thing too I noticed that it's like oh okay that makes sense that makes sense it's easy to do um the other thing too I want to talk to the crowd out there for a second so if you're looking at coming to our course in January that's the first cohort we be teaching net 8 in January and you got to realize this is coming out in November 15th or 14th or whenever net day is yeah and that's when they have their conference and that's when it'll be released and so from November to through Christmas we'll be getting ready for the inperson cohorts that will be Learning Net 8 for the first time and then soon after that we'll release um net 8 content on the self-pace course hopefully we'll get to that January February time frame with at least some of the projects I don't know if we can get to all three of those projects I mentioned but um we'll definitely have something out there so that if you're on the sell Pac course you can learn don8 as well um and then you'll be on The Cutting Edge will be the first people out there with Don content for sure because it just came out yeah very cool if you want to use this um you can go download rc2 um from Microsoft you can go look at their blog and download visual studio preview you can't do it in the standard version of that's currently right now or you can just wait and when it goes GA in November which is next month and you can just download the standard um Community Edition of Visual Studio yeah it's it's almost here isn't it it's not far away yeah it's almost here weeks away pretty cool so things that are built in the Box I mean we will be covering authorization databases all that stuff is in this release we had have time to put that together but maybe in a separate session or some of the self-paced course we'll talk about off soon so mon had a question and I'll answer this with a with a a link back to another video can you please explain when to use each mode in Blazer 8 we did a video on this you can go we did five videos on it did five videos yeah on on each one of them in individual but there's one the very first one of that series goes through all of them and tells you exactly what which modes yeah just go look on the channel you you'll see them out there but in general here yeah there's a link out there but in general um I want you to think about this if it's static meaning it's just HTML content there's no interactivity you just run um standard component with nothing in it it it'll just run and just displ the HTML from that when should I pick between um server side rendering interactive mode render server or or interactive web assembly I think you just pick Auto always and you default to building it out as a client side application and then the server side is just there for the first render that's how I think 90% of the people are going to build these apps um the other other way is um only clients only web assembly I don't think anyone's going to build something totally only server side render because there's some downsides to that mode with disconnection and Signal our clients and um there's some limitations there but it is easy to build but the thing is they've made this so easy you don't have to choose now just set it auto and you're pretty much good to go you know and I think that's where everyone's going to do it we will get to later on on with you take our course we'll cover architecture like how do you architect an app at a at a large scale what's the architecture going to be I'm sure that a lot of other people can have opinions on this we have an opinion of like how you should do it um but it'll be building um web API endpoints and then a service layer in between and then you call into the service layer so that the server side component can call service layer and the client side component called the service layer changeing any code and so I think that's where we're going to land but as we get there we will talk more about it it's all I can say is this is hot people and you should learn it it's going to be in demand we're already seeing Blazer projects now coming through and then once night8 hits hits the main stream a lot of people are going to be using it yeah people have been waiting for this to be ready for prime time and so while do8 is new you got to understand Blazer's been out for three or four years now and they've been running down this road every year and now's the time that I think a lot of companies are going to adopt it cool it's pretty H stuff yeah definitely all right we'll be back again next week um talk about something all right yeah we'll do it next Friday so thanks keep cing guys we'll see you [Music] byebye [Music]

Channel: Coder Foundry

Views: 2,508

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, portfolio, web dev portfolio, web developer, web dev, get a job, javascript, html, css, get hired, web developer portfolio

Id: MfhqoGXYvGY

Length: 73min 2sec (4382 seconds)

Published: Sat Oct 14 2023