Blazor Full Course For Beginners

welcome to this beginner level course where you will learn how to build a mod frontend application step by step using Blazer and the C language my name is jul Cal and I spent the last decade building all sorts of cloud-based web applications that handle millions of requests every month by the end of this course you will have master all the skills necessary to start your journey into C frontend development even if you have never created a web application before so let's get started by taking a quick look at the application that you will build across this curse imagine that your team has been asked to build the game catalog section of your company's video game store the backend developers already took care of standing up the rest API that provides all the standard operations to create list update and delete games now you as a frontend developer need to figure out a way to build a web UI for this game catalog where administrators will be able to manage information about all the games offered by the store in this course you will create this front tent from scratch using the latest Innovations in the Blazer web UI framework and C if you're interested on the back end portion of this system please check out my s net core full curse link to this video where I cover how to build that part in detail creating a player front end involves understanding multiple Concepts techniques techniques and patterns that I'll cover in detail in this course you will start by learning what is bler and how to create run and debug your first Blazer application from scratch then you'll learn how to use razor syntax to combine HTML with C to render a simple list of items in your browser which you can later style using the popular bootstrap CSS framework next you will learn how to create your own razor component and use it to improve the layout of your homepage you will then use Blazer forms and bindings to capture data from your user and add it to your list of items you will also add client side validation to your form to ensure your application can only accept valid inputs according to your business rules next you will dive into the dependency injection pattern to understand how to use buil-in Blazer services in your components and how to reuse your object instances across multiple components then you will learn to use Blazers routing and navigation features along with component parameters to let the user navigate between components and to complete your application UI you will learn to use the interactivity features of laser to create a simple but useful dialogue that can react to user events in real time you will then learn to use the hn net core configuration system and the a synchronous programming model to configure your Blazer application to send request to your backend API via an HTTP client object and to close you will learn to use the exam rendering and enhanced navigation form features to maintain a friendly and responsive user experience even when dealing with a slow backend in order to take this course you should have some basic knowledge of C Java or a similar object oriented language you should also know the essentials of web development particularly how to use HTML and CSS to build basic websites however this is a beginner level CSE so you don't have to be an expert on any of these topics since we write every line of code from scratch and everything we do is explained in detail in terms of the software prerequisites for this course you will need to download and install the following the net software development kit or SDK which includes everything needed to build and runn net applications and visual studio code a lightweight but powerful source code editor that you will use to write build and debug your code please go ahead and install these tools Now using the url's on screen if you don't already have them so what is Blazer Blazer is a modern web framework for building interact web uis using HTML CSS and C with blazer you build web apps using reusable components that can be run both from the client and the server so that you can deliver great web experiences but what does it mean to build web UI using components to understand this let's see what happens when your browser request a page from a Blazer application open the user entering or clicking on the site URL the browser sends a request to the server where the Blazer app is running Blazer receives a request and loads what is known as a root component which defines the top level HTML layout of the page and imports the Blazer JavaScript run time plus a few CSS files the root component also finds and loads all the components specified for the requested page for instance there could be a header component a bar component and a main component each of these components can be developed individually with a combination of HTML CSS and c and each component can also be reused and nested within another component for instance the main component here is really a combination of a search boox component and an items list component blord will then translate the structure of all these components into a standard HTML and it will send it back to the browser where the page will be rendered another thing to understand about Blazer is that it behaves like a single page application or SBA to understand what this means let's look at another request where the user has clicked on a link that requests the page to edit an item in a standard website such requests would involve navigating and loading an entire new page but in Blazer by default there will be no navigation to a new page and instead a JavaScript fetch request will be sent to the server this happens thanks to blazer. web.js the key Blazer framework component that is able to intercept standard HTTP requests in the browser and transform them into fetch calls that request the HTML of the requested page without the need of loading a new page on the server Blazer will find a component that Maps will requested route and will use it to prepare the updated HTML this HTML response is sent back to the browser and once bracer web.js receives it it will patch the document object model or Dom of the already loaded page so only the pieces of HTML that change it are rendered since everything is really happening in a single page with no page reloads you can think of a Blazer app as a single page application that preserves more more of the page state so Pages load faster and more efficiently than in traditional websites Blazer has many other unique features but at this point it's best to get our hands dirty and prepare our de box to start building Blazer applications let's see how to configure our local development environment to create Blazer applications and here we are in Visual Studio code and the first thing that we probably want to do is to make sure that our net SDK has been properly installed and to do that we're going to open up our BS code terminal so let's go ahead and open our terminal by using this menu over here so menu bar let's open up this and then let's go into terminal and then new terminal now a quick shortcut to open and close this terminal because you're going to be using it a lot uh is by using at least on Windows the control TI combination so control TI is going to close and open that terminal and then another way to do this also which is my favorite if by just doing contrl J also on Windows contrl J is going to open and close that term all right now while being on the terminal what you can do is use the net CLI which comes with the net to verify a couple of things about your AK the first thing that we can verify is the version the version we have installed so I'll do net Das version and that's going to go ahead and list the version that I have installed of theet in my box as you can see there and then if you wanted to get more information about your install donet s version I'm going to just clean this quickly you can also do net D- info okay which is also going to give you the version but is also going to give you much more information about everything related to the donet SDK in your box as you can see right here right either way if you're not getting any error any errors over here it means that your donet installation is is correct right so now let's go ahead and close this terminal and then the next thing that you want to do is to install one extension that is going to overall improve our C coding experience within Vis Studio code so to do that let's go ahead and first let's just close this welcome screen and let's go into our extensions view on the left side over there let's open extensions View and as you're going to see the only thing that I have installed right now is the material icon theme so this is a theme that just makes it so that the icons look better BS code that's totally optional but what we really need is this one known as the C dev kit so just type c in your search box over there it should be the very first hit so this one here C dev kit by Microsoft this one so let's click on that one and well let's go ahead and just install it so let's click on install over here it's going to take a few seconds and the purpose of this extension is to install all source of productivity improvements so that you can more easily manage your C projects in BS code create C files there are a few Wizards to create projects there's also a solution Explorer there is a test Explorer to run unit test and a bunch of improvements for C development right and then and also one thing to keep in mind is that this extension is also going to install more things in your box than just extension so if you just go ahead and clear sear from the search box let's clear that what you're going to notice is that of course we do have the C dev kit which is right here but it's also going to go ahead and install the C extension itself which is extension that actually provides the C language support into your box right so that's a c extension and we also have the net install tool over here so that one is used to provide a version of the net runtime or the net to any other extension that may need it all right uh but really that's all you need in your box to start doing Blazer development with Visual Studio code and next we're going to see how to go ahead and create our first Blazer project let's see how to create Blazer projects in Visual Studio code and the third way that you can do this is by using your command palette and that is because you have installed the C dev kit extension so to do that what you can do is just go ahead and open up your menu bar over here and then you can go into view and then command plate now the command plate is super handy in BS code so here's a quick shortcut for you that you can use to open and close it very quickly which is control shift p that's going to go ahead and open your command pallette very quick and like I said there are many many commands here that are super handy and since you have already installed the C kit what you're going to notice is that you can now just type net right so net and that's going to offer multiple options for different commands are related specifically to net projects so for instance you can click on new project here and that's going to open up this list of templates for the different types of doet projects that can be created in your machine now in our case the one that will be will be mostly interested in will be these one here that says Blazer web app okay so not Blazer web assembly Standalone app because that's the previous way to create Blazer projects the latest and newer way to do it is by using this template that says Blazer web and we could go ahead and Creator project using this option here however what I notice is that this option is a little bit limited it does not offer us a bunch of additional options that we may want to set as we create the project and because of that reason we're not going to go for this way in this video so instead of that what we're going to do is use the net CLI or command line interface which is which is way more powerful in terms of the option that it offers so to do that the first thing that I'm going to do is to set what is going to be the folder in my machine we I'm going to be working in my PlayStore application so for that let's just go ahead and open up once again our menu bar let's go into file and then open folder and then I have prepared this h d projects directory in my machine it can be really any directory in your box it doesn't matter important thing is that here we're going to be creating one brand new directory that in this case I'm just going to name game store because what we're going to be creating here is basically a game catalog for a game store the UI or the front end for this game catalog so I just name it game store and then I'm going to just click down here into select folder and that is going to go ahead and open up BS code in the context of this folder that we just created right so this has become now our workspace in BS code so notice that now we have an Explorer window on the left side that is specifically opened in the context of that game store direct right so now let me close this welcome screen and I'm going to do now is just to open up my terminal once again so contrl J open Terminal notice that terminal opens in the context of gain store also and this is great because what we want to do now is to create our actual Blazer project so for that we're going to be using the net command line interface or CL so all you have to do is just do net new and just like we noticed before that in the command plet you can see the list of templates that are available for you you can also do here net new list and you're going to see a complete list of also all of the types of applications that you can create in your machine which as you're going to see is going to be a little bit more extensive because the cite always shows way more things and options than your command plate right now in our case since we want to go ahead and create a laser application the option that you want to use is the this one player web app so that is the template that we want to use okay so now how do we use it well let me show you let's go ahead and minimize a little bit this terminal and let's clean this what you want to do is the following net new and then of course we type Blazer here and then one thing to keep in mind is that the Blazer project template has many possible options that you can use to configure how you want to create your project so if you just type here Das Das help you're going to know Noti that well like I said this template has many many different options right because bler is a very flexible platform right now for this video what I want to do is to create the minimal possible Blazer application right so that we don't have a bunch of files and configurations that we don't understand and he said we're going to start very very clean and we're going to start adding things little by little like Lego pieces so that we understand exactly what's going on at every step okay so because of that we're going to take advantage of a couple of options here the first option is going to be this one here interactivity and for this one we're going to choose none so that we don't enable any interactivity yet we're going to look into this later across this curse and we're also going to be using this empty option over here so that we only get the minimum set of files in our Pro all right so let's go ahead and collapse this a little bit and let's clean our screen and let's now do net new blazer like I said we're going to say in activity is going to be nonone and we're going to say empty here and lastly we have to provide some name for the actual project so the name is going to be in this case gamestore dot front end because it is our fronted right so let's hit enter and this went ahead and created the project for us right and so if we now open our file explorer over here on the left side if just open File Explorer and let me collapse this terminal now you're going to see that now we have our Blazer project created and there are a bunch of files that got created as part of that template now one thing to notice is that if you select one of the C files in this file explorer then the C dev kit is going to kick in it's and it's going to enable one more interesting component of your vs code experience which is known as the solution Explorer and that solution Explorer is down here okay let me just close this BR for for a moment and let's open solution Explorer and what we're going to see is that well we have these two views of uh of the files that are composed in our application and the difference is that our file explorer this one at the top is kind of a physical view of all of the files that are included in the application so you're going to see everything about the application including the bean and obj directories right which are the the files that in that are produced by the compilation process of net but then we have this solution Explorer down here which is kind of a virtual view of how the net tooling looks at our application right so this is going to include things like the dependencies of each of our projects but also this view as you're going to see when you write click on the project is going to offer you new contextual options to create files or to add references between projects right so this is all contributed by the C dev kit so across this this course we're going to be using either solution explor or the file explorer depending on on what is the task at hand because there are things that you can do in one of these that you cannot do in the other right so we're going to choose the right Explorer for the Tas at hand let me now give you a Qui viiew of all the different files that got generated into your Blazer project just so that you understand better where are the different things located and how they work together right and so for this I have open here my file explorer just because the file explorer is one that's going to show you everything about your project as opposed to solution Explorer and so in this file explorer let's go and open up our pr. CS file so let's go open pram Cs and let me class this and this file here which as you can see it is a C file and the idea of this one is to be your application or your project entry point so this is the file that has all of the application startup logic and really the whole purpose of this program CS file is to set up the host of your application and that host is in encapsulated in this app object right here which is of type web application so web application is the host and the purpose of the host is to encapsulate all of the application resources so things like the HTTP server implementation middleware components login depend injection Services configuration all of these things are essential for your application and they are going to be needed by multiple pieces across the application right and so this file is really split into two main sections the main the first section here it's going to start in line three and perhaps until line seven and the idea is that we create this Builder object which is the one that we can use to register all of the services are going to be needed by the application so this uses the dependency injection pattern across the application which we're going to be learning more about uh later in the course but for now what you can see is that we are just adding one service here which is a which is ADD razor components and this is needed so that your application actually knows how to use razor components in the application we're going to dive more into the razor components in a moment uh but that's the only service that we can see that is been registered here but just by calling create Builder on web application there are other services that are going to be also enabled into the application now as we keep going down you're going to see that we go ahead and invoke build in Builder to produce the the instance of the web application object so by invoking build that's going to go ahead and actually set up things like what is going to be the the web server which in this case is going to be the C web server for an SP C application it's going to load configuration from apps. Json environment variables common light arguments and perhaps other configuration sources it's going to also set up a login the login output for the console and even any other login providers and so all of that's going to be set up for you by just invoking build and preparing this application object and then from here on what we're going to do is to configure what is known as the HTTP request pipeline right so everything that goes from line 10 all the way to the end to line 25 is configuration of the request pipeline which means that we have to decide how we're going to be handling the different requests that come into the application and so and what to do about them right and for that what we do is we use this concept of middleware so middleware are pieces or services in your application that can handle different cross coding concerns in the application so for instance as you can see here we have a section here that says that if we are not in development that what we are kind of in production we're going to go ahead and use the exception handle middleware to set out where is going to be the route to send a request or to send the the user if there is an expected error in the application we also have these other two pieces of middleware this hsts middleware where H STS stands for strict transfer security and we also have the htps re Direction middleware here right so these two middlewares we're going are going to work together to make sure that your appc ation can only work uh with https and not with standard HTTP now in this course we're not really going to be using https it's not going to be needed for the purpose disc course but by default as you can see it is being added into your application if you need those now going down you're going to see that we have the estatic files middleware which is the one that's going to be needed to serve static files in your application so things like your HTML files CSS images JavaScript so things are not dynamically generated by the application but just static right they need to be provided into the browser as they are we also have the antiforgery mware over here which is the one that's going to be protect your website AC against cross side request forgery H threads right we're not going to dive into this but know that this is needed later on as we start working with forms this is going to be needed to make sure that your your site is safe against this Trad that I just mentioned then as you're going to see we invoke the map Razer components method over here which is going to again configure middleware to be able to discover all of the components the razor components that you have created for your Blazer app and it's also going to make it so that this app component here if we're going to take a look in a second uh this is going to be your root component and from there we're going to be discovering all of the other components for your application okay so as you can see at the very end we just invoke up the run which is going to start the host of application and makes it so the application is is ready to start receiving requests now it will good to diving more into what is this app component here right so what is this app so if you go ahead and go back into the Explorer we're going to see that we have this components folder over here there's components so you open up that you're going to find that we have a series of Razor files and a few folders over there right so this app component that we saw in P that CS actually is this app Razer file that we can see on the left side so we click on app. raser and we collapse this we going to notice that this is uh well like I said the root component so this defines the main layout of your application I mentioned that a bler application is kind of a single page application because always there's going to be just one page and that page is this one that you can see right here notice that for the most part this is just the standard way to define an HTML application an HTML page right so you have the Declaration of the HTML page you have the head the head section here right head section with a bunch of M data base and Link elements over there and then you also have a body section down here and then it just closes H right so it looks very standard except for a couple of things right so this Head outlet and this rout elements here are a bit different so what's going on there so really those are two of the components or razor components that are enabled in your Blazer application Head outlet is a component that is is can be used by other components in your application to render things into the head section of your application so for instance if you want to render a page title into your into your head then another component will declare page title and that page title will be rendered into where we have declared this Head outlet component over here we're going to take a look at that page title later and then down here we have this other routes component so what is these route components about so routes is actually another component that is declared over here notice this routes. Riser right so this starts H revealing the fact that you can start nesting components H one into another right so inside this upad razor we're going to be nesting this routes component that is defined over here in rout Razer now Riser Razer is a very important component you're going to find in really any Blazer application and the idea is that this is going to set up the routing for your Blazer application right so this is going to allow to render the page that matches the requested address in the browser right so you can see so this uses the router right and the router is going to just find the assembly where we are running right now and then we have this section that says found so found means okay so we found the page or we found the component that we need to render right so context is going to provide this route data route data includes everything about the component that has been requested right and it's going to send that over into this route view component over here right now the idea of rout rout view is that it receives all of the data about that component that needs to be rendered and and it's going to actually go ahead and render that component dynamically decides what component to render depending on this route data that has been received but it also provide what is known as the default layout right so the layout is going to be the component that wraps your actual component that you want to render uh inside this main main layout all right now moving on what we're going to see is that we also have this other component here known focus on navigate which is just a component that is used to set up the initial Focus uh inside the component that's been now it is very interesting to actually see well where is this main layout and what's the idea of this main layout component here so if you go back into Explorer you're going to see that we also have this layout directory over here okay if you click over there you're going to see that we have this main layout. razor file here so the idea of main layout. razor is that this is the this is a component that inedits from layout component base which turns this component I mean it makes it a layout component and it is a component that can actually render the content of any other component that has been passed in right so as you can see we're using rasor syntax here with this element here at body so at body is going to be the the the fragment of HTML that's going to be rendered inside this layout here okay you can add many things to this layout by now it really has nothing other than the body but because we are defining it as a layout component base uh we are able to set the body and that body is going to be populated if we just go back into routes is going to be populated based on the route data that was passed in into route view right now but what is the actual the actual component or the actual page that we're going to show inside the main layout well that's going to be defined actually if we go into pages right we go into pages over here open up that's going to show right now we only have two pages and the main one is going to be home. Riser right so home do raor is kind of the main page at this point of your application which as you can see it defines the route which in this case just a root it defines the router is going to respond to right when the when somebody looks for it in the in the browser it defines what is going to be the page title right the page title for the application which like I said page title is going to work in combination with the Head outlet here in app. rer to render that actual page title in the head section of your application all right and then all we have here is just well a hello word with an H1 and then some content over there right and just like as we have this this home that rer we also have an error that raser component here which can be used when somebody when the application redirects into the slash error H route over here to render any unexpected error in the application notice that this works in conjunction with what we said in br. CS remember that we said that if we are not in in development right we are not in development we are going to be using the exception handle middleware to redirect into a slash error and that slash error Maps into into error over here right error. eraser right so that's that's mostly it about components eraser components your application and but there's one more thing here we also have this import staser file and the idea of this file is to Define many common a using statements across the entire application just so that you don't have to be importing these name spaces over and over again in multiple in multiple components right it's a nice way to centralize different different spaces right let me close this now another thing to notice is that uh if is that main layout that Razer also has another file next to it this one here main layout that razor. CSS right which is kind of the Cascade style sheets or styles for this specific component so you can specify styles for each individual component or if you wanted to you can also go in this case into ww root over here ww root you can go ahead and expand this and you're going to notice that we have this app. CSS file so idea of app CSS is that this defines all of the global styles that you can apply across any of the components in your Blazer application you can see we have a bunch of them by default right but you can add as many as you want either here for for for the global application or you can Define like I said like in main layout CSS you could have a CSS for any specific razor file now that's pretty much it in terms of H Blazer or razor components but there are a few other things in your application so for instance a very important file is this gam store. front end. cspr file so if you open this file this is known as the the project file for your application and the idea of this file is to Define well what kind of application is that you're building here as you can see at the very top this is using the microsoft. net. sdk. web SDK which what it does is by default it Imports a bunch of dependencies that are specifically needed for Web projects in ESP net core and then we have a few other things like for instance we have here the target framework which is in this case is net a. Z so this defines what are going to be the apis from the net that are going to be available for your application right so if you had here something like net 70 then then that means that you have apis only up to that Net 7 or if you have net 9 Z it means that you have even more apis available right so it really depends on what version of the S you want to Target here and you always get the default version that is align with the SK that you have installed I'm going to not going to go into more details about this other settings right now but another thing to know about this file is that this is the file where you're going to declare any other dependencies that this project have with any other project in your application or perhaps with nouet packages for libraries that you want to import into your project right so that's a file what else we have here we also have these two files here so abs. Json and abs. development at Json and the idea of this files here is to define a series of configurations for your application that you don't want to just hard code into the C code right so for instance you can see by default you have configured what is going to be the login levels or what are going to be the login levels for your application right that you don't want to be hardcoding directly in C code right and so you have one file here that's going to use it by default right so abside that Json but you could have another one like this one that in this case is specifically used by for the development environment right I saying that develop that Json do this would overwrite whatever you have in the other file if you're working in your machine development now talking about environment where is that development environment defined really so if you go into the properties directory over here so go to properties you're going to find this launch settings Json file so this file here is a specifically used for development purposes right and this the main thing about this file is going to Define what is known as profiles right and uh the profiles that you have defined here are the HTTP profile and the https profile over here right and each of these profils are going to find a few settings about your project that are going to be activated in your development environment so for instance uh this setting here defines that you want to launch a browser whenever you start executing your your project it defines very importantly it defines the application URL which is the host and Port that your application is going to be responding to when you work with it in your machine this case is Local Host 50002 now the port is dynamic so you lightly got a different port when you created your own project and like I said there is this concept of the development environment as you can see here we we can define environment variables for the local the local execution and in this case we are defining the well-known a minut core environment variable that in this case it is set as development which makes it so that we are running in development environment in our box now when you go into production this file is not going to exist it's not going to be us it and because of that this is going to default into production right and that changed a little bit how the application behaves as you go into production now just like we have the HTTP profile we also have the https profile over here with the only difference is that now we have another URL here for https purposes if you want to serve your your application in HTTPS and then but then other than that it's pretty much the same thing now like I said we're not going to be using htps across this discourse but this is the EUR that you would use if you wanted to use this profile right so that's launch St that Json let's see what else we have here yeah so other things that we have not covered just yet are really only these two other directories U let me collapse this uh we have the bin directory and the obj directory which are meant for the the production of the output of your application right so in this case obj is for intermediate files are generated as we are preparing the final DL or assembly for your application and ban is where you're going to see that the actual final dll is generated for the application we're going to take a look at how to actually build this project in a mode and well of course finally we have the solution file done here which is the one that activates uh or that defines how the solution Explorer is going to be showing your project well in the solution all right and so yeah so I get that it is a lot of information at this point as you're starting with your Blazer bler Journey but I just wanted to give you an idea of what you got here and trust me things are going to be called way way clearer as you start coding your application as we any C or net based project we need to find a way to turn our source code or C code into binaries that our machine can understand and that can execute and for that all we have to do is just to build our project now in Vis Studio code there are a few ways to do this and since we have the C dev kit and the solution Explorer we can actually start over there so let's go ahead and switch from our file explorer into our solution Explorer down here so let's open up solution Explorer let's collapse this and really to build the project all you have to do is just right click in the project name right here so right click on the project name and here you're going to find your build option there so really all you have to do is click on build and then the is going to take over and it's going to go ahead and turn your C code for for your project into the corresponding DL and you can see that it got generated right here it says exactly where it output that dll and so we can actually go ahead and see that if we switch briefly into our file explorer you're going to see that now we have this brand new BB net 0 directory populated with a bunch of files and among among them we have our gam store. front end. dll all right there are a few other files like for instance our ups. Json and upset. development Jon that we said these are the files that can have the configurations that we don't want to hard code into the C code right and there are a few other fils that we're going not going to cover right now but basically that is the build process right so just go ahead and turn your C code into D or also is known as assembly in the net world now that's one way to do it now another way to do it is by using the net command line interface or CA so let me show you how to do that let me for that let me collapse this for a moment and what I'm going to do is just click on this plus sign over here to open a brand new terminal over here I'm going to switch into my game store that front end directory all right let me actually kill the other terminal going to just click over here in this delete to delete that previous terminal so we have more screen and here in order to build the project using the CLI all you have to do is just say net build enter and now will go ahead and produce your DL okay the process is going to be faster depending on how many changes you have in your code since the last time that you built or it may be super fast if there's nothing really to rebuild in there right but you can see it's the same pretty much the same idea and then the last way that you can do this is by using the buil-in integration of Visual Studio code with the build task so how does that work so what you can do is just go ahead and go into your menu so go into your menu and then let's go into terminal and then into this one here that says run build task okay if you click on that one you're going to see that BS code already understand what is going to be the right build task for our net project right in this case it isnet build just like the one that we just executed and if you just click there you're going to see that it will go ahead and kick off the building of your project just like like we did a moment ago now this you can also do via shortcuts so what you can do now is just say use the control shift V combination in your keyboard and that's going to go ahead and pop up that the dialogue that you can click and the will go ahead and build the project okay so this is one of the fastest ways to go ahead and build a project whenever you just like there are multiple ways to build your project in vs code there are also a few ways to run your project but really the simplest way to do this in vs code and on windows at least is by using the F5 key so if you just press F5 in your keyboard you're going to see this dialogue showing up which is pretty much asking you to choose what is called going to be the debugger for your application since our application is a c application we're going to go ahead and select C so click on C and next BS code is going to ask you well what is going to be the profile that you're going to use to run your application remember that we have at least an HTTP and an https profile defined in our lunch stings at Json file right so now we have to choose which one to use or we can just go for the default configuration which is going to map into the HTTP Prof so let's go ahead and just pick the default configuration here and at this point BS code is going to go ahead and first build the project and once it is built the debugger is going to start and as you can see it even goes ahead and opens a the website in your browser okay and as you can see we are seeing here our hello world title over there and welcome to your new now why are we getting this hello word and this message over here well if you remember going back to vs code over here that is exactly what we had inside pages in home. raser right let me class this for a moment that is exactly what we had here right so we have a Hello word and H1 hello word and we have welcome to your new which is what we are seeing right now in the browser okay now one thing to notice here is that you're not just running the application you're actually in a debug session and how how we can confir that mean that actually means that you can start breaking into the execution of the application to inspect live what's going on with the different variables of the application but how can we explore more about that so let's go back into BS code and what I'm going to do now is just to stop it temporarily you can use this bar at the top this stop Buton over there so let's click on stop and that's going to just stop the the debuger right now and what I want to do right now is just go back into pr. CS over here and I'm going to class this for a moment and I'm going to place a break point perhaps just before the application runs over here in line 25 right so that the application stops right there so we can evaluate what's going on at that point in time as we debug the application so now I'm going to hit F5 once again same process builds application run application but as you can see now we have stopped right there just before launching the application and going into the browser and as you can see now we have the ability to just hover over some variables over here for instance over app and you can see live the different s set of objects that are running behind application like the configuration object here here and you can see well end points environment and well a bunch of variables that are part of the web application object right we also have access to the H locals on the left side you can see locals the different local V variables that we have here like the Builder for instance is also available there you could add watches here if you want to watch a specific variable you have the C stack over there and well a few things that are expected of a debuging session so indeed our application is in AOG session right now right so let me just remove this breakpoint and let's click you can go ahead and click on this play button to keep running the application and then as you can see we just go back into the browser now not all the time you're going to be needing to be debugging the application because debugging is actually a bit slower than just running the application so if you just want to run it here what you can do let's go back to BS code and let's stop the debugging session so stop that and so yeah I'm going to collapse this for a moment and let's go back into the terminal I'm going to go to my first terminal over here perhaps I'm going to delete the other so so that we have more space okay let's clean this and then here we're going back into the net CLI right so just that you can build the project you can also run the project from here so you all you have to do is just say and notice of course what directory we are in right now so we are in gam store. front end so that's the directory and being here you can do net run so that will go ahead and it will first build the project if it needs to be built right and otherwise it would just go ahead and start running notice that this tells us right away what is the location of our application right so host and port and you can actually go ahead and click on that to immediately go into your web page as you can see now going back into vs code if you just scroll down a little bit you're going to see that there's a bit of a warning down here right this warning here and this warning what is saying is that uh the netron time was not able to switch into https in our machine and that makes sense because we are not using the https profile we're just using normal HTTP and we will keep doing so across this course so in order to I mean I don't like to have this warning just hanging around every single time that I run the application so to actually get rid of this we're going to do the following so let me do contrl c so contrl C to stop the process right now and then I'm going to collapse this and here in program CS what we're going to do is to uh remove this use https redirection call over here okay so let's remove that all right so that the application is not going to try to redirect us into https anymore and with that if we just go ahead and reopen the terminal control J and we do net run you're going to see that that warning is gone so the warning is no longer okay normally as you go into production https is actually handled or SSL is is handled in an API Gateway that can do this thing called TLS termination right and your application can just happily keep running on HTTP so no need for https at this now another thing that you can do here is to use another facility of net that allows you to kind of perform live changes in your application and let the browser automatically refresh as you may those changes so that you don't have to restart application every single time and that tool is known as Network watch so let me show you how that works so I'm going to clean this once again right and I stop the application so instead of doing net run I'm also going to close this from CS I'm going to do net watch right net watch so hit enter so once again the application is built and we're going to be starting the application right so as you can see here and I'm going to actually close the other tabs so we can focus on this one and what's going to happen is that we can actually make changes into this page that mean the code behind this page and make it automatically change without having to restart application now just so that we can notice this better let's see if we can put this in two screens so let me put this on the right side perhaps and then vs code on the left now it's going to be a little bit hard to manage these screens here but I want to do this just for this part of the video uh so we can see how things change on the browser so now what we're going to do is the following so let's go into Explorer and before doing that let me actually go ahead and collapse this terminal for a moment yeah let's go here and let's go under components pages and home. R remember that this is the place right where we have def finded a few things about this homepage right including the hello world and this welcome to your new so let's say that we want to change this from hello world into perhaps hello Blazer right and well for that actually it should be nice to be able to see the terminal here so let's do this so for this let's do hello Blazer right so notice that as the file is Chang it right net watch has detected the change so notice here file change it home. raser and then it prefer is known as hot reload right so that the changes to the application are reloaded and then the page as you can see on the right side has already changed and without us having to do any sort of stop and restart of the application okay and same thing that we just did here we could do for instance with the page title notice that the page title right now it says home over there it's home over here and we could say it say we don't want to say home we want to say game store for instance right and notice that H reload happened once again and now our title is game store okay so yeah that is doed watch is a handy Tool uh it is not perfect there are going to be many more H major changes that you may want to do across your application that watch is not going to be able to handle so you will have to restart the entire application uh but we will try to use it in a few places across this course whatever it makes sense and the changes are not that that complicated now since we're running the application one more thing that I wanted to highlight here is how the structure of your web page is actually related to the structure of your Blazer application right so I think that's very interesting to understand and for that I'll have to actually we go ahead and maximize my screen here just to see better right I'm going to perhaps collap the terminal for a moment now let's go back into into the layout of our application so remember that we said that app. Razer is the root component right so this is root component now how is this app. razor reflected in the page that we were seeing a moment ago right so if we go back into the browser I'm going to maximize my browser now what we can do to inspect what is the actual HTML behind this browser page here is um just press the f F12 key so go ahead and press F12 in your browser and this is going to open up the browser developer tools so this is a uh this is common both in Chrome and in Microsoft Edge you should open this screen here although you may land in a different tab but let me go into the Home tab over here you may be seeing this here but what I like you to actually look at right now is into this section here this one here which is going to show the elements okay and it is a bit big for me here let me do this yeah and so so what you're seeing here is the developer tools that allow you as a developer to inspect what's going on with this page over here it's going to be very handy and you should get familiar with this because for frontend developers this is an essential tool and what you're seeing here is that we are looking at a structure very very similar to the one that we have in our app. Razer file right so we have the HTML we have the head we have all of these meta elements right over here we have this here including the import of the CSS and we even have the body over here right so things are very similar but no this one different so at the point where we should have the Head outlet over here in the head if we go back into the browser we're going to see that what we have is the the title right the title that later it is reflected over there in the title of of the tab in the browser right and also if we go back into BS code at the point where we should have this routes component over here if we go back into the browser what we actually have is this H1 here that has that says hello Blazer and also welcome to your new app right so why is this happening well Blazer is using the root component to replace what is in there with the the actual contents of the component that we want to show here since we navigated into the into the root or the home of the application what happened is that okay so it said uh first it went into app that Tracer right so this is our root root page and root component right and so then it noticed that it had to go and use the routes component over here right so go goes into routes over here and then routes says okay I'm supposed to be using the layout main layout as the layout for my page so that will map into this main layout component here which pretty much has nothing other than the body so not that relevant uh but then you will go ahead and figure out what is the route data to show uh in the in the requested location now the requested location is just the root right so it's like as as we did this it's just the root if it's just a root then it means that it has to find a component that maps to that location so that component happens to be home. raser because home. raser is the one that maps to the root so it takes the contents of this component over here and it takes a page title right page title and it will go ahead and put it inside the head outlet that corresponds to the Head element in our HTML over here or up that raser and then it goes again goes for home that raser and takes everything else right everything else becomes the body of the page so in main layout that's going to be the body here right and that is going to be set into the rout via the router right with routes is going to be set into our Rod View and that means that it's going to be replaced exactly where we have defined routes inside the body so that is how our H that racer gets a home that razor actually lands into the location where we had routes right and that's what shows the page here because otherwise notice that the rest is just what we had at that raser but some pieces have been replacing this is a key mechanism of Blazer you're going to see that anytime we browse to different locations in the browser you're not going to see the entire page reload but since it is just a single page only the elements that need to change like this one and this one and that one are going to be changing depending on where we navigate right so that is one of the essential aspects of bler you may have noticed that anytime we start a debugging session or when we use net watch Vis Studio code is going to open a brand new browser window right so for instance if I just go back into BS code over here and I'm going to just do contrl c to stop my net watch and I'm just going to go ahead and hit F5 so F5 to start debuging session you're going to see that now we have a brand new browser tab right so now we have two tabs here same thing if I just stop my debugging session and go back to my terminal and I just do net watch again right so this opens a brand new browser window as you can see and so I find this not really ideal because usually I just have one browser window one Tab and in that tab I see all of the changes that are being applied into my application as I start coding it so how can we prevent BS code from opening one more and more browser windows over there so it's actually very straightforward all you have to do is the foll if you just go back into vs code and let me do contrl c to stop my my server and then um let me close this and let's go into our properties directory so let's go into properties and into our launch settings. Json file launch setting. Json black and close that and all you have to do is just go down here into the profile that you're using for running your application in this case that will be our HTTP profile over here and then all you have to do is modify this one setting over here launch browser so all you have to do is change this into false over there and that is going to prevent vs code from opening the browser anytime you deok or use. netwatch in fact I'm going to do the same thing for my other uh for my other profile for https we're not going to be using it but in any case I like to have this consistent across the different profiles so I'll just do false here right and with that we going to see that if we do net watch once again right so net watch then vs code is not going to open any other browser window as you can see server has started but no browser has opened we still have the three tabs over there in fact I can close this and just go back to one Tab and it is not opening any browser Wings all right so now that you know what is the structure of a laser project and how it Maps into the browser and also how to build run and deug your application let's move on into the next topic where we're going to go ahead and Implement our actual game store Blazer application let's start the implementation of our game store Front End by defining the page where we're going to show all of the games that are part of our game catalog and for that we're going to go into our homepage so let's go ahead and open up that homepage here in components and into to pages and into home. raser right and let me collapse this for a moment and here we're going to do just two things right now the first thing is going to be uh we're going to change the title here instead of being game store this is going to be actually the game catalog so let's name it game catalog and next instead of having this H1 and this welcome to your new app which we're going to delete right now just delete it we're going to be defining the table where we're going to render the list of our games right so this is going to be a very standard HTML table nothing fancy really so we're just going to say table all right and then this table is going to have a bunch of headers so here we're going to define the headers that we're going to need so here's our T head and then we're going to define a few headers for the different properties that we want to show or the different columns that we want to show in our table so this is going to be th first one is going to be let's show the ID and perhaps to make this faster let me add a few of these th we're going to need this many right second one is going to be the game name the generate the price the release date and we're going to leave just one more for a few actions that the user will be able to use for each of the rows right and after this this head of course we want to define the table body so let's open up a section for the table body and that is going to Define the initial structure of our tape now to see how this actually looks like uh in a Rowser let's go ahead and open up our terminal over here and I'm going to switch once again into gam store. front end right and I'll doat just to see how this looks like initially okay so it is running right now so I'm going to switch back into my browser where I'm already in Local Host 50002 all right I'm going to just refresh this and as you can see now we can see our off our headers right there right and of course down here is where we're going to see the table when we actually have data for it all right so back to vs code and let's now Define what is going to be the model that's going to represent the games that we want to show in our game catalog page okay and I'm going to collapse my terminal for a moment perhaps I can just do this and now I'm going to go ahead and open my Explorer you can do that with control shift e control shift e is going to open up your Explorer over here here and what we're going to do is to create a brand new directory um which is going to contain our models our C models so for that it's actually going to be easier to do in the solution Explorer so let's switch into solution Explorer over here and this is the best way to create either folders or files in your C projects so let's right click at the root at the project name over there right click new folder and let's create models and then in models we're going to right click and add a new file and here what you're going to see is that you have the option to create different types of files that are supported for your pro right so in this case what we really want to do is to create a class so let's click on class and the name of this class is going to be game game summary okay and this is game summary because this going to represent a summary view of our game that we want to display in our game catalog now let's collapse this for a moment the first thing that I like to do in this class is actually to fix the name space because notice that the name space here is getting stored at front end but however this class actually lives under under our models directory because of that I like to always uh keep a consistency between the names and the the name the main spaces and the folders or the physical directory where that this file leaves so to make this consistent what I would like to do is to rename this into gam store. front end do models okay now another way to do this if you don't want to do it manually is by using this light bulb over here so this light bulb is going to contain several code actions that are going to make your life easier as you as you go through your code so what you can do is just click over here you can use this option that says change name space to then store Front 10. modules right so this makes it that it matches the structure that we have in the file system right let's close this now let's define the properties for our game summary so this is going to kind of match what we did already in home. raser so first thing is going to be an ID so prop int ID next property is going to be our name game name so prop string name and here you're going to get kind of a warning over here which is very common when you define these string properties and that is because the compiler is complaining about the fact that we have defined a string property over here but we have not defined any value for it right so it cannot just have a null value because it is not a nullable property and there are a few ways to deal with this like for instance you could for instance Define a default value for this property you could say that this is a string. empty for instance that will take care of it right or another way to deal with this and I'm going to remove this is to well if you wanted to make it nullable you could say that this is a string nullable like this right that will make the compiler also happy however we don't want this name to be nullable we should always have a name for uh for a game right so let's not do that and instead of that we're going to make it so that this property is going to be a required property so required like this this means that anywhere we try to instantiate or create an instance of the game summary that piece of code has to Define some value for the name right either be the Constructor or anyway we Define H the objects of the type game summary a value has to be provided for me right and with that as you can see the the compiler is is happy right so let's keep going now we're going to be defining our gener gener and just like before we have to Define this as required like that let me scroll down a little bit here next is going to be our price this is is going to be of type decimal because we're going to have going to have a dollar values in there and lastly we have our date only release date okay I'm making it so that it is a date only because we don't really care about time the time when the game is created we only care about the date when the game is actually released right and with that we have defined the model that represents our games in our application so next we're going to see how to take advantage of this game summary model in our home. rer component so let's start by going back into home the Razer and what we're going to do now is to take advantage of a feature of Razer components that allow you to have a section of C code directly in the same file where you have declared your HTML right remember that here we have our table but now what we're going to do is just go down so let's go down over here and just after table what we can do is introduce a code section you can do that by saying add code like this and now everything that goes inside these cool erasers is going to be a standard SE okay and you can declare variables you can declare functions you can write really any kind of C code that you need to so we're going to take advantage of this section to declare our list of games right so what we're going to do now is to declare an inmemory list of games using our game summary that we're later going to be using in our HTML to render that list now keep in mind that the code that we're going to write now is just an initial version of the code and this code is going to be changing as we refactor the application towards the final version where the list of games is no longer going to be in memory but it's actually going to be pulled from the back end right so this is just start now let's go ahead and declare that list so we're going to declare it as private game summary it's going to be a game summary array now of course it's not going to recognize game summary just like that because game summary lives in a different name space right remember that it lives in the gam store. front end. models Nam space so to make it so that this component can recognize that class what we have to do is just import the missing name space and we're going to do that all the way to the top by just importing the models namespace now you could go ahead and import the entire thing right so game store. front 10. models right but you don't really have to do this and that is because when we created this project the net s template took care of defining this initial root name space in our Imports file so if we go back I'm going to do control shift e to go to my Explorer and notice this underscore Imports that razor file that we have inside components right so import that razor this is a f that's importing a bunch of common name spaces that we may find super useful across different components and notice that here we already have an import for gain store that front end and even for gain store that front end that components so because of this we don't have to be defining this part of the name spaces across any of our files because it is already understood right so it's good enough for us to just import models okay and now we have that as you can see the code section now recognizes the game summary class and we can proceed to declare our games array so games equals and so now we're going to go ahead and Define our first element in the array and perhaps I'm going to leave send this to the next line okay so it's going to be a new all right and so let's find the value so the ID is going to be one the name is going to be one of my favorite games of all time trick Fighter 2 and then uh for the gener so this is going to be fighting and then we have our price is going to be in this case let's say it's going to be 19.99 and one thing that we're going to have to do here is to specify the proper modifier to tell the compiler what kind of number is this right is it a decimal is it a double what kind of number is this so that is why we see this squiggles here and so an easy way to do this is by just introducing the M here which makes the number uh to be a decimal right you saw the compiler does not get confused and lastly well the release date which it's going to be in this case for this game is going to be a new date only to be 1992 750 right so that is our first game and I'm actually going to close this array definition over there and then of course we want to have not just one game I mean want to see something in the patient in one just one row is not going to be good enough so I'm going to add two more games here and for this I'm going to be using my chat cheat that we have in my other screen just so that I don't spend too much time typing here so I'm going to just paste that down here all right and so as you can see now we have a second game here Final Fantasy 14 and another my favorites role playing uh price 59.99 here's the release date and finally we have the last game FIFA 23 which is a sports game here's the price and the release date right and so with that we have concluded the definition of our games array but really the more interesting thing is well how do we use this gain array to render our list in our HTML table so for that let's go back into here where we're defining the table body right so here's the T body and what we can do here is to use what is known as Racor syntax to combine HTML with C on the Fly right so notice that so far all of this section is really just standard HTML right this is just standard HTML there's nothing fancy there what we're going to do is that by using the a at symbol we are switching into C right directly from here so by doing that what we can do is the follow we can now introduce a control structure right like for each for each in this case we're going to say VAR game in games right where this games is really the games object that we have defined in the code section you can reference anything that you have in the code section inside your HTML over here that is now in razor syntax and from here we can go ahead and start laying out the actual table so as you may know for a table we're going to need first a Dr for each row and then we have to declare each of the columns right so the First Column is going to be well a TD and in this TD what we want to display is the game ID remember that we have in the headers we have the first thing is going to be the ID so that's the first thing that we want to display down here so how to display that ID so here what we're going to do is use the that what is known as an implicit razor expression right which means that we can just type the add here and then notice I mean we went from HTML in t body HTML into C then back into HTML and then we're going to go back into C by using implicit an implicit racio expression that allows us to just say here game game in this case the ID right so we can use any of the of the properties of the game object that we have declared here or even of the games array that we have over all right so that's how we can Define the ID and then let's move on to the next one and in fact let me declare a few TD sections here for the rest of the elements probably just that much and then um we want to use the game. name and then the game. gener the game. price and the game. release date okay and we'll leave this one empty here for like I said for a few actions that we're going to be introducing into our rows later on all right so well that should be good enough for us to see actually some data in our page so what we're going to do is just well let's let's go ahead and back into the terminal and one thing that I wanted to show you here is that remember that we were doing net watch before right so we were watching the changes but this is something that you're going to notice uh from time to time as you're working with doed watch if you decide to use it and it is that sometimes the changes that you make to your code is really too much foret watch and it cannot just on the Fly reender things on the page so in those cases you may see this prompt here that says hey do you want to restart your application so that we can actually see the changes right and so you have the option to say yes you say no or always or never in my case I'm going to just say always uh because I find that handy so what is going to happen is that netwatch exits as you can see here the project is rebuilt and netwatch is going to restart right and so if you go back into our page now here and I'm going to just refresh this there you go and perhaps I'm going to make it this a bit bigger so we can see better uh here you can see that we have uh our columns and then now we have the ID name generate price and release date for each of our right so as you can see you can mix C with HTML in each of your razor components to render the data that you have to render and this is it is very Dynamic right however one thing that you can notice about this page and about this table of course is that it is really ugly right so it's not really what you want to show so before we start adding any more functionality to this page what I like to do is to actually introduce some sort of styling here so that this actually looks like a nice table so well before doing that let me just go back into the original size and next we're going to see how to introduce the bootstrap frame work the UI framework to style much better this a great thing about razor components is that they can use not just HTML and C but also they can use CSS right or Cascade style sheets and if you are familiar with CSS you know that that's the right way to style all of your HTML pages right so what we want to do now is to use some CSS to improve the styling of this table however uh we don't have to write that CSS by hand because there are great styling Frameworks already available that you can just plug in into your website to get it looking much better in just seconds right or minutes so in this case we're going to be using the bootstrap webui framework which you can find in the following page let me show you this this page over here get bootstrap.css going to see that the site comes with bootstrap so I find it handy that you actually learn a little bit about this framework so you get more familiar with what you're going to find with a typical Blazer project right so how do we start using bootstrap in our site it's actually very very straightforward so from this page we're going to do is just go into the docs page to the doc section over here let's go to docs and here in the documentation page what you're going to do is just scroll down into this section where it gives you the quick start and in this case in the second step is where it tells you how to introduce bootstrap into your project really all you have to do is just to import a couple of elements into your site and the first one is this link here which is the one that is going to import the bootstrap framework into your site right uh specifically the Cascade style sheet of of bootstrap into your site so we're going to do is just copy copy that line and then let's go back into vs code and well where should we put this and let me collapse this terminal for a moment well if you remember cont shift e let's go into let me collapse solution for a moment I like to do this in file explorer yeah here uh remember that we have our appat razor file which pretty much represents the root or the single page of our single page application right our laser site so this is where we have the root HTML so this is the right place for us to introduce a booster frameware you can see that we already are importing some sty sheets here right the global style sheet and also a style sheet for gam store. front end. Styles uh but now we can go ahead and also import one more thing here which is the one that we just copied I'm going to paste right here so paste it there right so now we are importing all of the Styles available in bootstrap.min.css which are a lot right and so of course this this H this framework is versioned so right now I'm using version 533 uh there may be a newer version at the time that you take this course uh but for now we're going to be using this version 533 and then the next thing is that well bootstrap also has some Dynamic behaviors that are activated via JavaScript so if you go back into the bootstrap page you're going to see that it also asks you to introduce the bootstrap JavaScript so I'm going to also do that so I'm going to copy all of this so I'm going to copy that back here and the right place to introduce this is going to be just under our player that web.js import inside the inside the body here here we're going to go ahead and introduce that other JavaScript right so this is the bootstrap that bundle that mean that JS that we're introducing here so now all of our components in our Blazer application have access to both all of the Styles available in bootstrap plus any of the JavaScript functions uh that are also available uh in bootstrap all right so now we want to do is just go back into home. Razer and we can start giving styles to our table now you may be wondering well how do I know what styles are available in bootstrap well that's very easy you just have to go back into this same page and what the documentation is is really pretty good so you're going to find on the left side there is documentation for everything that you can do with bootstrap across your side uh now in our case the main thing that we're interested in is tables I'm going to go into the table section over here and this is going to tell you everything about the different ways that you can lay out and customize your tables uh using bootstrap and as you can see there are many many things that you can do with with your tables now I already know exactly how I want my table to look like so I'm not going to be copying things from here but if you want to get a better idea of where I got all the styles that I'm going to be using across this course every Everything really comes from here so just take a look at this page when you get a chance so let's go back over here and what we're going to do is well let's start with the table Styles so we're going to go into the table element over here at the very top and we're just going to say the following so we're going to give it a class and and the class we're going to be using is table because it is a table and then we want to be using the table striped style let's also have some borders with table bordered and also let's use the table hover to add some nice small animations as we hover across the table now let's also add a different header let's make it so that the header is actually a darker so we're going to be using for the T we're going to be using class table dark right so let's start with that and let's see yeah so the watch is doing this his job so if we go back to the site now over here you're going to notice that the the the page has already changed right so notice that this is now h a table a stripe table right so it is it has a Stripes now the header is all black right it's all black over there and so it's really looking like like a table now so this is this is what we wanted to to see now a couple of other improvements that we can also do in this table is that for instance at the prices I like the prices to actually be aligned into to the right side right because there are prices and if we have a price more than 100 uh this is going to start looking a bit up so how do we make the price to go into the right side well all we have to do is just use another bootstrap style so if we go into the price header so let's start with the price header over here we're going to do is just add a class of uh it's going to be text end and again all everything about this this Styles is available in the bootstrap documentation page if you want to know more about it uh and let's use the exact same style for the actual H rows right so price DD class is going to be text end and not only that let's make it so that when we render the price we want to see it with the with the currency symbol right so so that it's very clear that this is actually a price that somebody has to pay as opposed to use a random number so for that what we can do is just use the standard facilities of C to format this number so we're going to do to string and then we're going to do in this case C2 to format this as a currency right and so if you go back here you're going to see that indeed the price is now is now on the right side right of the column and we have the currency symbol for every each of the items right okay very straightforward and then well one more thing uh that we may want to do here is to add perhaps a little bit of space right between this table and the browser right so it's just completely attached to the left side and and to the top and even to the right side right so perhap we can add a little bit of space so what what we're going to do now is not touch the table itself but let's actually go into our main layout so let me do under shift e so you're going to find your main layout under layout Main layout. racer over here and remember that this is the component that wraps the current active component that you're trying to show right so we want to do is just to always have some sort of container element around our active component now for that all we have to do is just Define div right and this div is going to wrap the body just like that and then for this one we're going to be defining the container class which is a class again a standard of a bootstrap that's going to be defining a div a nice deep with some nice spacing around our body so if we go back into the page now you're going to see that now we have some space h on the left side there and also here on the right side let's now create the new razor component that is going to act as the header for our page so as you can see here is our table and well we don't have any sort of header right now other than the header of the table but we want to have something that's going to show on top of every single page that we're going to be creating so how do we introduce that header so for this we're going to be using what is known as a nap bar in terms of bootstrap but what is a app bar and how do you create one of those well really if we go back into the bootstrap documentation over here I remember that like I said everything is H described over here and so if we take a look at all the documentation we should be able to find a place that talks about the napar over here here's a napar and this is going to give you all the information about how to declare these na bars like this one over here right so this is naar and this is the kind of stuff that we want to uh show in our case it's not going to be that complicated we're not going to have menu items but at least we want to have something that shows the name of our application right the game store and that's going to se be clearly separated from the rest of the of the data now if you keep scrolling down a little bit um the start I'd like to start with is actually this one here that says as heading because all we want to show is something like this right just a title for our site so how do we do that okay so we know what what content we want there but first of course what we have to do is to create the actual razor component so let's go back into vs code and let's go control shift e to show the Explorer in this case we're going to be switching once again into solution Explorer because is the best way to create this these new files and the place where we want to place this H component is probably going to be inside layout because this Nar is going to show it's going to be part of the layout for the entire side so I'm going to right click on layout I'm going to say new file and if you scroll down in this list you should be able to find one element that says razor component okay so let's pick razor component and the name we're going to give to this component is just nap menu right so na menu great so let's go ahead and collapse this and here's our our component now notice that uh I mean it's very similar to the one that we have already right to home the Eraser uh it has an H3 here for the title and it has a code section but it does not have um page directive right so if you go back into home that raser we going to see that home actually has a page directive here with a SL here meaning that you can get to this component by just going to this route in this case it's just the the root of the of the site but in the case of nap menu we don't have the page direct it so this means that this is is going to be a non routable component right you cannot navigate to it but you can Define it and reuse it or or Nest it into any other component as you're going to see okay so what is going to be the content of this D menu well we already saw that right so it's over here so I'm going to just copy this from bootstrap and I'm going to come back here and well we don't really need anything anything that we already have here so I'm going to just delete all of this and I'm just going to paste what we just called all right and so I'm just going to make one small change into this because I'd like to actually do a kind of a dark team for our nap bar so for that what you want what you want to do is just say here data BS theme is going to be dark and again all the documentation about this is in back in that bootstrap page also I don't like to use container fluid it's not going to render really well for our site I'm going to just use container right here and we want to change nap bar into game store right that's going to be our our title for the for the now what we want to use we want to do is to reuse this component somewhere else and that somewhere else is going to be our main layout that Ray remember this is the the one that represents the layout of the application so to use that other component over here all you have to do is just to declare it like this so in this case nap menu like that and that should be good enough for us to be able to reuse the component in this other component so you just nesting that component all right and so yeah with that we should be able to see the changes that got applied so hot reload uh already did the job so let's go back into the page over here and as you can see our knar is right there game store right on top of the of the homepage and it will show uh for every single page that we create without us having to do anything else because it is part of the main layout and so yeah that's looking much better uh one thing that I don't like is that well the table is completely connected to that header so I'd like to have some space between that napar and my table so to fix that all I'm going to do is just go back here and actually let's go into home the raser and at the place where we declared our table over here we're going to be using one more boot strap style that allow us to to have some margin uh from the from the top element right so in this case I'm going to use the margin top or mty and then you can assign a few numbers here I'm going to be doing empty3 which means use three three spaces from the top element which in this case is going to be the number bar so you go back to the site over here you're going to see that now we have this space right there okay so you could add more or less depending on uh how much space you want to see there but I think this is looking fairly good so far okay now if you go back into our code over here I mean you saw that we have all of this H C code to Define our data or our ink memory array of games here so in order to have a better separation between the code that we use to render our home component and the data itself and also to prevent this file to just be too big what we're going to do is to introduce a brand new C class that's going to act as a client that can be used by our home component so let's see how to do that let's go ahead and open up our Explorer View contr shift e and while being in solution Explorer solution Explorer we're going to go ahead and just right click on gam store. front end we're going to say new folder and this one we're going to name clients right so this is the place where we're going to be declaring this type of client CES and the first client we're going to need here is of course a client to manage our list of Gams so add new file this is going to be a class and let's name this one games client all right and then let's collapse this and just like we did before the first thing to do is to fix this name space so I'm going to use a light bulb here to say and perhaps I actually need to step into the name space so then let's click again and yeah change name space to gam store. front end. clients great and well what we're going to do here is to uh introduce our games list into games client right so for that let's go into home. racer and let's go ahead and copy copy this array to copy it into games client okay now just like before uh this file is not recognizing game summary because it is in a different name space so I'm going to do control dot here control dot uh which is a way to access the code actions without having to click on the light bulb so control Dot and so what you can do is just select using gam store. frontend models that and I'll notice that name space has been imported at the top of the file now one change we're going to make here we want to turn this this array into a list and that is because this class is going to be dynamically changing the contents of this collection of games which is not going to be a static anymore right so with an array is going to be a bit more complicated so what we're going to do is just to turn this into a list the home component is going to still use an array but inside here we want to use a list so let's switch this from game summary array into list of game summary just like this and then what we want to do is to Define some sort of method in this class that our home component can use to fetch this list of G because notice that it is a private member here it cannot be accessed from the outside so how do we access this list we don't want to Grant direct access to that to that list uh we always want to have some sort of a method that provides kind of curated access to the to the data that we have in this client so for that we're going to be declaring just one simple function so public and this is going to return actually a game summary array because the array is working just fine for our home component uh and then the name is going to be get games and we're going to use directly Point into games. games. to array right now there are a couple of things that we can improve here also uh first thing is that you can notice that there is a little suggestion here that says that the collection initialization can be simplified and that is true what I'm going to do is actually just click on these three dots and then just do control Dot and we're going to be switching into using a collection expression okay which is another way to uh go from your list into an array by using this expression that you can see here right little Improvement on C another thing that we may want to improve here so let me see this three dots here uh it is suggesting that we should make the field read only which makes sense because there is not going to be any place across our code here where we reconstruct the entire list right we are not going to be assigning anything a new value into this list we will be adding and removing elements from the list but we're not going to be destroying and reconstructing the list so because of that we want to add the read only modifier into this list which protects it from being modified later on again this mod this prevents a modification of the actual games object as opposed to the modification of the elements inside the list awesome so now that we have this games client ready what we're going to do next is see well how can we use this games client to populate our list of games when our home component is getting initialized so let's go back into home. racer and what we want to do is well while being in the code section well we want to declare an instance of our games client like I said there are different ways to do this and we're going to see more about that later in the course but for now we're going to just declare it as a standard variable in the code section so it's going to be a private gains client it's going to be the client and of course uh notice that uh it is not recognizing the client because it is in a different name space so let's go back over here and let's use let's import the name space clients like that okay let's go back here so now it can recognize the game's client and this is just going to be a new instance just like that now our gain summary array is now coming from the client right it's going to come from there so there is no need to keep having this this entire array declar here so I'm going to just remove all of this right it's not just game summary games okay I'm going to just close it here and well since we are not going to have an instance of this game summary array the component is initially created and we're going to see in a second where we're going to create the instance of this what we have to do here to avoid this warning is to actually Define it as null because it is expected that it's going to be null when the component is just created but well where do we actually initialize uh this array well that's going to require the use of one of the life cycle events and methods uh in Blazer so there is a specific life cycle of events in Blazer applications and I can actually show you a little bit about that here so I'm going to pull up this page from the play documentation over here and what I want to show you is that if uh well this what page is this let me show you this is a page hn net core razor component life cycle right so this is the is part the Blazer documentation and so what I'm going to show you is that there are a series of events that occur for every single Blazer component right so you as you can see right here when your component is instantiated right so it is created and then it's going to go through the set parameters async uh method so that's a method that you can use to receive parameters into your component which is something we're going to learn uh a little bit down the this course but we're going to explore that later uh But after those parameters are set if you have any parameters then this method on initialize async is the method that's going to be invoked right and there's also this concept of first render and uh and after render here which we're not going to talk about right now but uh as you can see there's an entire life cycle and you can learn more about that life cycle over here but the method that we care about right now is this one called uninitialized not Asing yet because we have not learned about a synchr par just yet it's just going to be uninitialized so let's get back into our code and what you can do now is just override that meod so we're going to say override and then we want to use a so void on initialized right so right there so this method is guaranteed to execute after your component has received parameters if it has any parameters it it just have to execute Blazer knows about that so this is a right time for us to go ahead and initialize or populate our games array so we're going to do is just say well games equals client. get games there all right now uh you may also notice that there is some sort of a warning in our HTML so let's go up here so yeah we do have a bit of a warning here about gam so what's going on there well going back to the fact that now games is annable right so remember that game summary is a nullable array so what this is doing and the compiler is alerting us saying hey uh if I happen to come through this code here and your game's array is null uh then well we're going to have a problem here right and so and that's going to actually happen so to prevent this what we can do is to add a conditional statement to do something uh in the page when the game array has not yet been initialized right so to do that all we have to do is the following so let's once again use RoR syntax to introduce a conditional here so we're going to say just on the top of table we're going to say that if games is null if our games array is null we're going to be displaying something special um we're going to take a look at that in a second uh but uh if not if it is not null then we're going to go ahead and actually show our dat okay so I'm going to just close this down here on table okay and perhaps we can move the table a little bit just one t there so it look better right so only if games has a has a an instance we're going to go into this section otherwise we are going to have this if over now notice that the warning is gone right so we don't have any more warnings that we have over here is gone because there's no way to get into this section with the games being right because we are preventing that over here so one um conventional thing to do here here is to present some sort of status of what's going on to the user right to saying hey I am kind of loading the page so just give me a second until I get all the data R so for that well there are many ways you can do this perhaps what we can do is something like this so it's going to be a paragraph and perhaps we an em like that we're going to just say loading right so the games is not a instance is not there we're going to show loading otherwise we actually render the tape awesome so with that done well let's see if yeah hold reload has been working for us in the background so let's go back into our page over here and we can see that the data is right there and then well what we can do is just refresh a page to make sure that everything is working as expected so it is right everything is working as expected no issues about component initialization what we may want to do is just just for the sake of of being um safe let's stop a doet watch so that we can see the very very first time when the component boots make sure that it is working properly so so I'm going to go ahead and do to net watch once again all right and then I'm going to go ahead and just refresh my page and it is there now of course we cannot see this loading screen just yet because it is too fast right everything is working in my machine and so there's nothing to be waiting for the instance is created right away but later on as we start integrating with the back end that is going to become much more interesting and important right but for now we are done with this part we are done with the rendering of the list and what we want to do now and next is to figure out a way to allow the user to create new games in our application let's go back into Visual Studio code I'm going to collapse my terminal for now and what we're going to do is to create a brand new razor component that we're going to be using both for creating new games and also later for editing existing games so let's go into our Explorer so control shift e and I'm going to be doing this in solution Explorer and by the way let me just close all these tabs so let's collapse this and let's collap the layout we're going to be doing this in our Pages directory just next to home. Racor let's right click on pages let's say add new file and just like before we're going to be using a razor component and this component is going to be named edit edit okay now let's go ahead and collapse this and in this uh in this new component we're going to first set up a few basic things and the very first thing is going to be well how is that our users are going to reach this component so this has to be a rotable component so we need to specify the page directive to tell player what is the route that can be used to reach the component so we're going to say page and then the route that we're going to use here is going to be edit edit game right so now our users can go into that location and Blazer will render this component next thing we want to specify here is some sort of page title right so we'll do we'll use a page title component and for now this is just going to say new game later we're going to see how we can change this so that it dynamically either shows new game or edit game uh depending on if user wants to create or edit and then for our ag3 we're actually going to change this into new new game okay now the next we're going to need is some sort of model that we can use to bind to the form that we're going to be using here to capture the user input right and we cannot quite use the model that we have already so if you go back into our model folder we have the game summary H model already and it is actually very similar to the one that we need here but the the key difference with this model and the model we actually need for editing is that we're not going to be capturing the gener uh as a simple string but the user is actually going to select the generate from a drop- down list and for that we want to capture the generate ID not the generate strak so because of that we're going to be creating a brand new model that is going to be slightly different from game summary but it will be able to capture generate ID so to do that let's go back into Explorer in this case I'm going to actually just use the file explorer because in file explorer I can just right click game summary and I'm going to right click in models and I'm going to say paste so copy paste so I'm creating a copy of game summary and this is going to be game let's call it game details right so this is game details let me collapse this game details okay now game details like I said is very similar to game summary but let's see so we have an ID that's correct we have a name but we don't want to have a string generate like I said we want the generate ID so let's rename this into generate ID and even when the generate ID is actually going to be a number in integer in this case we're going to leave it as a string because the string type is going to tie very well into the way that we bind things into our input select component uh in the next set of steps but we don't actually need it to have a a value all the time so this one can be nullable and and there's no need for it to make it required we could make this guy an INT all right however we are going to have problems when we want to present the initial value for that draw down list which is going to be really empty and the int is only going to translate into a number of perhaps zero and zero is not going to map well into the dra end list because of that we want to use a string a newable string that is going to allow us to have an initial n value in that drop down and later the user can select the value that they want to use right and the rest is going to be the same in this game details now with this game details model ready we're going to go back into Ed game and then in the code section we're going to Define what is going to be the instance of the game details object that we're going to be binding into the form that we're going to be defining very soon so let's define private game details game okay let's define a get and set for this one I'm this going to be a new we're going to create an initial instance of this game details and of course I mean it is not getting recognized here so we have to make sure that we import the right in space I'm going to say here add using models right so it recognizes game details and then we do need to specify some initial values at least for the name and the release date uh and specifically for the name because the name required remember that it is a required string right if you don't specify any initial value look what happens here so if we do this we're going to have a problem here right it's going to say hey non property game must contain know new value when exiting Constructor so if we have to set this as new but it's not enough to just say new because we have to specify something for game details. name right so let's go and specify something for the name so the name well is just going to be good enough to say dring that empty and then we probably don't want to spe start with a release date that is just a random date we probably want to start at least with the current date the date of today so release date is going to be date only from daytime and it's going to be daytime actually daytime that UTC now right so that is going to be the initial object we're going to be using in the form that our user is going to fill in right with a empty name and a release statee of the day of today so next we're going to see how to actually Define this form that the user is going to use to input the values now how do you define a form in HTML well that we can actually take a quick look at that from the strap documentation once again so here I'm back in bootstrap in the documentation page and I I am in the form section here the forms overview section and you can take a quick look at how you normally Define the forms by looking at examples here for instance here's a very simple form to that captures email address and password right and there's a Buon and a checkbox here how is it defining normal HTML it is right here right and so as you can see it's a standard form element and there's a bunch of deeps to Define each of the inputs that are going to be captured from the user and even a bu at the very end so what we're going to do is to just copy this and we're going to go from this into an actual form that uses Blazer controls to capture dat right so I'm going to just go ahead and copy this to clipboard copying everything from the CLI to the clipboard and then back in our razor components I'm going to paste that right here right now from this example I'm just going to keep one of these diffs here to start and not even the but so just going to keep one of the divs and then we are going to be replicating what we're going to do for one of our input controls we're going to be doing the same for the ERS now as you can see in standard HTML we start with the form element over here however in Blazer there is a much better option which is known as the edit form component right so that component is great because you can actually bind that component into your game object that we have we have over here in such a way that whatever the user enters is going to be stored directly in our game variable and on top of that we can perform nice validation on the inputs of the user before they send the data back into the server right so let's go ahead and change this form Clause into edit form okay so we should also close down here edit form and then there are a couple of things that you should specify for all of your Blazer forms the first thing is going to be of course the model what is going to be the model object that's going to be bound to this form so model is going to be in this case we have to use razor syntax to point to our game object over here so we're going to say add game okay and the next thing is that you have to specify what you have to give it a name some name for this form this is because there could be multiple forms in your page at any given time and you want to make sure that Blazer does not get confused with which form you are posting back into the server so we're going to do form name and let's just name it edit game so now we have the form and we have to start specify what are going to be the input controls in that form so what we have here is just a new diff that starts with some margin bottom so three spaces in the bottom just so that it's not completely tied to the next control right and then we have a label standard label now uh we're going to give it a a name to the input that we're going to be creating here so this is going to be for our name input okay and the actual text is going to be just name because this going to be the name and then we're going to make make a few changes here first we're going to get rid of this last D we're not going to use that and then instead of using input here we're going to be using another component provided by bler right so this one is named input input text right so this is the control that you can use to capture just a standard text in your form now let's also close this at the very end like this okay so it's an input text and then we don't need a type here but we to did an ID so let me actually grab the ID from here and into just overwrite type with ID and the ID for this one is going to be name okay so now for this to work properly uh just make sure that this name that you have here right the ID that you have here it matches the label that you specified here right so this is the label for the name that you the the control that's named name right with 48 right so those have to match okay now we're we not also not going to use uh this one right now uh but the last thing that is very important to use here is the bound property because we know that we are bound into the game model over here but we need to tell it to which property on that game object we are going to be binding this input Tex control or input text component so for that what you want to do is use the bind value attribute here and for that one you're going to specify in this case game do just like that and that you have specified your very first uh input um input component for your edit form now just like this let's go ahead and Define a few more components for all of the data we have to capture from the user so I'm going to add three more of these so one two three by just copying the first one right and so let's fill in the value so the next one is going to be the gener now the gener is interesting this is not going to be an input text this is going to be an input select right so this input select and then this is going to be the ID is going to be right let's make sure that we use the ID here over there too for the label the bind value is going to be into game. gener ID right remember that we using this model specifically because we need the ID we don't need the the name of the generate but the ID and the class for this one is actually going to be form select now for this input select component we're actually going to have to have something inside input select I mean the options for the input select right but for now uh we're going to just leave it empty and we're going to look into how to fill in the the values for this inut select later on uh for now let's just Define that and let's keep keep moving on so that we can finish all of the components for this form and we can see how they render in the page so next one is going to be ID price so it's going to be the price let's make sure we use price here and there let's put price here this is going to be not input text but this input number this input number and it binds into game. price okay and for the last one this is going to be our release date okay release date over here we're going to put also release date the bind value is going to be Again game. release date and uh the actual control is not going to be a date it's going to be an input text sorry it is going to be an input date so input date is the right type to use here because we dealing with a date object okay and so by doing that I mean we have some basic layout for our for control and I think it's a good time to go ahead and test and see how this control actually looks like in our front end so let's go ahead and well let's see okay so net watchat at this point is asking us to actually restart the entire application because the changes were just is too hard so let's go ahead and say I'm going to say a for always so it's rebuilding and the netw watch is going to restart now okay so he restarted let's head back into a page well there's nothing really different here and well the thing is that we have created a brand new component right so now we have to navigate into that new component now what what is the address of this new component well if you remember and let me collapse this for a moment the address is slash edit G so let me copy that let's go to the portal and let put that here so edit so I'll hit enter and as you can see now we are in our brand new page where we are able to collect the name the gener the price and the release date and notice that for the price there's even uh facilities to move up and down the numbers and the release date is able to I mean you can select from this nice calendar over here right These are nice facilities that come by default with bler now I think that uh the width of of the controls here is just a bit excessive right I don't think we want to have a form that just goes all the way to the right so let's make a small change to to make it so that this lays out a little bit so let's go back here and all we're going to do really is just to use both the row and the call elements of bootstrap to lay out things a little bit better so I'm going to add a diff just at the top here which is going to have a class of row okay so these rows are the standard way that you lay out rows in your bootstrap layout okay and then under the row we're going to add one more thing which is going to be another div with a class which is going to be uh a call but not just a normal column it's going to be a column um a minium column of size four right so I'm going to close that and let me close the div over here there and let's move just tap this edit form a little bit to the right there so I not not read better uh now one thing to notice is that in bootstrap you can have up to 12 columns if I'm not wrong 12 columns uh and so by using four here I'm saying that I want pretty much less than half of the Page by thinking of the horizontal page uh to render my form so now let's go back into the portal and as you can see now our form is only using this left side of the patient right so this will be the four column that we're using right now if we said something like six perhaps it would be all the way to this Mark over here right or and if you don't do any numbers well it just goes all the way to the end but this is looking just fine for me okay now but as you can notice right now we don't have any values to select here for our gener dra list right so next we're going to learn how to go ahead and populate the values for our generous in order to populate our gener drop down list that we have here we're going to need one brand new model that we can use to represent our generes with an ID and a name and then we can create a a list of those generes that we can bind to the drop down list so let's go ahead and start by defining our brand new mode so back in P Studio code we're going to go ahead and do cond shift e to open our Explorer in this case we're going to switch into our solution Explorer because we're going to to be creating a brand new file and this is going to be under models we're going to right click and we're going to say add new file this is going to be class and the class name is going to be gen okay so this is gener and then as with everything else we want to fix the name space so let's go ahead and select change name space to gam store. front end. models like that and then for our properties we only really need just two properties the first one is going to be our ID and the other one is going to be a required string which is going to be the name right very simple model but very useful for our draw down list now just like we did with our games we also need some sort of client that our edit game component can use to retrieve that list of gener so let's go back into Explorer and we're going to go ahead and create a brand new new client so let's right click under client where we only only have games client right now we're going to right click new file class and then this is going to be our generous client okay let's collapse this and then once again let's click on the namespace and then let's click the light bulb and then change namespace to gam store. front end. clients now just like with the other client we're going to start with an inmo list of generous and later on you're going to see how this client is going to evolve to be able to pull those generates from the back so for now this is going to be just a private with only generate this is going to be just a general array and that is because we're not going to be modifying this list really at least not in memory it's just going to be static for the process of the drop down right so it's going to be name generous and then here is where we're going to be defining the values for our list so I'm going to start by saying well this is going to be a new gener and this is going to be let's say ID one and then the name is going to be fighting that's going to be our first gender now of course we want to have a few of them and I don't want to type all of them so let me actually grab them from my cheat sheet on the other screen let me scroll down here and I'm going to just paste them under this first one there okay and so now we have five generes right we have fighting role playing sports racing kids and F okay those are the first the five gers we're going to to be using for our purposes here and then lastly in this same class we're going to be defining just one method similar to the one that we did for the games client which is going to be used to retrieve the list of gener right so public and this is going to be turning a gener array get generous and then uh we're going to go ahead and point this into generous all right so with this we are pretty much ready to start taking advantage of this generous client in our edit game compon so let's head back into edit game and let's get down first into our code section here where right now as you remember we only all the only thing that we have is the definition of of our game object we're binding into our form so now I want to do is to define a few new things first thing is going to be the instance of our generous client right so it's going to be private generous client G client okay and then we may need a an aace import for gender's client so let's go all the way up here and so of course we need to add here using clients right so now we're using that name space we can use the generous client and we're going to just create a brand new instance of that client here the next thing we're going to need is H some variable that can hold that list of generat so that we can bind it to the drop- down list right right so let's go ahead and Define our private gener array generous and just the same thing as with our home component we want to make this gener array nullable because we will use a specific life cycle moment in the creation of our component to actually set a value for the gender but initially it is just going to be new now where do we initialize this was just like we did with our other component that's going to happen in the uninitialize method so let's go and Define override void there and here well all we have to do is just say that generous is going to be generous client. get generous it's also Define this as protected okay because we are overwriting the method that's defined in the base class right so now we have our generous populated when the component is initialized right so now we have to take advantage it in our HTML specifically in our form in our input select right here where we're going to be let letting the user select the G so how do we take advantage of it so as you may know uh the way that you define this U the options or the values for your drop down in HTML if by using uh the option element so that's exactly what we're going to do here but we're going to do it a little bit dynamically so first let's define one option the first option is really going to be the option for the the initial value just so that we can tell the user to please go ahead and select some Jer so for that one the value is actually going to be just an empty string so that it binds nicely into our null value of our game details object initially uh but for the actual display the string let's let's say select a j right so that's that but what we really want to do is to actually populate the draw down list with the actual values so for that all we have to do is do a simple for each uh Loop here so we're going to do for each and then we're going to see VAR gener in generous there and here we're going to be defining well one option for each of the available values there so I'm going to actually just copy this option from here over here and then the value for each option is going to be at generate that ID right because that's a value we want to capture in the in the game model that we are using in this form we want to capture the ID and and for what we're going to be showing to the user is actually going to be the name so generate that okay so that's how you can dynamically populate in HTML the values for the gener by combining both C and htmls it's just razor syntax now we have the same issue that we had with h the home component right so it is complaining here because it says hey you may run into a n reference here the very first time that the page is loaded so but we already know how to deal with this right so all we have to do is introduce some sort of if else here to deal with a case where generous may be so we're going to say at the top here that if generous is null we're going to do something here we're going to just go ahead and say uh well we're going to put another Well a paragraph just like we did before paragraph and in the paragraph we're going to go ahead and do an em and we're going to say loading and otherwise we're going to do else and then here's where we're going to have the section to render the table so I'm going to just take this closing corly brace all the way down here there and then I'll just take this tab to the right so it read better and then with that we should see that our generous object here is no longer displaying any sort of warning because we can only get here if generous actually has some value all right right and yeah I mean with this we should be ready to show those generes so let's go ahead and let's see uh looks like H reload succeeded right after a few failures uh it has succeeded so we can go back now into our page over here let's see if we can see those now we may want to we may need to reload this yeah there it is after reloading we can see that we have the initial value of a select a generate right there and then if we open this yeah we can see that that we have our five different generes that the user canel right there it is great so this is great H and if you go back to vs code um one thing that we may want to do is to start figuring out a way to not have to declare the same name spaces H for every single razor component so here in edit gate. Razer we have defined that we're using clients and models and then if we go back into let me go into our file explorer here back into home that rer you're going to see that all the way to the top we are defining the same thing right so using clients and using mods so what we want to do is to not have to redefine this every single time and there's a very nice file that we have already actually seen but we can actually start taking advantage of it uh from here on to not have to so all we have to do is just go to Explorer and then let's go into our imports. rer file this file over here right so import. rer so this is the file file that contains the common Imports across the entire project so anything that we add here any space that we add here is going to be already defined for every single component across a pro so really all we have to do is to introduce the missing name spaces so the first one here is going to be our client space right so I'm going to just add here add using store and actually intentionally going in this line 10 just so that things are in the right order right it doesn't have to be in the right order but but I think it's going to have things sorted so gam store. front end. clients and then the other one is going to be gam store. front end. models right and just by doing this what you're going to notice is that well Blazer is actually actually alerting us now saying that hey this clients is already defined you don't have to Define it again same thing for modeles so well all we have to do now is to remove those two same thing for edit game we can go ahead and remove those two right and just by doing that we can now use anything in the clients and models spaces and in any component without having to have this using directive at the top there and if we go back into our page and let me make sure that yeah hot reload is just fine let's go back into the page uh we should see that everything is working as expected so I reload and it's still working just fine so there are no issues here awesome so with that in place H what we want to do next of course is to will submit this data from the from the browser back into the server right so we can actually add this brand new game into our list of games so for that the first thing we're going to have to do is just go back into vs code into our games client right so here is our Let's see we go into all the way up clients games CLI let's start here all right I'm actually going to close all the other files so we can focus on this one now what we're going to to need is to have some sort of method in our games client that we can use to add a new element into our games Lista we have here because it is private right so the only way that any component is going to be able to add something here is by having some public method that can uh add a new element into this gank list so let's get down here and let's just at the very end let's add a brand new met so let's name this one at game all right now the the type of the game that we're going to receive here remember that it is game details you know it's not a game summary because game summary is one that we use at the Home in the home component uh but in the edit component we're using Game details so we're going to receive a game details game okay and then what we want to do here is to since I mean as you can see what we have here in our list is is a list of game summary it is not a list of Game details so somehow we have to transform these game details into a game some instance before before we can add it into the list so let's go ahead and try to do that right so let's go ahead and say Well Bar game summary it's going to be a new well game summary okay and for this we have to define a few properties right so we need the ID and so what id are we going to be defining for this brand new game summary Well for now since it's just um an email list and it's just a step towards later using some data from the the back end for now what we're going to do is just get the count of our games list so games. count and then we're just going to add plus one right just to keep things very simple and next property is going to be our name so name is going to be from G name and then we have the gener so generate and then thing is well if we do game. generate we're going to notice that here we have a bit of a problem right because game summary uses the the gener as a string because that makes sense to show in the homepage but H the game details have the generate ID which is what we capture from the user the ID and it makes sense that's what we need so before we can complete the definition of this game summary we're going to have to find a way to take the the ID of gener that the user selected and transform it into the description of that gener or the name of that that gener right so to do that we're going to do a couple of things the first thing is that here in this same class we're going to be defining one more array so not just the games array but one more array which is going to be for our gen so just under our previous array for games we're going to be defining the following so F the read only gener array and then this is going to be the generous and then to retrieve the list of generous which is pretty much static at this point it's just a simple this that comes from the games client what we're going to do is just say well this going to come from the new generous client here client and then we're going to see dot get G right what this is doing is just creating an instance a temporal instance of jous client and then we invoke the get generous method to retrieve all of the Jers right away into this array here and with that what we can do is to well use the list to find the corresponding generate to the one that has been specified by the user in the game details so now in at game what we're going to do is just say the following so before we defend Define the game summary we're going to say VAR gener equals gener stat let's use uh single in this case gener single and then we're going to say where j. ID should be the in. parts of game. gener ID okay so that way we can go ahead and uh find right so find the gener in this generous collection the gener that matches the ID that has been specified in the game details that the user select now there's one small problem here once again this is about n levels right so this is saying that well generate ID may be null so if you try to pass it as a null into in that Parts you may have a problem there so there are a few ways to deal with this but what we can do just to be safe is to well make sure and validate that gener ID is not and a very handy way to do this is by using the following so you're going to do argument exception dot throw if n or wi space so here we're going to be passing in our game. gener ID right and this single call is going to make sure that if gener ID is null which it should never really be null but if it is null then uh we're going to just throw an exception and then there's no way to get to the next line if that's the case so if we do get here the gener must have a value and that's why the warning has gone away and with that well now we know the actual gener that was selected by the user so we can go down here and say okay so this gener is not going to be game that gener is going to be game um generate. me right so now we have the generate and then we can continue with the price which is the price and release date is G that release date awesome and now that we have our game summary all we have to do really is just add it to our list so games. add and then we add the G new game Su great so now we have the ability to add new elements into our Games Collection so now it's time to go back into our component and see how to take advantage of this method so let's go cont shift e and let's go back into components edit game that Reger over here the first thing we're going to do is to define a method a c method that we're going to be using in this component to invoke the ad game method from the games client so let's go down into our codee section and perhaps at very end just after our our uninitialized we're going to define a method that we're going to call Private void handle submit okay when the user submits this is a method is going to be invoked so well how do we use the client all we have to do is just say games client which by the way let's see we have defined client already we don't have a games client here right so we should Define it sure it's not here yeah it's not here so let's go ahead and Define that so private games client games client equals new okay so now we have an instance of the games client we can use here so now we can say games client. add game and the game that we're going to add is the game that the user has been populating uh via VIA binding over here right this this game instance here that is bound to the form is the model of the form so we're going to put that here okay okay so now this method is ready to go ahead and do this but we need to tie or connect this method to our edit form and doing that this actually very straightforward all we have to do is go back into the definition of our edit form right here and we're going to do is just say here after the form name we're going to see onsubmit we're going to invoke handle handle subit okay so that's going to make it so that whenever we post this form back into the server then the handle submit method has to be invoked however of course to be able to post the form we need some sort of uh UI element right so basically a Buton or a link or something like so let's go ahead and add a but into our form so that the user has a way to actually submit his uh inputs his or her inputs so down here just before ending the edit form we're going to be defining our Buton so it's going to be a Buton and then this is going to be of type submit okaye and let's close things like that uh we may want to add a little bit of styling here so it that that it looks nicer so let's do it class is going to be Buton DTM primary and once again all this styling is well documented in the bootstrap page so you can go there and there are many variations of the bons that you can use to show different colors and styles right okay so we are almost done here so we have the Buton we have the logic to add the game all of that is great but there's one missing piece which is the one that we have to add in our code section and it is that we have to tell laser what is going to be the object that's going to contain all of the data entered by the user and so I mean yes we have bound the game object into the form so it knows that game is the model however it doesn't know how that that data is going to arrive into the server when the user submits right let me actually fix this a little bit like that and so since we're posting this via a form we have to tell bler that this object here is going to contain all of the populated data and the way to do that is by using the following attribute on top of your game declaration here we're going to say Supply parameter from form okay otherwise if you don't do this and you just posst a form Bas is not going to know that game should have all of the values that have been posted as a form into the server right so when this arrives to the server because we have this attribute players is going to populate this game object with all of the data entered by the user all right and so yeah that is the last piece really and we are ready to go ahead and test out uh this edit game comp so to do that what I like to do is actually to set a break point so we can do a little debu session here just to confirm that the game can be added to the Leist so I'm going to go all the way to the end line 63 I'm adding a break point there and I'm going to open up my terminal I'm going to stop my net watch and instead of that I'm just going to to well I'm going to close my terminal I'm going to do F5 so that we enter de buing and I'm going to do this because uh we want to just make sure that the elements the new game is getting added to the list right you'll have a good way to verify that otherwise so yeah we're running right now I'm going to go back into my page over here I'm going to just go ahead and refresh it refresh it and I can tell tell right away that we missed one small thing over here right so the B is there but it has not so let's go ahead and fix that quick weekly let me go ahead and just stop debugging for a second so that we can add the actual text text to The Bu right so right here in line 37 all we need to do is say save that's all it is so I'll do F5 again okay and I'll go back into my page over here I'm going to refresh this and notice that the B now says save great I'm going to enter some data right so let's say I'm going to add a new game here it's going to be Super Mario Bros 3 it's going to be a kids and family game let's say that the price is $9.99 and let's say that the date uh yes we may want to go a few years back right let's say 1995 February 13 so let's hit on Save and let's see what happens so now as you may notice here BS code has stopped into our handle submit method right there so that's awesome and then let me collapse this for a moment let's see that they game object actually was able to receive from the form it received all the values right into the gener we have we don't have an ID an ID that makes sense uh we have the name we have the price and we have a release date everything as we entered in the form so that's great so I'm going to go ahead and step in into against client so we can see that we can go to the next step we already find that is not null we should be able to find the gener here yeah so we found that this is kids and family and then we Define our game summary and the game summary has been added into our games so as you can see now we have four elements where the last element number three is the one that we just added so yeah so the element has been added it is part of our list so the logic is working as expected so I'm going to go ahead and just hit on continue and then going back into the browser well uh sadly nothing else is really going to happen at this point because we don't have any more logic to say for instance go back to the homepage or do something else after this but that is okay uh and I think that what we should do next and what we're going to see next is well how do we add a some perhaps a Buton into our homepage to a home component so that we can navigate from that homepage and into this H this edit K component so that the user can enter a brand new so if you go back into home so let me just clear the UR here let's just go to home what we want to do is to start with is to have some sort of Buton here right that allows us to just jump into that edit game component so how to do that well that's actually very straightforward if you go back into our vs code over here I'm going to do is just to stop our deox session I'm going to clear this break point and I'm going to well let's go ahead and just close all of our documents and let's go into home. raser okay let's start here really all we have what we have to do is to uh find a good spot in the page to add a Buton with a link to go into the other page so right here I'm going to add a brand new div okay so it's going to be a new div and let's make sure that this has some good styling just so that uh it is not completely touching the top of the page so we're going to say margin top let's use uh two spaces or two points in there and then we're going to do is use a simple anchor standard HTML anchor like this and this anchor is going to have the text of new game but we're going to also style this anchor right so it's going to be a class with the Buton class so that it shows like a Buton and not just a simple anchor so ptn primary and we're also going to give it the roll of a a Buton and finally we're going to give it the H ref so that it knows that it has to go into our slash edit game component all right right and so with that that should be good enough for us to just at least be able to go from home to edit game so let me go ahead and open my terminal once again I'll go into terminal I'll delete this one here and I'll do net watch in the game store. front end directory right website started let's go over here I'm going to refresh this and sure enough we now have our brand new new game Bo over there so we can click on that and now we are in the edit game p which is great now now before we add the logic into this page to be able to just go back to home after we save one thing that I like to highlight is what's really going on behind the scenes in blazer because it's a bit unconventional so and to demonstrate that what I like to do is just to open our browser Dev console so for that let's just hit F12 so F12 key in the browser and then as you remember this tab here this elements stab over here is one that's going to show us what is the well the HTML that is is been shown for the current page now one thing that I want to highlight here is that we are not really reloading Pages as we go from one page to the other everything is really happening in the same page or at least looks like it is happening in the same page so let me show you this let's go to back to home okay so here we are in home I'm going to open up this element here and then we have the body there so if I just click on new game notice that the only elements that Chang it were the title here and the the the the data that was inside this container right so let's go back into home right and notice how this elements flash right so it's going to flash this and it's going to flash also this here so once again I'm going to click on new game and these two Flash and if I go back they flash again so what's really happening is that the page is not reloading and this is a built-in feature of laser what's happening is that Blazer is intercepting our request to go and get a new page and instead is just sending a fetch request into the server so to retreat the HTML of the updated page and merge it into the current HTML of the current page and perhaps if we go into the network tab over here if we go into Network tab over there that might be a little bit clearer so let me see if I can expand this a little bit and what I'm going to do is just well let's clear everything here so the network tab is the one that's going to show every request that goes from your browser and into the server so yes I just go refresh this right I'm going to reload this um that is showing all of the the the things that got requested from the server to load the very first time right once again I'm going to clean this refresh and notice that everything is loading so see here we have our actual get to retrieve the homepage then the get to retrieve the CSS these other CSS the JavaScript the browser refresh which is for net watch and then even more CSS ands right so all of this had to happen to load the initial page the homepage however if we now let me close this if we now click on new game so click on new game notice that we did not have to reload all of the files right we don't see a bunch of new requests for all the files really the main thing that we see here let me see if I can expand this a little bit to the right is this call over here this one here so this is the one that got added as we navigated from home and into this new Page Plus a little bit of SVG changes here but really this is the main one and this as you can see is a fetch request it is a fetch request into the location that's going to that we have asked right if we click on edit game we're going to see that this is actually taking us into the new page right into edit game as it says right there but it's a fetch request so we are not trying to reload the entire page and instead we're just saying hey just bring me back the HTML of that other component and I'm going to merge it into the current page so that is a very nice feature of Blazer that allows you to have a website that they as a single page application and with less reloads and it's going to be way more evident as you have an application that's actually deployed right in the web and you want to see how it behaves much better than a traditional website right so yeah that's something I wanted to show you there it's very interesting to understand now let's go ahead and close this and well let's see how to H modify this page here so that we can go back to the home when we are done with saving the changes so what we want to do now is just go back into edit game so let me go ahead and open up this and close that so back into Explorer we're going to go into edit game. raser and what we want to do now is to use one of these built-in Services of Blazer that have been automatically registered for you just because well you're using Blazer components and one thing I wanted to show you there uh before moving on is this page over here so this is the documentation page for Blazer dependency injection we're going to be talking more in detail about the V injection in just a few minutes but uh in this page what I want to show you is that there are a few services that are very common and you can and that you want to use across your different components right and between them you have the HTTP client you have the I mean the HP client which is the one that you can use to talk to external services from your application and then you have the I from time which is the one that you can use to uh interact with JavaScript from your Blazer application in the client if you need to and we also have have this one here known as the navigation manager so this is a build-in component that is registered for you by the Placer framework and then well of course you can use to navigate from one component to the other okay and so if you go back into our application that component is actually registered when you go down into program CS remember in program CS we're doing a bunch of things but among them we are doing this line here which says add razor components so because we're doing this we have the ability to take advantage of that navigation manag right so how do we use it well let's just go back into editing. racer over here and what we can do is use this directive that is named as inject right inject and once again we're going to be talking about the B injection in just a few minutes because I want to show you one more thing but uh here you can just say well I want to use the navigation manager component and let's just name our local instance navigation manager right and um just by the by the fact that we're declaring it here Blazer is going to take care of creating an instance or making an instance available for us at run time and so we can just go ahead and use it without having to construct it explicitly so because of that what we can do now is just go all the way down into handle submit remember that this is the method that we use to add the game to the list and now after this line where we can say is navigation manager. navigate to then you can go into any other component into in your application in this case we just want to go to the root so I'm going to put that over there right so that should make it so that when we click the save button uh we want to go into the homepage uh now going back into our edit form over here just after the submit Buton what we probably want to do is also have some sort of cancel Buton right because what if the user doesn't want to save and just want to go back to home so because of that we're going to be adding a second butong over here and this one's actually going to be just an anchor a simple anchor just like this let's name this one cancel but let's make it so that it looks like a but right so it's going to be roll equals but and then the class well is also going to be a bu but this is going to be a bu secondary all right just so that it looks a little bit different than our primary all right and so with that done we should be able to well go back into to our homepage after the user clicks on save or clicks on cancel so let's see that we have your the net watch is up and running let's go back into the page over here and sure enough now we have our um cancel Buton here and our save bu should also be able to go back to the home so if I just click on cancel let's try cancel and I think I forgot something important about that cancel Buton here which is the uh the link where you should go so in fact yeah we should add here after the class we're going to say hre equals which is going to be just the root right so hre equals that so with that done let's go back now into our page and let's try the cancel Buton here yep sure enough it takes us back into the homepage and then well let's see if we can actually save a game right so let's go back into new game and I'm going to enter once again Super Mario 3 and then uh it's going to be kids and family let's say price $9.99 and then let's just keep the current date because why not and let's click on save to see what happens I click on Save and if this happens to you right which is very unexpected and it has happened to me in the past this is because really our net watch tooling and the hot reload of of net was not able to handle the fact that we have injected a brand new service into our page right so there's nothing wrong with the code and really all we have to do is just go back to vs code then let's open up our terminal let's go ahead and do contrl c control C to stop net watch and then we're just going to do net watch once again we starting the entire thing and so that's going to make it so that H net core and Blazer understands the brand new service that has been injected into our edit component so now we're going to go back into this page perhaps we can do back let's see if we can do back yeah so we are back here and now let's try saving this once again so hit on Save and shooting enough the error is gone right and so now that is great we went back to the homepage but of course one thing that you're noticing here is that in this H table here we don't see the new game so where is Super Mario 3 we still have the first or initial three games so something is going on here and that something is absolutely related to the dependency injection feature of a of BL s and apnet core that we are not taking advantage fully just in our application just yet so it is time to go and go back into slides and understand much better what is a Ben injection and how is it going to work in Blazer and in SPN net core to understand what the benis injection is let's start by looking at two classes my service and my logger my service uses the log this method of my logger to log messages to a file anytime my server service performs an important operation since my service uses some of the functionalities of my logger like the log this method we say that my logger is a dependency of my service now in order for my service to start using my logger it creates an instance of my logger in its Constructor and after that you can start calling the log this method at first clance it doesn't look like this presents any problems but consider what happens when the authors of my logger decide to slightly modify it so that a new my file writer object needs to be passed on this Constructor because that's where the output file is now defined the required changes look simple to implement but they reveal a few important problems my servies is tightly coupled to my logger in such a way that anytime my logger changes there's a need to also change my service as it happened here when the Constructor started requiring a my file writer instance my service needs to know how to construct and configure the my loger dependency like is the case here with the my file writer object which needs to be configured with an appropriate file to send the output logs this makes it hard to test my service since unit test won't be able to mock or stop my logger and output. log file will always be cre created which would slow down tests and this assuming that the test have access to a place to write files to fortunately there's a better way to do this using what is known as dependency injection let's go back to my service and it's my loger dependency my service is still uses the log this method but this time my logger is not explicitly constructed by my service instead my logger is passed in as a Constructor parameter my logger is injected into the my service Constructor this way my service doesn't need to know how to construct or configure the logger it just receives it and can start using it right away but if my service doesn't construct the logger who does it well ASN net core provides the I service provider which is what is known as the service container your application can register my logger and any other dependencies with I service provider during startup which is typically done in your program.cs file then later when a new HTTP request arrives and your web app needs an instance of my service the service container will notice its dependencies and it will go ahead and resolve construct and inject those dependencies into a new instance of my service via its Constructor this enables multiple benefits for your application to start with my service won't be affected by changes to its dependencies it doesn't matter how many times the Constructor of my logger changes there is no need to change my service moreover my service won't be creating instances of my logger so it doesn't need to know how to construct or configure it if your application uses minimal apis dependencies can also be injected as parameters to your minimal API end points finally dependency injection opens the door to using dependency inversion but what is dependenc inversion the dependenc inversion principle states that code should depend on abstractions as opposed to concrete implementations let's bring again our my service class and it's my logger dependency currently my service depends directly on my logger which allows it to write logs to an output file but let's say that now we are moving to the cloud and we need to start sending logs to some sort of cloud service for this we would like my service to start using a new Cloud logger class we could modify my service to receive and use a cloud logger instance instead of a my logger instance however what we can do instead is modify my service so that it depends on a new I logger interface instead which provides all the required login functionality then we can have both my logger and Cloud logger implement this new interface with this we are decoupling my service from the logger dependency allowing it to use my logger Cloud logger and any future logger implementations without ever having to modify my service the only thing that the different loggers need to do is to implement the interface that my service depends on in terms of the code this is how you would now inject the logger into my service so the main benefit of using the dependency inversion principle is that dependencies can be swapped out with without having to modify the class that uses them but also it is now much easier to test my surveys since the loger dependency can easily be mocked out or stopped and finally your code is now cleaner easier to modify and easier to reuse now before we start using theend injection in our code there is one more important concept to understand which is the service lifetime we now know the basics of dependency injection in ESP core we know know that on Star app your application will register the dependencies like my logger here and later when an HTTP request arrives I service provider will resolve construct and inject an instance of my logger into a new instance of your class my service in this example what is not clear is what happens when a new request comes in should I service provider create a brand new my logger instance for the new request or should it reuse it the same instance what if another service that also has a dependency on my logger needs to be created in response to a new request save my logger instance or new my logger instance the answer to this lies in the service lifetime which you configure when you register my logger with I service provider there are three available service lifetimes so let's take a look at each of them let's say that my logger is a very lightweight and stateless service so it's okay to create a new instance every single time any class needs it in that case you would register my logger with the at transient method when the first HTTP request arrives the I service provider as usual will resolve construct and inject a new instance of my logger into my service however when a new HTTP request arrives a service provider will construct and inject a brand new instance of my logger which has nothing to do with the first instance furthermore if there's any other service that participates in any of these HTTP requests and also has a dependency on my logger it will also receive a brand new instance of it so transing lifetime services are created each time they are requested from I service provider what if my logger is a class that keeps track of some sort of State that needs to be shared across multiple classes that participate in an HTTP request in that case you would register my logger with the adcode method here when an HTTP request arrives the I service provider will again resolve construct and inject a new instance of my logger into my service but if there's any other service that participates in that same HTTP request and that also has a dependency on my logger it will receive the exact same instance of this dependency however if a new HTTP request arrives the service container will create and inject a brand new instance of my logger instead totally unrelated to the previous instance so esope lifetime services are created once per HTTP request and reused within that request finally let's say that my logger is not cheap to instantiate and it keeps track of a state that should be shared with all classes that request it during the entire lifetime of your application then you would register my logger with the at singletone method as usual when an HTTP request arrives the I service provider will resolve construct and inject a new instance of my logger into my service and if there is any other service that participates in that same HTTP request and that also has a dependency on my logger it will receive the exact same instance of this dependency but furthermore if a new HTTP request arrives the service container will once again provide the same instance of my logger to any of the classes that requested and it will keep doing so until the application is shut down so singl tone lifetime services are created the first time they are requested and reused across the application lifetime now that you understand the dependency injection pattern and the different service lifetimes let's get back to the code and see how we can use these Concepts to reuse a single games client instance across our Blazer components with our new understanding of dependency injection and service lifetimes let's see if we can fix our Blazer front end so that each of the games that we create in the edit component actually become part of the list that we are showing in our home component so let's understand better what's going on currently so here we are in the home component what I'm going to do is go down into our code section where we are populating our games list right here right so here I'm going to just place a break point right there and let's do the same thing into edit game where well we actually already have a breakpoint at line 65 which is where we add a game right into the game scen so now let's go ahead and start a debugging session so I'm going to do contrl J uh is currently in a doed watch session I'm going to do contrl c to stop the net watch I'm going to close this and I'm going to do F5 to actually start the debugger right so debugger started and now let's go back into our front end and let's see what happens when I go to new game so let's go to new game and then let's enter something right so Super Mario 3 and then uh yeah we said kiss and family 999 and just the current so I click on Save and if you go into vs code Okay so of course here's where we're going to add that that game let's see if we can see inside games ciment so yeah notice that currently we have a list of three games over here right and so if I just step over this line step over now games client is going to have of course four elements right so 0 one two and three the four games so this looks fine and now we're going to navigate back into the home component right so I'm going to hit play and never mind this exception this is totally normal currently let me collapse this so you can see better this is a normal navigation exception that happens when you go from one page into another page and it's more evident when you're not doing a synchronous param so this is fine so I'm going to just hit continue and now we are back into home. rer right and in the on initialize because we are initializing the home component at this point however if I look into client here you're going to notice that games only has three elements right where is the fourth element why is it not there well the reason is is because notice that we are defining one instance of the games client right here in home. raser we are creating an instance and in Ed gain that raser we are declaring well another instance games client over here so the instances that we're using in each component are different and because of that we are never going to be able to actually reuse the instance that we need that has all the data from one component to the other so this is never going to work right so let me hit play and then well as expected if we go back here it is not going to be there so here is where we want to start using the dependency injection pattern so that we can reuse the same instance of that game client across the multiple components right and so we have already actually looked at how to use a b injection in a in one place already so let me actually stop this stop this and so if you remember we are doing it in edit game all the way here we are doing it for the navigation manager right like I said navigation manager is getting registered in program CS when we do add Razer component on so underneath this is adding services including that navigation manager so we can use it in edit game but now what we want to do is to register our own game client via depend injection right so how to do that so all we have to do and let's start with home. raser right so home. raser let's go all the way up and what we're going to do is just use the uh inject directive to say that we want to inject an instance of gains client over here let's just name it client in this case right and then if we go down here into the code section the change that we're going to make here is that we're no longer going to be creating an instance of K CLI so let's remove these lines right and instead of that we are going to be using the injected client so I'm going to be using client here and by the way a convention that I'm that I have seen so far for everything that that you inject is that it will follow this thing is Pascal case h casing for the injector object here that's what I name this client with a Capital C right so the client has been injected here and we are using it in this but of course we want to do the same thing now in edit game and let me actually just copy this injection into edit game and let's do it just under navigation manager right I think in this case we're going to have to name it actually games client right so games client and so this games client is the one that we want to use down here okay instead of creating the games client here we to remove that and when we do handle submit we're going to be using our new injected games ciment right so that allows us to inject the services into these components but we also have to register the services right it's not enough to just inject them somehow these have to be registered so that the service container I service provider knows about them so let's go into program Cs and just like we're doing this line here to add AR rasor components we're going to be using the net a apis to register our games client so for that all you have to do really is just say Builder that services and then you have to choose what is going to be the the lifetime scope that you want to use for this specific type now since this is just in memory and since we want to use it across the entire application right uh we're going to just go for a single tone right meaning that the same instance is going to be available just one instance across the entire lifetime of the application so we're going to say add Singleton and then games client okay the type of scope that you use here as you know by now is going to depend on what you want to do what kind of object you want to register here uh but in this case the singl tone is going to go work great all right so with that in place well let's go ahead and uh let's see if we still have those break points so let's see do we have the break point yes so we have the breakpoint here and we have the P there so well let's try this again so let's start at the buing session all right let's go back here and let's create a new game again Super Mario three kids and family 9.99 let's say 1995 and then let's hit on Save okay and notice that this time and I'm going to close this this time we have an instance of games client here is still with the count three right count three but notice that we have not created it explicitly right it was registered in program CS when the application started and then the service container is taking care of constructing and making that instance available for us in edit G when we have requested right so as we go into the next line I'm going to just step over here step over games CL now have four right kind count of four let me see this once again count of four makes sense and now we're going to navigate back to the home components so I'll click on continue so again this exception is expected that's fine and then we're going back into the home component and let's inspect this client now so this client actually has count of four right count of four because it is exact same instance that we use in the other component it is a singl tone so it Lees across the lifetime of the entire application regardless of what what component you are of course that as long as the application is alive okay so if we just hit continue now and we go back into our browser we're going to notice that our brand new game is now showing up right here okay so that is how you can take advantage of the dependency injection uh pattern in your Blazer applications and really in every as net C application it's a key component that is used all over the place in s net C and that you should take advantage of it all over the place too and so well just like we did that with our games client we also probably want to do the same thing with our generous client right we should follow the same pattern so let's go back into here let me stop our Dev bling going to go into edit game now and let's go ahead and also inject our generous generous client like this into edit game and then let's go down here today we are declaring a generous client here we're going to remove that and now here where we are initializing the component we're going to be using that generous now we also using an instance of generous client of course over here in our games client right so in games client you can see that we are currently doing this right to get the to get the collection of generous in G client uh we could fix this I mean we could inject an instance of jous client into G client but I don't think it's that relevant really because like I said eventually we're going to modify this entire client so that all the data really comes from the back end so we're not going to worry about this really it doesn't make any difference so let's just leave that as is and let's see how things are working with our injected generous client in edit game so at this point I'm just going to do net watch as usual so let me delete this and then um let's do doet watch in our game store. front end directory all right application started and then of course if I refresh this notice that the game is gone which makes sense because it is just an in memory Leist right so there's nothing holding in the back end for with that list but if we say new game we are getting this which makes total sense because we forgot to register Jenner's client in pram CS right so let's go back here and let's go into pram Cs and let's let do exactly the same thing that we did with games client let's copy this down here it's going to say generous client right generous client and then we may need to restart our the netwatch uh session here because like I said it can get a little bit confused when we you start playing with injected services so let me start the netwatch once again all right so let's go back into our browser over here so back to the home now let's go to new game notice that this is working properly we can see all the generes here right and we do Super Mario rose 3 okay kids and family 999 uh any date save and notice that the game has been so everything is working as all right so that's working just fine but well there's one one other thing that we should consider when we go into our edit H component here and this the fact that we're not currently validating what happens if the user just decides to have invalid data here so if you just hit save here so this is going to actually fail because we are not entering any values for the name we have not selected a generate and a bunch of things that makes no sense so next we're going to see how to add proper client side validation into our edit form so if you go back into Vis Studio code over here and let me close this for a moment uh if you go back into edit game. rer you'll remember that the moment when we actually add our brand new game into our collection of games is Right Here Right In handles on bit when we use the games client to add the game to the collection and of course we could come here and start checking what are the values for the different properties of this game over here but in Blazer there's a better way to do this and it's a very simple way actually to do this which is by using what is known as data annotations and for that what we're going to do is just open up our Explorer and let's head back into our game details model okay and so the idea of data annotations is that you can annotate the different properties of your model with the specific rules that are relevant for that property for instance in the case of the name we probably want to make sure that it is always entered right so it is a required property so in that case what you can do is just add a new line on top of it and just add the following attribute required that's all you need to add now this attribute in the different name space so I'm going to do cont dot here so control Dot and then I'll do using system. component model. data annotations okay so that new name space has been imported at the top as you can see and so from here on anywhere you bind this model in into any form um Blazer is going to make sure that the user enters a value for the name right and probably we want to do the same thing for our gener ID right we want a gener Associated so I'm going to paste that over here now there are multiple possible data annotations that you can use in your Blazer applications uh for instance another thing that we could require is that the name should have some specific a length rest string length and so for that what you can do is use the string length data notation so string length and let's say that the name should be no more than perhaps 50 characters right so no more than that and if there's more enter into the field is not going to be a valid form and lastly let's do something about our price so the price let's say that our our rules says that we're never going to really have a video game that cost more than $100 right and so we want to make sure that the users do not enter a number greater than that so for that we can use the range attribute so what we can do here is to enter what is going to be the range that is valid or allowed for this property in this case of course we don't want negative numbers either or even a zero so there's not going to be free games so the range is going to be from one and into 100 right so that defines what is going to be the valid range for the price all right so that is what you have to do in terms of your model and then well let's head back into Ed game. RoR so there are a couple of things that we also have to do in the form itself not going going to remove this break point we don't need anymore so let's go up into the form and let's locate our edit form which is right here so in the form you have to do a couple of things the first thing is that you have to let the form know know that it has to perform this validation when the user is trying to submit the form into the server and to do that we have to change this H member here that says onsubmit this had to be changed into on unvalid submit let me do the right casing unvalid submit okay so this here is going to make sure that handle submit the the handle submit method that is in our our component is only going to be invoked if all of the data in the form is valid however for these two actually work it has to be combined oh has to be combined with another element here which I'm going to add right here which is known as the data annotations validator all right so you have to add both the the DAT notation validator and you have to use on valid submit for that validation logic to kiky all right now let's see how we're doing with watch okay it's good so let's go now into the form and let's see if this is actually working right so here we're back in the form and now let's try to go ahead and save this form once again now that we have the validations in place so I'm going to click on Save and as you can see now the form is highlighting all of these fields in red because they don't have any valid values right and so if we do want to go ahead and submit something we do have to start entering something let's say my my game and if I click on Save again notice that the red is gone from from here right meaning that this is now a valid a valid field all right now one more thing that we may want to do here is to actually show some sort of a text that describes what is wrong H with the field in the case that well we are not entering valid data right so what is wrong with this field what is wrong with the gener what is wrong with the price and so for that we can do the following so let's go back into the form over here and what we're going to do in this case just after input text for the case of the name we're going to enter a validation message okay and for this validation message you have to specify for which field this validation message is for in this case we're going to do we going to say four here you want to use you want to use a l expression like this and this is going to be for game. name okay so that specifies that we are going to have a validation message that's going to trigger if the name is not passing the the data notation the rules that we Define for the for the name now I'm going to copy this one because we're going to do the same thing this case for the generate ID and we're going to put that just after the input select here but you have to change this into game. generated and same thing for the price okay just after our input number I'm going to put it over here game. price all right now in this case uh Blazer is alerting us that yeah this change was just too much so do we want to restart the app I'm going to say a for always so that's that's fine okay so that app is going to restart now all right so restarted and so now I'm going to go back into our form okay and perhaps let's see if we can yeah it's refreshed and so now if I try to go ahead and just save notice that uh all of the actual error messages start showing up right and also notice that we did not have to write the text for these messages right they just they just were inferred based on the validations that were set for the different fields so the name field is required generate ID field is required and the field price uh mostly between one and 100 okay so yeah that is looking great and uh one more thing to notice here is that perhaps this message that we have here uh is not it's not the best message because it talks about a generate ID right but but for the user like what is a generate ID right so we're really trying to set the gener here and pick one of these values but gener ID does not really make more much sense for the user so what we can do is just to customize this message a little bit so that it makes more sense so for that really all we have to do is if you just go back into our game details is that here for the required H attribute in gener ID we're going to add an error message so we're going to say the error message has to be what we type in here so this is going to be gener J field is required okay just that simple all right and so let's go back to the browser and then if we now try to save this yeah looks like it is not just not working so this has to beet watch it's not catching up with the changes so I'm going to do stop and restart donet watch all right and so let's refresh the page and do continue and so sure enough now the message is correct right so the gener field is required that's what I was saying that donet watch sometimes may not work as expected so so keep an eye on that uh so yeah so now we have the right a message over there and the last thing that we may want to add here is some some some sort of summary of all of the validation errors in the form because this form is simple right it has just four four inputs uh but what if you have 20 or 30 or a lot of inputs right so you may want to have a central place in this form to tell the user everything that's not working proper and for that what we can do is use the H the validation summary element so let's go back into the form over here and let's go into edit game and we're going to put this just under data annotations validator we can put our validation summary element okay and with that in place let's see if we try now to save this notice that besides the individual H texts the alerts for each field now we also have this nice summary at the top that clearly tell us about everything that is going on and this is just wrong with this with this form all right and so and then well just to confirm that everything is working properly now what we can do is actually to enter the right H values right so let's say Super Mario Mario 3 okay get some family 999 and then uh we was going to do 1985 right why not and so I'm going to hit save now and notice that the game was successfully added so the submission only worked at the point where all of the data was valid okay so with that I think we have our creation or game creation experience in good shape and what we going to look at next is on how we can enable editing one of these existing games also in the same place or form the first thing that we need to figure out is how to open up our editing form with some data already populated right for the specified game and the first step towards that is going to be to work once again in our game client so we can retrieve the details of one specific game so let's go back into vs code and at this time we're going to work with our games client so let me close a few other tabs so so that this is not so much crowded right so games client what I want to do is to add a brand new method here that based on a game ID it can return the game details for that game ID all right so we're going to go all the way to the end and let's define this method as public game details get game in ID okay so to find the game itself is it should be Prett straightforward so all we have to do is just say bar game equals games we can use the find method in the collection find and for find we're going to say that we won the game where game. ID equals the ID that was passed in right now the next thing that we're going to need is the gener that corresponds to this game because remember that this one here is going to be a game summary object and the game summary does not have the generate ID and we do need to return the generate ID as part of the of the game details back to the to the caller so for that what we're going to do is the following so gener is gener that in this case we're going to be using single and we're going to say that we want the gener that matches the name of the gener of the found game right so it's going to be string that equals we're going to use equals because it is a easier to do an case insensitive comparison by using the equals method here so generate. name is going to be compared to game. gener and we also want to specify here our string comparison ordinal ignore case all right and perhaps I I should do this in a next slide so let me do this so we can see better there okay notice that um by doing orinal ignore case we're making sure that we can compare the string that is currently in the gener in the name with the string that comes with the gener in the in the game in the found game without regardless of the the casing that that that the string has we have to search things by string because the string is what we have currently in the game also we are not using fine here in this case because generous is a simple a simple array so it's array of generes as opposed to games which is a proper list right so for the array really what we want to do in this case we could use single we could use first or first or default but I mean we are pretty much sure that there has to be a gener that matches this a string in this uh in this array so that's why we're saying single if we cannot find it this is going to draw an exception of course which should really never happen now there is a warning here right it says here the difference the reference of a possibly null reference and that is because find is returning as you can see find returns a game summary nullable right perhaps I can just if you want to just turn your vars into a the current the actual type you can always just use the light bulb and use the explicit type so now you realize that game is really a game summary nullable right and because it is nullable well we have this warning down here saying hey it could be null so you may run into an exception there so what we're going to do he just to make sure that we never actually end up with a N in there so what we're going to do is just say argument n exception Trove is null and that's going to be our game all right so if it ever if it ever is null which should not really happen but if it is it's to Inception otherwise uh game is always going to have a value down here and you see that warning is gone all right and so with the validations in place we can go ahead now and actually return what we need to return which is the game details so we're going to go into to say return new game details all right and so very straightforward ID equals game that ID name equals game name now for the gener ID we can now use our found generate object here ID and I remember that this this one is a string so we have to do to a string over here price is the game. price and release date is game release date okay and yeah that's pretty much what we have to do for this method and I mean yeah I mean be would me I know that this this logic is Is Not Great uh to have to do this kind of search by string here uh but uh sure enough we are going to be switching away from this logic uh pretty soon as we move into talking to the back end but for now this is going to be good enough for us to refine what we want to do in our razor components which is the point of of this part of the course okay so our game client is ready and now we have to switch our attention into edit game. raser but we want to make a few changes to allow for editing our games the first thing is that uh in this form now we have to introduce the ability to be able to receive parameters right because we're going to come from the home component into this edit K component but we need to tell the component what is the ID of the game that we want to display by default here so for that we're going to go all the way to the top and remember that we have this page directive at the top right I'm going to separate it perhaps like that so the thing is that your razor components your routable razor components like this one can have more than one route uh if needed and in this case what we want to do is to add a second route that actually has the game ID so all you have to do really is say I'm going to actually copy the route from the top and I'm going to modify it so that we also receive the ID but not just ID what we also want to do is to make sure that uh this is an integer right because remember that all our IDs are integer in this application so what we can do is just make sure that it is always an in by speci find that it has to be an INT like this okay so that's a way to prevent the client or the browser to send from sending us anything that is not going to be an integer that's great now if you're going to be receiving the ID like like this where we have to Capt it somewhere right so that is why we're going to go down into our code section and perhaps at the top here of the code section we're going to be adding our int ID so I'm going to just say public int it's going to be the ID I'm going to be a going to have a getter and a Setter now as as everything else in these razor components uh it may be null when the component is just getting created but eventually is going to receive the value for the ID right from the parameter now now to account for that we're going to make this component I mean it has to be nullable right so that initially it can be created as a null object but then the parameter is going to populate and for that to happen what you have to do is to specify that this one here is a parameter by specifying the the parameter attribute right there okay so first thing is going to happen when the component gets created is that the parameter is going to be populated into the into the now since we are doing this we're going to have to change a little bit our Logic on how we uh create the default instance of of this game that we have here because right now as you can see it always creates a an empty game but now we're going to have cases where the we will need an empty game some other cases we need to to have a game that's populated from the data that we already have because of that we are not going to have this logic anymore here and instead we're going to be introducing a brand new method here uh which is part also of the live cycle of the Blazer components and perhaps before initialize it we are going to go ahead here and Define our protected overwrite point on parameters set okay let me align this bit better like that so here what we're going to do is to introduce some new logic that determines what to do depending on if we have an ID or not so we're going to do this if ID is not null okay it means that we have to go ahead and uh retrieve the game from our games client so we can do is just say game equals games client. getet game the brand new method we just create so I did that value and then well otherwise otherwise that is when we have to go ahead and create the brand new instance of our of our so we're going to have to say game equals new and here where we have to construct our object now that construction I think we already have it over here yeah so let me just copy this I'm going to copy this from there over here here okay and so this is going to be the new logic to decide how to instantiate our game okay now uh since we now have this logic there is no reason to also instantiate the game over here in Supply parameter from form so we're going to do is to change this so that now our game details is going to be a game details uh nullable no game details because it's going to initialize as null and then it's going to be populated in on parameters set and then uh we're going to remove everything else from here now because game can can now be null we're going to get a few warnings across this file right so let's take a look at this one here that says hey a game could be null so you may have a problem here so as we have done before we're going to just do a quick check argument n exception drw with null and then we just put the game here here okay so that's going to make sure that we can never get to line 87 if the game is so that's a quick check over there now one more thing that we have to check here if we go all the way up here right is that well when we're trying to use the game now in the form now the game could be Nel too so we're going to do is to go up here into our uh if and say that we don't want to just check for jous is null but also or game is null in both cases we're going to be just displaying the loading right and otherwise we proceed to render the format notice that there are no more warnings over here now one last thing that we need to account for over here which is not very obvious is on parameter set and it is that we need to know if we are on a point where the user has already submitted the form so that we can go ahead and uh and save the game and the thing is that on parameter set is going to be invoked both the very first time that you go into the form so the user starts entering the data but also it's going to be invoked when the user sends the data or submits the data uh into the server so if we keep the logic as it is right now and the user submits the game we're going to right away immediately just destroy what the user entered by either doing this logic here or this logic here right this method is going to be invoked before we get to handle submit right so that logic is not going to work and is something that is not very obvious I know uh but it's actually very easy to control we're going to say is that well you know if game is not null right so if the game is not null it means that uh it means that it was posted right posted by the user because we're using remember Supply parameter from form so it came from the form so the game is not null so if it is not null it means that there is no need to load or to prepare a new instance of the game we just have to let it get submitted so we're just going to going to say here return there's nothing else to do here okay so that will let the logic continue into our handle submit and the game is going to be added to the collection all right and well with that in place I think we're ready to test this out uh we have a couple well one more change to do but let's test this out and see how it goes and so yeah so hot reload is asking us to restart the application so I'm going to say a so yeah go ahead and restart it all right let's go back to our browser over here perhaps I'm going to refresh this yeah so we Fresh So now if I go to new game so uh yeah it works as expected so it's just an empty form but what I can do now is to actually specify that I want to load one specific game so if you go click canel remember that we have games with ID one two and three right so I can go to my edit game form and now say slash perhaps one right slash one and notice that immediately it loads all of the details for our first game right Street Fighter here's the generate the price and even the release date everything is loaded because we're using the new route that we specified for our form and furthermore I could go ahead and change this ID let's say ID 2 and now we're looking at a different with all the details Lo so yeah so that logic is working great and well one last thing that we may want to do here is to H we'll do something about the form title right because notice that it says new game over here it just says new game even when we're editing an existing so what can we do so that perhaps we can show here that we are editing some specific game as opposed to say new game so that's actually very straightforward to do by combining C with a little bit of HTML so let's go back into our form over here let's collapse this and what we can do is to introduce a brand new variable over here perhaps after the definition of generous in the code section we're going to Define our private string title okay and it that's going to be initialized with string. empty okay it's just going to be an empty title what we're going to do is to use our logic in on parameter set we're going to expand this logic a little bit so that in the case where we are able to find the game we're going to say we're going to say that the title is going to be perhaps we're we're going to use a little bit of string interpolation here it's going to say edit game. name right so it says edit Street Fighter 2 or edit Final Fantasy 14 something like that if the game is known otherwise we're going to go into the other section we're going to say that that title should be just set a new line title should be perhaps new game all right so now this is a a dynamic variable that will change according to what we have in the form and so finally we have to take advantage of this variable somewhere in the HTML right and that sumary is just going to be up here for our page title and our H3 we just going to go ahead and replace this with ADD title right add title and then add title over here so now and let me just check quick on hot reloads working great so if you go back into our form you're going to notice that I mean right away the title changed right so now it says editing Final Fantasy 14 so because we're loading that game if I change game back to perhaps game one now it says well editing Street Fighter 2 right which is great if I say cancel and me say new game now it once again it says new game so yeah all the logic is working as spe so yeah so this is working great and then of course what we have to do next is to figure out where how we're going to be submitting that those changes back to the server because if you just hit cancel and we go let's go let's say that we go actually to game number one and we say straight Fighter 2 if we just go ahead and save this right now what it's going to do is to create a brand new a brand new row over here as you can see it creates a new row when we already had Street Fighter so we need to introduce some sort of Logic for a for submitting the changes to an existing game so for this we're going to have to go back into our uh games client over here and we're going to be introducing a brand new method that is going to allow us to update an existing but before doing that let's go ahead and do a couple of refactorings because we are going to end up reusing some of the code that we have already here so perh we can extract some of that code into helper functions so we don't end upw writing the same code over and over again so if we go back into add game over here we have here this logic that allows us to really get a a generate a generate object based on the generate ID so I want to do is to extract this logic into a new method and for that I'm going to be using this light bul over here and I'm going to select the the function that at the close to the end that says extract method so I'm going to click on that and as you can see that immediately uh took all that code into this new method which by the way if you go all the way down here it's going to be right here okay so the first thing I'm going to do here is to well rename this method into something that makes more sense so I'm going to hit the F2 key so F2 to rename the method into um get gener by ID okay notice that that is going to rename the method right here and also it's going to rename any of the calls to this method across entire file okay so it's now name get generate by ID now we don't need to receive the entire game details object here really all we need is the ID which is going to be a string in this case and in fact it could be a Nel string so I'm going to use just receive an ID as a string notable there and then we're going to keep this check but the check is going to be just on the ID and then lastly we're just going to go ahead and return okay we're going to return in that Parts on that ID okay so that is going to be our final get JN by ID method so if you go back into at game we can now invoke get gener ID by just saying game. generate ID now let's uh well that's the first thing and the next thing is H well to start with let's just move this private method all the way to the end because uh it is a good convention to keep all of your helper methods private methods all the way to the end because they're not really important they're not relevant what really matters is the public methods so just keep all those at the top and what I want to do now is in get game we want to have a similar logic but for this couple of lines here that what they are doing is to find a game or a game summary based on the game ID right so once again we're going to use the light bul here to extract the method okay so let's go to the new method over here and right away uh yeah it is at the end and let's go ahead and hit F2 this is going to be named get game summary by ID okay and I think the logic is is pretty much as it is right now because it is going to be able to return the game it's going to check that the game is not n and then it's going to be returning us back that game so now if we go up into get game oh one thing that we may want to check here yeah so it is not returning AEL so that's great so get somebody by ID it is going to be returning just a standard game object of there a and with those two new helper functions we can now move forward to the creation of the brand new method to update an existing so let's name this new method public void update update game and this is going to be receiving our game details that's going to come from our edit game component razor component uh updated updated game okay so let's focus on this new method so in order to update the game the first thing that we're going to need is the gener because we're going to need the the name of the gener to associate to our existing game summary so let's do bar generate it's going to be get generate by ID right we are reusing our helper function here with updated updated game. gener ID and next what we want to do is to retrieve that existing game summary object so that we can update its values so game summary existing game is going to be get game summary by ID our new helper method with updated game. ID and with those two in place we can now proceed to update the properties right so now we're going to say existing game. name equals updated game. name and same thing really for the other properties right so existing game. generate is this case when this case is generate name right and then existing game. price is Dame that price finally existing game that releas date is updated game. released okay and yeah that's pretty much all we have to do in our games client to have this new logic to update an existing so now it is time to go back to our edit game component and add the logic that is needed to use this new uh method in games client so I want to do is to go into the code section into our handle submit method over here and we want to do the following so we're going going to open up a section here and we're going to say that well if the ID is null it means that well we're trying to create a brand new game right so in that case we're going to grab this logic that we have already we're going to put it right here for the case where the ID is otherwise otherwise here is where we have to update an existing game so we're going to say games client. update game with the game that has been passed now one thing to keep in mind is that this game object that we are passing in over here does not yet have an ID right because this is an a game that a game object that has been posted right by posted by the user remember that we have here submit parameter from form right it has been posted by the user into the server and but when they post the game they don't post the ID they post the name the the generate the price the release date but there's nowhere else in the form that that we have the ID right so it's not post it so we have to make sure that we actually populate the ID manually here um or I guess in this piece of code before we actually update it in our list so for that all we have to do is just say well game. ID is going to be id. value okay so that should be all the logic that we need to enable this so let's go ahead and see how H reload is doing so looking good let's go back into our game catalog and let's see if we refresh this yeah I don't like to have this guy repeated there so let's AC restart the application in this case right so restart application so that the data is cleared so don't that watch once again back here I'm going to refresh okay so we are fresh now and so let's say that we actually want to modify St Fighter 2 now so I'm going to go into edit game one edit G one and so now we're going to say that this is a stct Fighter 2 too okay and that the price is going to be 9.99 or 9.97 let's say and uh yeah that's how it is going to hit save and well this time it actually worked right so Street Fighter to Turbo and then the price is 9.97 there's no repetition right the existing game has been modified so yeah so that is working great awesome and uh of course the next thing that we want to do here is to will somehow introduce some sort of UI into this table so that we don't have to be playing with the browser address bar all the time right just to go and edit it again so next we're going to see how to add an edit boot into this table here so you can jump into editing a specific now that Buton is going to leave over here in this last column right so we're going to want to have some way to display a bom for each of these rows and just to make it look nicer we're not going to be using just a standard botom we want to use kind of an icon to represent the act of edit so how do we introduce an icon into this table here what we can do is to actually extend the our use of bootstrap to also use bootstrap icons right so if you go back into the bootstrap page over here you're going to notice that there is actually a section for icons so bootstrap also provides you a series of icons that you can use uh to represent different actions in your application right as you can see it's there's a very long list of icons over here that you can choose and you can easily just incorporate into your application now how do we start using these icons if we go almost to the top uh if you just click on this install link over there so click install you're going to go into this section and as you can see there are a few ways to install the butons into your application in my case I'm just going to using the CDN to keep things simple uh that's going to provide me a link that's going to uh immediately make the bons available to my application so I'm just going to click copy to clipboard over here and I'm going to go back into our vs code instance so where do you think we're going to be adding this style sheet for the botoms uh well in the same place where we have been putting all of these CSS JavaScript and stuff like that that will be in our app. RoR file over here okay so we scroll a little bit up remember that here's where we Define the main layout for the HTML for our page right and so we have the import for two style sheets here we Al also have the import for bootstrap over here and so right here under this is where we're going to just go ahead and paste uh this new style sheet that includes all of those bootstrap icons okay and so as you can see it's just a bunch of CSS right that that we can take advantage of in our application and now that we have that we can just go back into edit game Sorry we can go back into our home component actually home component like that and let me close this other one so we don't get confused and we want to go into the location where we render our rows right so it's going to be over here here's our for each and of course here is the section that we have prepared uh to introduce our H Buton actions and we're going to start by adding a new div here okay it's going to be a div and inside this div we're going to add just an anchor okay it's going to be an anchor that we want to style right so let's go ahead and do so do class and then U we are going to make it look like a bu right so like we have done so far with other butons in bootstrap and perhaps since we are here we may want to also add a little bit of spacing so with me2 a little bit of spacing on the right side of the wooden because we're going to have another wood coming on later on for deletion right so might as well just add that spacing right now now the next thing is that we're going to make this Anor act or or show as a rud so let's do roll equals Ron and uh inside this Buton is where we want to use our icon right now what icon we want to use here so if you go back into bootstrap uh the icon that I like to use for this is actually a pencil right so let me see let's go up a little bit let me see if we have some sort of search here okay so let me type pencil okay as you can see there are three variations of pencil that we could use here so let's say we want to use this one the first one pencil over here okay so how do we use it well it is actually right here so you see this is the code that you have to add to render your pencil so I'm just going to copy this and back to BS code I'm going to paste that over here so if I now go back into our page and let me just check on yeah reload let's go back into our page and perhaps we refresh this you're going to see that well the the well the Buton is right there as you can see we have now an edit Buton right there and we didn't have to do much to uh make it look like like a nice icon for editing okay so yeah so that is great uh but of course this Buon is not doing anything right now right so we need to tell the budon where is that we want to go when we click on The Bu so for that let's go back into vs code and what we want to do is to provide the location where we want to navigate and usually for an anchor what you would do is just do an H ref right so it's going to be an H ref and here is where we're going to put the location however that location is going to be a little bit Dynamic right we know that we have to go into slash edit game and Slash the ID of the game but for that we're going to have to calculate what is going to be that URL right it's not static and it's going to depend on the game because of that I think one nice way to do this is to actually Define a function in our code section I'm going to remove this break point in our code section I'm going to define a function that's going to return the URL that we want to navigate into okay so let's go ahead and Define a private static and static because we're not going to be using any instance variable in this in this function going to be a string let's name it game URL okay in ID all right and so all we're going to do here is just say that oh in fact we don't need this uh yeah this Braes where we can do is just point to and this is going to use string interpolation so we're going to point into slash edit game and then slash ID right and so now that we have this function what we can do is go back into that location where we want to define the H ref at the right side and we're going to invoke the function by using ad so we switch into C right so game URL and then we're going to be using our game variable and do game. ID yep and yeah just by doing that we have modified this this Buton so that it has a link to the corresponding game in in in our table so let's go back to our page here and as you can see notice the notice the address at the lower side right so notice the address over here so by by just selecting one of these Boons that address is now changing because the budon is now clickable so if I click on the second Buton here notice that we browse immediately into the Final Fantasy 14 click on cancel and I click on the last one now we are in FIFA 2T and so and so right so just by doing that we have enabled a very nice experience that allows us to navigate into any of these a so yeah that completes our editing experience and of course what comes next is that we want to figure out a way to also allow our users to delete one of these games so next we're going to see how to introduce this delete experience and what we want to do is to once again add one more bong over here in our actions column that is going to allow us to well delete the game that the user chooses so the idea is that the user is going to click on the Buton and we're going to have some sort of dialogue show up over here that is going to say hey do you actually want to delete this game yes or no right and that is what is going to allow us to delete the game and so as with everything else we're going to be developing a brand new component that is going to be the one that's going to represent this delete dial so let's go back into Vis Studio code and what we're going to do is just well open up our Explorer let's go into solution Explorer and perhaps let's close all the tabs here and let's go into our component section and I'm going to right click on pages I'm going to say add new file I'm going to add razor component and let's name this [Music] one delete game all right so like I said this component is going to be H pretty much a dialogue a pop-up dialogue but how do we represent these dialoges on bootstrap and so just that we don't have to reinvent the wheel we're going to just go back into bootstrap the bootstrap documentation right and in on the left side if you keep looking you're going to find this model dialogue section and this is under the component section you're going to find the model so the model is a building element in bootstrap and so really all you have to do is to learn how to make it work and just combine it with your Blazer application so what I'm going to do is just scroll down into this section that says live demo and I'm going to copy I mean you can actually see a demo of this so you can see click on the Buton and then you get this model here so this is exactly experience that we want to show uh in our in our application right and so so to start we're going to copy this section here that represents the model right so let's just copy this and let's go back into vs code and we're going to just replace this delete game with the code that we just got right we're going to leave the code section down there but the rest is replaced by by but by just copy okay so we are going to keep most of this dialog and you are going to notice that we have a few sections here right so we have uh so here's the model dialogue we have the content then we have a header this is a header section then we have a body section and then we have a fter now for our model we since all it's going to say is that well do you want to delete a game one 12 three and then just a couple of butons we don't really need a body for that we can just use the title and the footer so I'm going to get rid of the body we're not going to using the body now the key thing about this model dialogue is that we don't just need one of these we're going to need one of these dialoges for each of the games that we have in our game list right and each of these dialoges have to have a unique identifier so of course the identifier is going to be tied to the game that we want to delete so because of that we're going to add a little bit of code here to have a good way to get an ID for the current model so the first thing that we're going to need of course is to well know what is the game to delete so and for that we're going to be using a parameter just like we did before so we're going to add our public and this is going to be a game summary going to be nullable let's name it just game and we're going to add the getter and the setter all right and this is going to be our parameter right so whoever invok this component has to pass in the actual game right and the next thing we're going to do is to in ruce a function that based on the pass in game is going to provide the ID for the for the model that we have just open so let's scroll down a little bit and let's go ahead and declare our public static string get model ID so we're going to pass in the game the game summary instance which is going to be nullable all right and then we are passing in actually a parameter here as opposed to just using H the the the the one instance that got assigned into the parameter because you're going to see that later we have to use this function this public function we're going to be using it directly from another component right so we need this to be a public function that's going to be reused across two components now uh what do we do here well first thing let's just go ahead and uh make sure that I mean we check that the game is an instance it is not null so throw if null game right just to avoid any nasty warnings and then what we're going to do is as follow we're going to return and this is going to be string interpolation we're going to do let's name it delete Model Dash and then we're going to use the game ID so game. ID so this is going to represent the ID of the model that we are showing on screen so now let's go up all the way to the top and notice that we have this ID section at the top there so with our new function what we're going to do is just replace this example model by switching to C here and we're going to just invoke our get model ID function and we're going to be passing in our game instance so in the case of this delete game component this game instance is the one that comes from the parameter look at that okay and so when the component is getting rendered or it's getting actually created the parameter is going to come in the game is going to be set and it's going to be set for our model and then we're going to be sending over that game into get model ID and get model ID is going to provide us with the delete Model okay so that's great now next uh we probably want to have some text perhaps over here where it says model title perhaps we want to show there what is the game that we're trying to delete right just so that the user can confirm this so for that let's go down once again into our code section and let's define our private string title it's going to start as a string that empty and we are going to be once again overwriting our on set method so protected override void on parameter set and well we're going to say that title is going to be string interpolation delete game. name and this is going to be a question right so question mark just like that okay so that way we have a quick way of of showing what is the game that needs to be deleted so now let's go ahead and use that new title variable well where it says model title we're just going to say title all right so that's most of what we need to code here uh let's do a little bit more so let's change these butons over here so this is the close Buton so let's just rename this one since this is the secondary but let's let's actually call this cancel so that the user cancels I don't want to delete it and then the other one is going to be our actual delete now one thing that we're missing here in this delete Buton is this attribute in data B dismiss uh because this is the attribute that is understood by bootstrap that will allow the model to get dismissed or to disappear after the user clicks on the Buton okay so let's let's make sure that we also add that attribute over there so that clicking any of the butons is going to get the model to just disappear all right so I think that's all we need for now in our D component now how do we use these components from our other component our home component so let's go back into home. raser here we are home that R I'm going to put it on the left side and what we want to do is just well we are already in this here's the section where we are rendering each game remember this is all for each we have the columns we have our first buen over here here's our first buen and what we want to do of course is to add a second Buton over here so let's go ahead and Define define the the uh the Buton here as an actual Buton this going to be an actual Buton here let's give it the the class is going to be BTN uh in this case we're going to be using BTN uh danger so BTN danger is for a kind of a a red Buton right which means danger and then there are two important attributes here that we want to use that bootstrap understands and that are specifically for the purposes of showing a model the first one is data BS toggle right which is going to make it so at this Buon is able to toggle a a model dialogue and then there's another one and I'm going to scroll a little bit to right it is Data BS Target right and perhaps I'm going to uh send these things to the next line so we can see better data vs toggle and data vs Target now we're going to see what do we need to put in databas Target in a moment but for now let me actually complete the definition of this but by actually adding well the the but that we want to represent with an icon now what icon we're going to use here well let's just go back to bootstrap right and so remember that we have this bootstrap page where we can um a search for icons so let me just go back I think yeah so this is again our bootstrap icons page we were looking for a pencil before let's see if we can look for perhaps an X to represent Aion um and yeah I mean yeah this is going to show a lot of icons and perhaps the one I want to use is this one here xlg and a large x okay so let me go ahead and just copy this one and let's go back to vs code and inside the botom I'm going to just paste that that code to represent the the X to delete now uh the actual act of showing the dialogue is going to be triggered by this bootstrap H attribute here that that says data BS Target and here is going to pass we need to pass in the ID of the model that needs to be shown right which is even going to be the model specifically for for this game to delete now to make that work we're going to have to do two things the first thing is that we need to Nest one instance of our delete game component on each of the rows right and so to do that all we have to do really is I'm going to just scroll up a little bit is that perhaps this deep over here uh we're going to just declare or Nest our delete game component right so we're going to just say delete game okay so that's the our Ned delete game component and as we know delete game receives a parameter which is the game so we're going to just pass in for the game parameter we're going to pass in at game okay so this should make it so that when we render each of our rows for each game we're also going to be rendering the HTML for the delete game dialogue now don't worry because the dialogue by default is not going to show right it's going to be kind of hidden uh in the in the page it is going to be there but the user is not going to be able to see it so what we want to do now is to introduce the logic to actually make the specific dialogue show up when the user makes a click and for that like I said we have to fill in the the ID in data BS Target so since we already have a function over here this get model ID function in a delete game what we're going to do is to reuse that function from another small function we're going to be creating over here so let me go just go down here and at the very end of our home. rasor in the code section we're going to introducing the following functions so rivate string get delete Model ID it's going to receive the game summary game and here let me go down here we're going to just return and this going to be a string interpolation um remember that in HTML the way that you locate Elements by ID is by using a pound so we're going to be using a pound Here and Now inside this kraes we need to figure out what is the ID and to do that remember that we have this static function it is a static so we don't need any instance of the delete game component to invoke this function so what we can do is just say well delete game dot get model ID and of course we want to pass in the game object and now that we have this handy function we can go back into our uh HTML and right here in datab BS Target we're going to say that we're going to switch to C and say get delete Model ID for the current game all right so once again for each of our rows we expect to have rendered one instance of our delete game component with all of the HTML all of these HTML should show up for our our um for each row uh but it is not going to show until the user clicks on the Buton right which is going to trigger the database Target for the specific model ID that we are collecting right so let's see how this works so let's see uh let's see okay so hot reload is asking us to restart the app I'm going to say a to always do it okay so rest restarting the application and then let's go back into the page over here and perhaps we have to restart it there it is so now we have as you can see we have our delete button on the on the right side okay and of course if we click it let's go ahead and click it and as you can see we get our model with the title for the specific game that we are trying to delete in this case Tri Fighter 2 and with the two butons cancel and delete we click another one let's see we close this we click another one as you can see it changes title changes depending on the the game that you have selected now just to take a closer look at what's going on behind the scenes Let me just press F12 here let's see if we can look at it a little bit more I'm going to move a little bit this to the left let's go into our elements view here and let's see let's use this uh this pointer here to go go perhaps into this element and see what's going on behind the scenes so here's our column this is our TD right so this is the the row here's the TD for each of the of the cells here's the TD for the actions action butons right and notice that right here is the model right so here is the model for that specific game right it is right there but it's not getting displayed right it says display known but it is there it's just waiting for us to show it up same way if we go into another one down here you're going to see that there's even another model right so all it is waiting is for us to show or to click on the Buton to show the the model that corresponds to the ID that specified in the modeling right so I click on this one and then it changes into show okay I say cancel and then it changes into into display n okay and now that I'm seeing this uh one more thing that we may want to do is to well just fix the layout a little bit more so that the button never shows at the bottom right so it doesn't look great the Buton should always show on the right side so let's do a very small change here into our HTML collapse this and perhaps in the Deep the WRA the both of the butons we're going to just change the class into the flex so the flex should make it so that the the butons show uh as a row as opposed to a column so let's go back into the page and sure enough the butons should now always show as a row regardless of the resolution of the screen all right and one last thing if we click on one of these and we click on cancel the model goes away and if we click on delete the model also goes away awesome so the model is working great so far and of course what we're going to do next is to actually introduce that delete logic so that the game is actually deleted so well let's go back into vs code and of course we're going to go uh in this case into our uh clients so let me actually switch to our File Explorer let's go into our games client over here and just like we have done for get uh create an update it is time to add a function for deletion so just after update came I'm going to add a brand new function here so let's name it hly void delete game hint ID okay so it receives the ID and then it's going to go ahead and delete it so let's scroll down this very simple function all we're going to to do is just say well VAR game equals get game Somebody by ID right which is our heler function here's the ID and then we just going to say games. remove the game all right so that should go ahead and remove the game from our current list of games awesome so now we have that function what we want to do is to go back into our delete game component and I will take advantage of the dependency injection pattern that supported in Blazer so that we can get an instance both of the games client and also the navigation manager to complete our delete experience so let's go ahead and inject our games client it's going to be named just client and let's also inject the navigation manager let's name it navigation man okay and now what we want to do is to introduce a function in our code perhaps at the end private void all right so this is function that's going to take care of removing the item from The Collection right so all we have to do is just say client. delete gain and we're going to pass in our game. ID now in this case once again uh the compiler is complaining about uh the the variable it could be null and so we could do an argument n exception check uh but in this case we are absolutely sure that the game has to have been set right because it came as a parameter so we can also do is just use the N forgiving operator which is this exclamation mark like that and that will make it so that the compiler really doesn't care we are saying hey I know that it will have an instance it's not going to be n so just don't worry about it right that's another way that you can handle this depending on the situation and well after deleting the game what we probably want to do is to just refresh the data in the page in the home component so that it doesn't show the deleted game anymore and for that what we're going to do is just say navigation manager do refresh remember that our delete game component is really part of the I mean it's nested into the home component so by doing refresh we should be able to refresh everything in the in the entire page here right away now lastly uh we have to use this confirm method we have to use it uh in our primary Buton our delete Buton on the HTML so I'm going to go into our primary Buton which I can see that there's a lot going on there so let me actually send things to the next line so we can see better okay so I'm going to add just one more attribute here which is going to be the on click the on the on click event and we're going to say add confirm okay so that should make it so that when we click the Buton then our C logic that is in confirm should go ahead and Trigger and well delete the game and then refresh the page all right so with that done uh let's check Cod reload should be fine and so let's go ahead and get back into our page over here and just in case I'm going to just refresh this and let's try the deletion right so I'm going to say well I want to delete straight Fighter 2 I'm going to click on this and then I'm going to click on delete now unfortunately as you can see it is not working currently right and if I try again click on this delete it's just not work and um this is actually expected at this point and this leads us to understand a bit better how interactivity Works in Blazer so I think it is a good time to switch to slides so that we can understand much better the Blazer render modes and Blazer interactive in this lesson you will learn about the different render modes available for Blazer applications every component in a Blazer web application adopts a render mode to determine the hosting model that it uses where is r rendered and whether or not it's interactive blur currently supports four render modes static server site rendering interactive server s side rendering client s side rendering via web assembly and automatic rendering let's explore each render mode individually to understand how they work and when to use them static serice s side rendering is the mode you have been using so far in this curse in this mode after the browser sends an HTTP request to the server s side Blazer application components just render HTML to the response stream components are statically rendered on the server and there is no interactivity enabled so if for instance a component renders a Buton and the user clicks on it nothing will happen since there can't be any event handlers for it static SSR is the default render mode for all components components and is best used for websites where the content doesn't change frequently and there's no need for realtime user interaction this mode is great for scale since it doesn't require any websocket connections with the server and it also doesn't require any web assembly downloads into the user's browser but also it enables enhanced navigation by default which enables single page navigation like Fast responsiveness even when it uses traditional server rendered HTML interactive server site rendering renders components from the server in a similar way to a static SSR however components can process UI events interactively via C code as opposed to needing JavaScript to handle the UI interactions Blazer will establish a websocket connection via signal R between the browser and the Blazer server application so if a component renders a Buton and the user clicks on it the event will reach a server via the websocket and the response HTML will come back to the browser via the same channel this mode is best suited for applications that require real-time interactivity but events need to be processed on the server to take advantage of server s side resources is also ideal when web assembly is Not Practical due to the application size which could take a long time to download to the user's browser client signed rendering ing renders components on the client using Blazer web assembly web assembly is a web technology that allows code reading in different languages to run in a browser and Blazer web assembly includes a version of the net runtime that is downloaded and cach in the browser along with your application just like with interactive SSR components can process UI events interactively via C code but here all UI interactions are handled entirely in the browser and your application can update the UI in real time in response to client side events in fact your application can work offline once it has been downloaded and cached in the browser client side rendering is best for applications that require reach realtime interactivity with the UI without constant server communication the last render mode is automatic rendering where the type of rendering to use for components is decided at wrun time in this mode components are initially rendered with interactive server site rendering or interactive SSR however while the user is already using the application in that mode Blazer starts doing work in the background to download and cache the net front time and your application into the browser that way the next time a page is visited the components are rendered from the browser using Blazer web ASM this mode takes the best of interactive SSR and client side rendering and is ideal for applications that need to both optimize the initial load time but also require Rich realtime interactivity in the browser all without the user noticing the transition from one mode to the other now that you know about the different render modes available with laser let's modify our delete dialogue so that it enables user interactions the reason why our delete dialogue is not working properly is because we have been using the default static server side rendering mode of laser so when we go ahead and open the dialogue and then when we click on the delete button there is not really any c code that can handle that event that click event so what we have to do is to enable a different render mode that allow us to have some sort of interactivity and in this case what we're going to do is to enable interactive server site rendering so let's see how to do that let's go back to Vis Studio code and the first thing that we have to do to enable this is to register the required services in pmcs so let's go back into Explorer and let's go into program.cs remember that this is the file where we register all of the services are required by the application and to enable interactive server s side rendering we need to add two things to this file the first thing is well in this line seven after our call to add razor component we are going to have to add one more call which is going to be dot at interactive server components at interactive Ser components so this is a service that is in charge of enabling all of the razor components where we have enabled interactive server s side rendering but also we're going to have to go a little bit down here all the way to in this case line 25 where we have M razor components we have to add one more call that is going to be add interactive server render mode which is the line that is going to actually enable this this different um interactivity mode right interactive server side render now with those those two things enabled we can go back into our delete game uh component and really all we have to do is to tell a component what is going to be the render mode that we're going to be using because these render modes can be specified per component so you don't have to specify it for the entire application you can if you want it to but ideally you just specify render modes that are specific for each component this case we do need lead game to be interactive so we're going to say add render mode and in this case we're going to be using interactive interactive server okay and really that's all we have to do to enable interactive server side rendering or interactive SSR and then let's see one thing that I like to do is to actually stop and restart our dead watch because this is kind of a very heavy change in the way that the application works so just going with the current net watch session may not may not work so I'm going to restart net watch here okay and back into our page here so I'm just going to go ahead and refresh it and this time if we click on the delete button and then we click on delete notice that it indeed deleted the first game the one that we just select if I go ahead and click on another one click on delete it just works right and this is because because the delete dialog now is interactive now if you're curious I mean how how how does that work how is it possible to run C code directly in the browser so well the truth is that in this mode in interactive SSR we are not really running a c code in the browser the code is running in the server but there's a little bit of magic happening behind the scenes so let me go and do F12 here so I'll just do F12 to open the browser Dev console and first thing I'm going to do is to just do a full refresh so let me do a full refresh of the page and the one thing that you're going to notice here I mean it may be a little bit hard to notice but there is one new actor in this page now which is actually this this one at the very end notice this this one here is represents a websocket right which is a real-time Communication channel between the browser and the server right which is powered by blazer. web.js right and it is in pending States so this means that as soon as we loaded our delete dialogue which is part of our home component right it is nested Blazer enabled this web socket of communication with the server meaning that it has a way to react to our changes from the server side right so when we go ahead and click on delete so we click on delete if we click on the delete Buton what happens is that Blazer via that websocket so which is right here now via this websocket you will go ahead and send that event to the server the server runs your C code that handles the delete event right and then it obtains the updated HTML and then it sends back that HTML back to the client to the browser where uh let me close this where Blazer web.js is going to capture that resulting HTML and then it merges uh with our current page right and in the end well we also go ahead and refresh it right so refresh the page with updated list of games and so and that's how well in this case we have no more games in so yeah that's pretty much the magic behind interactive serers side R now let me close this and I think there's one more place where we can actually take advantage of interactivity but for that I think we're going to have to just restart our application because we deleted all of our games let me just recover those games by doing theet watch okay and if you remember uh over here I'm going to refresh the page let's say that we want to edit actually that we want to create a brand new game right so remember that if we click on Save here of course the validations trigger and we cannot save the game but if we enter some value here right some some game hit tap uh one thing that you may notice is that the the the red lines are not going away right so the text box and even the the warning message is still there even when we already filled this so you would expect that uh that that those warnings should just go away right where they not going away automatically I think even if you try saving let me see try saving well only if we try saving then it it goes away but it does not go away as the user interacts with the form and that is because we don't have interactivity enabled so to fix that all we have to do is just go back again over here and let's go into Explorer and then edit game here and then let's go all the way to the top and we're going to just enable the same interactive server render mode for our edit game razor component so render mode interactive server just like that and with that change in place uh let me go ahead and go back to my terminal I'm going to actually again stop stop this because I don't think the net watch is going to catch this change so let's restart the application doet watch and then let's go back into the form uh we may want to just H out and get back in there I'm going to even refresh this so I'll try to save this and of course all the war is kick in now I'm going to enter some value right so some game I'll hit tap and notice by just hitting tap immediately the warning goes away right you can see it is now green and even before I hit submit or anything else and that is because interactivity now is enabled for this form here right so that's the the nice thing about interactivity it just looks much much nicer for our end user all right and so yeah I'm just going to cancel this and with this I think our UI is uh mostly ready for our front end and now it is time to properly integrate our front end with a back end so that we don't have to have all this data just running in memory but instead we are going to be retrieving data from a back end and also sending data back as the user interacts with the front end so next we're going to see how to get started with that backend integration it's time to start the integration of our front end with a corresponding backend API which is going to be in charge of managing all of the data for the application now where is is the backend application that we're going to be using for this well just under this video you should be able to find a link to a zip file that contains the backend API that we're going to be using for this integration now I explain everything about how to create that backend in a different course which I have also uh linked under this video so you can go ahead and check out that course if you want to know how exactly that backend was cre but at this point all we're going to do is just to go ahead and run that back end in our box so we can start integration with the front end so in my case I already downloaded and extracted that back end into my box so let me go ahead and open that Buton in this new Vis Studio code in that I have just opened here so let me go into file open folder and I'm going to go into this directory so I extracted the packet here and I'm just going to click on select folder and if we open up our Explorer we're going to to see that here is our uh our backend code right so it's a very standard hn net core backend API and before we start integration with the front end perhaps we want to just quickly H run it and see how it works so we can understand better what it can offer to our front end now if you want to test this one thing that you may need to install now is an extension that allows you to interact with API now that extension I I have already installed in my box if you go into your extensions view in Vis Studio code the extension that you're looking for is this one here called the rest client so just look for that one in the marketplace so it is res cine by wow ma is the most popular extension of vs code for res CLI so this allows you to interact with your apis directly in BS code without having to use any other tool or even a client application okay so I already installed this one here and so let me show you how this works so I'm going to go ahead and open up my terminal and wellbeing directly in the game store. API directory I'm just going to do net run and perhaps let me get a little bit more space by hid in the activity bar just like that and then uh you're going to find that there there are two HTTP files these games. HTTP and generous. HTP so if you open games. HTP what you're going to see is that we have a series of and let me go this a series of requests here that are ready for you to explore how to interact with API so for instance let me go for the first one so this first one should allow me to retrieve all of the games that have been created in the back and API so I can just go ahead and right click on this and then say send request right and what you're going to see on the right side is a response from the backin API saying that yeah so this was a success 200 okay and then down here you're going to see the list in Json format of all of the games that have been registered uh in the back and AP as you can see we have four games right now okay and you can also click on this send request uh send request link over here although this one is a little bit unreliable sometimes it doesn't work so that's why I prefer to just right click and send a request okay so you can also use this one here for instance if you want to just retrieve one game so game with ID one this will be the request to to use so I'll right click on this send request and as you can see on the right side we get just one game right Final Fantasy 14 in this case and and well just like that you can see that we have more requests for doing a post if you wanted to post a new game into the back and API put if you wanted to update or replace a game in the back and API and finally add delete and then uh if you go back on the left side you're going to also find generous. HTTP so this one here uh is just to interact with the generous API because of course remember that we need to also have the list of generous for the application so if we right click on this one we should be able to get uh our list of GES so right now we have 1 2 3 four five GES which should match what we have been doing in the client right now uh so these are the ACT gend we're going to be using and there are relationships in the back end right to make sure that anytime we use a gender it has to come from this list otherwise the database is not going to accept all right so yeah so this is the backend API and I guess for now we're going to just to leave it running so it is running right there but we're not going to be doing much more over here we're going to be actually switching back into our Vis Studio code instance where we have our front end and now we have to explore well how we're going to get our front end to start sending those requests into the bucket and to get started what we're going to do is just start going to perm. CS okay per. CS remember that this is the this is the place where we register all of the services for the application and the key service that we are going to need now is this one known as the HTTP client so the HTTP client is a standard class in hn netcore and in laser applications that allows you to send requests outside of your application and into any other external service okay and so to do that we're going to do the following the first thing perhaps just before declaring our games client and generous client over here we're going to be declaring a variable that represents the location of the URL of our backet so what is that that URL so let me go briefly back into our API and if you see down here in the console we can see what is the location where the bend is listening so it is listening in HTTP Local Host 5274 right so let me go ahead and copy this so just copy that and let me go back into my front so I'm going to just deare a variable here that says game store API URL it's going to be and then we're going to paste that URL just C now the next thing we're going to do is to use uh the depend tendy injection uh pattern in in bler applications to actually inject or actually to register an instance of the of the HTTP client object for each of our clients remember that right now we have these two clients right so games client and Jen client and let me actually do F12 in games client so I will remember what's going on here so this is the class that today we are using to just manage all of the games in this in memory Leist right what we want to do now is to update this class so that it can use an http cing instance right to interact with the backend instead all right so to do that let's first register our HTTP client instance and for that there's actually a very handy uh method in Play application that you can use for that purpose what you can do is the following builder. services. HTTP client and this method is going to receive the type of the client class that you're going to be using for a interacting with h client in this casee this is going to be let's start with games client so I'm just going to copy this like that and then here you're going to need to pass a Lambda where you're going to be configuring what is going to be the Base address for that HTTP client so I'm going to say here well the client where the client. Base address is a new URI and that URI is going to have our game store API URL okay perhaps I can uh send this to next line so where we can see better so by doing this we are registering an instance of an HTP cine object that is preconfigured with the game store API URL as the Base address plus also we are registering a games client instance just like we're doing down here but that is also going to be done directly by this at HTTP client method over here right so both the HP client and the K client are getting registered here for dependency injection now one one thing to keep keep in mind is the that the lifetime of both games client and the htb client is going to be scoped to the lifetime of that of that websocket connection that is created between the browser and the server so as long as you keep your browser open in the address of our Play Store application you will keep using the same games client and HTTP client instances but as soon as you close that browser and you open a brand new one then a new websocket or what is also known as a new circuit is created between the browser and the server and that means that you're going to get a brand new instance of the client the HTP client and the games okay and just like we did this we should also register our jener client right so I'm going to just copy this and I'm going to send this down here and in this case it's going to be our generous client which also needs to be configured with that same Base address and now that we have done this we can actually get rid of these two lines 18 and 19 we don't need this because like I said at HTTP Cent is going to register both game client and generous client with the corresponding HTTP client now since this is getting the HTTP client registered we can now go into games client and actually receive that HTTP client via dependence injection right so now we can just say here like this HTTP client let's just name it HTTP client so by doing this we are receiving that injected HTTP client via depend injection and we should probably do the same in our generous client so let's go into generous client over here let's do that same thing right so let's open up parenthesis like that now if we do this of course games client is going to complain because well we are creating an instance over here uh which we're going to remove this line very soon but for now let's just pass in that HTP client so we don't get a built warning now let's see if we can add perhaps a breakpoint uh perhaps in games client just to see that we're actually receiving that instance over there right so I'm going to add some brain boys here hopefully we can catch that and let's go ahead and start debugging the application right now I do have net watch so I'm going to do control C in my terminal like that okay so stopped and I'm going to do F5 to start my application so I'll do just F5 yep so the debugger started and I'm going to go back into my browser which by the way this screen that you can see here this is where you you can expect to see when you have stopped your server and the browser can no longer have that websocket connected back into the server right so this is expected and it's going to start happening now that we are using interactive server side R I'm going to just go ahead and refresh the the browser and what's going to happen is that back in BS code we are here stopping in the Box session and let's see if we hover over HTTP client you're going to see that now we have an HTTP client ready to use and notice that the Base address is the the address of our packet right so that that HTTP client registration it has worked successfully right so we are ready to start using that in our application now before moving on let me actually stop this dis debuging session and before we move on into changing our games CLI to start using the HB client one thing to notice if we go back into program CS let me collapse this is that it's probably not ideal to have our the URL of our back end just hardcoded here in program CS right because at some point we may want to deploy our fronted into some sort of server or to the cloud somewhere where the also the back end is going to be deployed perhaps also into the cloud and this URL is going to need to change right and we don't want to have to change this URL anytime we deploy this to the cloud so how can we avoid having to hardcode this URL here and instead let it be configured for working with this URL in our box but with a different URL at some point when we deploy this to production so for that what we want to do is to use what is known as the spet core configuration system so next let's go into a slides so that we can learn more about snet core configuration at this point we have hardcoded the URL that our bler application will use to talk to the backend API however this is not ideal since eventually when we move the application to a different environment like in a cloud deployment the API URL will be different and we would need to make code changes which is not ideal fortunately there are better places to store application configuration one of the most popular options in h net core especially for local development is the set is the Json file which can store all sorts of configuration information in Json format now the upsetting the Json file is what is known as a configuration s and just like that one there are several other configuration sources supported in net applications like command line arguments environment variables user secrets and even cloud-based configuration sources like Azure keybo and the great thing about this is that the s net core runtime takes care of combining information from all available configuration sources into a single configuration object that implements the ey configuration interface this configuration object is easily accessible to your Blazer application in such a way that it doesn't really need to know where the configuration data actually comes from in this course you will use the appsettings that Json file to store the backend API URL for local development just keep in mind that upsetting that Json is not the right place to store credentials or any kind of secret because anybody that gets access to your project files will be able to read them and potentially leak them if for local development purposes you need to store any kind of credentials please use the user Secrets configuration Source instead which is enabled by the H netcore secret manager let's now update our laser applic to start reading the backend API URL from the upsetting that Json file now we know that it is not ideal to have our backend API URL just hardcoded in our pr. CS file so let's see how to move it into ABS Json so that our application is ready to read that URL from any configuration SCE in the future so let's go ahead and open up our Explorer control shift e and uh as you know we do have our AB Json file right here okay so let's open ABS Json and all we have to do really here is just to open up a brand new a brand new key in this Json file that we're going to name game store API URL okay could be named any anyways uh but that's the name that we're going to be using here and the value that we're going to give this key is well the value that we already know right HTTP Local Host 5274 for let's go ahead and paste that here let's put a comma at the end and now well that URL has moved into but the important thing or the interesting thing is well how do we read this from pr. CS right we still need to read it so fortunately there are very simple apis to read that configuration information in your Blazer application so all we have to do is the following we're going to do Builder and we're going to be using the configuration object from which we can obtain any of the keys that we have in our of Json file now in this case the key that we want is this one called gam store API URL which I'm going to copy I'm going to paste right here okay and yeah just like that we will be able to read the game store API now as you can see we do have a couple of warnings here uh which are well alerting us that well game store API URL could be null right and which makes sense because if for some reason we forgot to add the URL in Json or if we're not able to read it from any configuration Source it's just going to be null so to prevent that what we can do is just add an expression just after this that says that and I'm going to go to the next line that if it is null well we're going to just throw a new exception okay and perhaps for that exception we are going to put here game store API URL is not set okay that way if for any reason that that key is not found and it returns null then we are going to revert into this other section where the exception is going to be drawn and there's no way to get to the next line all right so yeah that's pretty much all we have to do and I'm going to put a break point perhaps at line 13 to see if we actually able to read that gam store API URL and now I'm just going to hit F5 to start my debugger so F5 let's give it a second debugger starts and let's see what we got here so if we hover over game store API URL yep as you can see our API URL is right there no longer hardcoded in C but instead it is coming from ABS Json and like I mentioned if you eventually in the future just deploy this to somewhere in the cloud you will be able to populate that configuration key from any other configuration search without having to touch your C code anymore right so that's great and at this time we should start switching our attention out of the prcs and let me close this and that and where we want to go is into our games client let me remove these two break points so now it is time to start using our HTTP Cline object to start talking to our backend API however there is one more concept that we need to understand before we can start using the different methods available in HTTP client and that concept is the asynchronous ring model available in Blazer and H core and you're that you're going to need anytime you need to use libraries that are going to talk to processes or to services that live outside of your application so let's switch to slides for a moment so we can better understand the asynchronous programming model to understand asynchronous programming let's go through a common scenario you might be familiar with which is making breakfast let's say you start by hitting your pen for a few minutes and then when ready you fry some eggs there we would also like to have some bread for a breakfast so after your eggs are ready we bring up the toaster and toast our bread then when the bread is ready we add some jam on peanut butter on it finally our breakfast would not be complete without some juice so let's pour in some orange juice in total it took us about 30 minutes to complete our breakfast but but is that really how you would go about preparing your breakfast if it is a weekday when you are usually in a rush perhaps you would like to do something like this instead you start by hitting your pan and while that happens you will also start toasting your bread and while those two things happen perhaps you can also pour your orange juice eventually when the pan is ready you go back to it and fry some eggs and and once the bread is toasted you go and put the jam or peanut butter on it doing things this way you can be done in much less time say 15 minutes and perhaps you can spend the rest of the time enjoying your breakfast when comparing these two ways going about making your breakfast we say that the first approach is synchronous since you won't start a new task until the previous one is complete however the second approach is asynchronous since you don't wait for a task to be complete before starting your next task instead you start as many tasks as you can and eventually you turn your attention to tasks that are ready for you so you can continue with the next task in a similar way you can perform asynchronous programming in your SP net core applications when a client sends a request to your web server you want to start handling the request in your razor component in an asynchronous way so that your cook the castr web server is immediately free to start handling the next request so as your razor component starts an asynchronous call perhaps to your HTTP client and the HTTP client in turn requests data asynchronously from the backend API the web server has also started serving the next request also asynchronously when the back in API eventually Returns the requested data the HTTP client will resume work and send the data back to the razor component which in turn resumes work prepares the HTML to render and sends the data back to the web server who in turn responds to the original client request after this the application continues starting other tasks asynchronously and resumes work whenever necessary as you can see the asynchronous progamming model brings in multiple benefits your application gets improved performance since you avoid blocking colors and free them up to perform other tasks which also results in overall better responsiveness you are able to scale your application better because it can handle more requests and users simultaneously without getting bed down by waiting for Io operations to complete and also the use of task objects in combination with the async and await keywords provide a simple and intuitive way of writing a synchronous code as opposed to having to deal with threats and callbacks directly now that you understand the asynchronous programming model and his benefits let's see how to put it to work in our Blazer application let's see how to use the HTTP client object to start sending requests to our backend API so here we are are in our games client where we have already injected our HTTP client instance and we're going to start by using it to retrieve the full list of games from the back end so for that we're going to scroll down until we have our uh get games method right now so in order to retrieve that data or to send a request actually to the back end what we're going to do is first let's just send this to the next line so that it fits better into the screen and then we're going to use HTTP client. getet from Json async and here we're going to be providing the type that we want to use to dis realize that Json that's going to be coming back from the back end and of course that type here is going to be game summary okay and not just game summary but a game summary array okay now the parameter for this method is going to be the route in the back end that we have to reach now if you go back into the back end very quickly over here we're going to remember that as we saw when we use games. HTTP andap it for a moment really all of our requests are going to go into slash games at least for the games end points right so it's just slash games so let's go ahead and use games back in our front end that is going to be the parameter that we're going to be be passing in into to get from Json acing right and let's close this semicolon now the reason why we get these red squiggles here is because get from Json asy innc is not going to just return that a gain summary array all of these Asing methods actually return tasks right so as you can see it does return a task of game summary array and that is expected because as we just talked about the idea of a synchron programming is that we go ahead and invoke this asynchronous method and we're going to be handing over a task back to hnet core or Blazer so that it can keep performing other tasks and eventually just go back to our task to continue the work now there are several ways to work with tasks in ASN net core and in C in general but really the simplest way to deal with these tasks without having to complicate too much our code is by using the async and a weight combination of keywords let me show you how that works so the first thing we're going to do is to actually change this this method to not just return the game summary but actually return a task of game summary array okay that's the first thing the next thing we're going to do is to introduce async here as as part of the return and also we're going to be using a weight over here now all that async and a weight are doing here is just adding a little bit of synthetic sugar so that it is easier to deal with the task that is going to come back from gate from Json AC and in general it just makes it easier to work with the synchron for rapping now in this specific case where you have one method one asynchronous method that is going to just invoke immediately another asynchronous method this is a case where you might get away with not using async and a weight at all and that should work just fine however since we are new to the use of async and a weight I recommend that to start with just use always use it right as and wait if you are going to have this situation and only later on will you get more familiar with all the implications of Asing and a weight you can decide if you just don't want to use them in some situations okay now the reason why we're getting here uh this warning is well once again because of new levels like get from Json async is going to return a nullable collection of game summary array while we're trying to return here H an actual just game summary array with not with no NBL so what we want to do here is to decide what's going to happen what we're going to do or what we're going to return if the this returns a a so in this case what we can do just to keep things simple is to return an empty array like this okay if for some reason get from Jon a sync Just returns null we just going to return an empty array which the razor component is going to be able to handle just fine and then lastly since this method is now an asynchronous method games as asynchronous the convention across C is to add the async suffix okay you don't have to do it but it is the convention so this signals the Coler right whoever is going to invoke this method that this method is actually asynchronous and is returning a task that just makes it easier for we consum your method to understand the implications of invoking all right and so now we changed that uh let's go back into our home component components Pages home that raser okay and let's see what kind of change we have to make to account for the for the change that we made in games client right and really the change we have to make is very simple so here we are in on initialized right and well of course now we are invoking we don't we're not invoking get games but get games Asing right so let's change that get games async but as you start moving into using any synchronous method just like we had to accommodate things in games client right so that the method ising and returns task we have to do something similar over here right this is what is known as async all the way right so you can just have some methods that are not async and some methods that are async in your culture chain you have to turn everything into async so in this case we have to make it so that this method is protected override async and then task and then the meod itself is going to be named uninitialized async and finally we should go ahead and here we use the await keyword okay now this entire method is async and yes with these initial changes we should be able to start testing out and see if we can actually talk to the back end a API now let me quickly go back to my H backend API actually over here and make sure it is running so let me open up my terminal so yeah the API is running if it is not running for you make sure that you first run your API otherwise there's not going to be not anything in the back end to talk to and now let's go back into our application here FR tent open the terminal and let me delete this and let's go ahead and just do our familiar watch okay never mind that warning we're going to deal with that later and let's head back into our browser over here I'm going to just refresh this okay and as you can see now we are listing data that is no longer coming from our inmemory list right so this data is actually coming from the back end and notice that we only had to make minimal changes really to the razor components because the main change really happened in the games CLW which is where we have encapsulated all this logic to deal with the data okay so yeah so that is working great and so now we're going to move ahead and start changing all of the other methods of games client so that they are all working asynchronously and talking to the buet so let's go ahead and collapse this and here in games client let's start with the next method which is at game which now is going to change into public async task add game async going to receive the same thing but now it's not really going to have all of this body that we have here all it's going to do and in fact we're going to just remove the the body entirely so we're going to point into oh wait HTP client that post as Json async right and then well the the route we're going to be using is the same one as before it's just games so we're going to put here games and then we want to pass in uh the the body right what is going to be the payload that we send into this post request but in this case it's going to be the game right the game that we just prepared okay so this method is going to receive our game details object from the razor component the form and then it's going to just hand it over to post as Json async and this method is going to take care of transforming this game object into Json and then just send it over over the wire into our packet next let's move on into get G which now has to be transformed into public async task of game details and it's going to be get game a sync now again it is not going to have any of this body and we're going to say await HTTP client get from Json async we type game details now what is the route that we have to use of course it is going to start with games but remember in this case we want to return an element by ID and for that we're going to be using perhaps an string interpolation here so that we can do games slash and then the ID the ID that was provided in the parameter and then if for any reason this method actually returns null we're going to treat this as a really bad bad scenario because we should be able to find the game that the user has just clicked in the front end right so we're going to do is just say well if it returns null we're going to be drawing a new exception that perhaps is going to just say could not find game okay next let's move on into update game which as you might guess is going to be transformed into public async task update gate async and then we're going to remove all of this body and point to await HTTP client in this case we're going to be doing put as Json async okay and then again we're going to be using string interpolation here to say games slash and then we want to use the updated game. ID okay so that is the route and then we actually need to send the payload right and the payload for this is just going to be our updated game and finally probably the simplest one is going to be our delete method so public Asing task delete delete game async just passing the ID and then we're going to be sending this over to await HTTP client delete a sync and then once again string interpolation we are going to go into games slash ID and that will do it now notice that in none of these cases we have to specify the the host and Port right we always just start with this H with this route with the with the gain spad and that is because if you remember I'm going to go quickly into prcs we have registered the base URL when we configure the HTTP client right here right we retrieve that uh that game store API URL which in fact comes from App apps. Json right we have HTTP Local Host 5274 we read it from here we configured it when we register the HTTP client into games client and then games client just receives the HTP client it already knows the Bas address and all it has to do is just to append the games pad okay so this class is pretty much ready and then as you can notice we we don't need really a bunch of things that we were using before in games CL so I'm going just going to go ahead and clean up all of that that code here no longer needed and of course we can finally get rid of this in memory list of games so get rid of that there and this is all that we have now in our HTTP client for now we're going to deal with this generous um actually we can deal with this right away not needed okay so that is what we have in our HTP CL in our games CL sorry now let's go ahead and look at another case razor component that we have to fix which is going to be our edit game. raser so let me go into edit game. raser over here because of course this one is using our games client and we're going to need to make a few changes so first thing is that on parameters set is going to have to change into an asynchronous method so P protected override async task on parameters set async which by the way will present a warning if we are not doing the corresponding AWA operator right so down here we'll have to start making changes so that when we invoke games client get game we have to change this into await games client. get game AC okay so that should do it for that one method then going down into handle submit we have to change this into a sync task handle submit a sync right now this method I mean as as it it just change it name we actually have to go ahead all the way up to the HTML make sure that we change it in unvalid submit right we have to make it so that it uses handle submit async all right that will take care of that now let's come down into handle submit a sync because of course we have to change the code so that we do a wait games cent. add game async and then games cl. update game asyn with the await in front Okay so that is edit game right and the next thing that we probably have to take a look at is delete game. rer right let's see what has to change here so let's scroll down and of course this is where we do our confirm where we are going to delete the game so we're going to have to do private async task confirm async and we're going to do await client. delete game async now this confirm async method is been used in our HTML RoR make sure that we replace that here all right so yeah so that should do it for the H for all of our g game data information now the only thing to to finish off here is to also update our generous client right because that should also retrieve the data from the backet so let's do that quickly by going into jous client over here where we have our HTTP client and really all we have to do is just change this method here get generous is going to be a public Asing task of generate array it's going to be named get generous async and then it is going to no longer use this generous array it's going to say await HTTP client. get from Json async is going to distalize into a generate array and the path that it has to use in our back end if we go back very quickly to the API in this case let's look at generous. HTP the the path or the endpoint is generous so make sure we copy this that is the path that has to be invoked from the front end and just like we did with games client if this returns n we're just going to return an empty array and with that done we don't need we no longer need this hardcoded in memory array can get rid of that and this is all we're going to need from our generous client now of course we use this generous client in our edit game ad raser so let's go into uninitialized where we have to make sure that we change this into protected override Asing task oninitialized is sync and then this is going to be await generous CL that get gener async all right so that should be all of the changes that we need to do here to start using our HTTP client and interact with the back end let's see what's going on yes so our hot reload uh was not super happy so let's just do a to restart the application okay restarted let's now go back into our client right and let's see if we can do a couple of things so first thing is going to be let's try creating a brand new game so I'm going to click on new game Let's create Mario Kart 8 looks and then this is going to be a racing game notice that the gener here should be coming now from the back and API right it's no longer an inmemory data now the price is going to be $49.99 and then the date is going to be 0529 2014 okay let's go ahead and hit save and as you can see the game was successfully saved in the back end now if you wanted to confirm that this data is actually now stored in the back end one way to do it will be to just go to the API over here and we can go into games. HTTP let me collapse this and we could go ahead and execute the request over here send a request to the backend directly from vs code and we should be able to see our brand new yep Mario Kart 8 Deluxe game is right here so it just got created in the packet with ID 27 okay which is what we have here ID 27 so yeah the game is is coming from the back end and then well one more thing that we can try here is let's go ahead and before we test edits let's just test the deletion very quickly and I'm going to delete this one game here Elder ring let's go ahead and click on delete make sure that this works delete so yeah game got deleted that is working fine and now let's go for an edit and I think we're going to have an issue with edit so let's let's see what happens so let's click on let's say we we're going to edit FIFA 23 and yeah as I was expecting we have a bit of a problem here and that is because when we retrieve the data from the back end let me show you that quickly over here for a very specific games in this case for game one for instance right so let's retrieve game one let's go ahead and hit send request what's going to happen here what's happening is that the generate ID is coming back as a number not as as a string but the way that we are trying to receive that over here in bler if we look at our client and let me go quickly into our games client we are receiving that as a game details if and if I play F12 to go to the definition of game details game dets here is a string right remember that this is a string the generate ID so there's kind of a mismatch between the type that comes back from the Json and the type that we have here so next we're going to see how to implement a Json sterilization converter to deal with this problem and so I think the simple the simplest way to deal with this is by using what is known as a Json converter so let me show you how to implement one let's go into our Explorer and what we're going to do is actually switch to solution Explorer because we're going to be creating a brand new folder here at the root of the project right click new folder and this is going to be named converter and in converter we're going to use right click add new file this is going to be a class and the class is going to be named string converter okay so let's collapse this and let's start by fixing the name Space by just clicking in the Nam space light bulb and then change name space to gamest store. front .on converters now the idea of this converter is going to be that regardless of the type that we receive into the converter we're going to figure out a way to transform that type into a string and specifically we're going to be looking at numbers so to make this an actual Json converter all you have to do is to implement the Json converter class and then um you have to be specific into like into which type you want to convert values in this case we want to convert into string and in fact the right value to use here is going to be a string string nul okay and and with that in place let's go ahead and do control dot right here so that we can use this option Implement abstract class okay so we are implementing the Json converter abstract class and as you can see we have the two methods that we need to implement right now now implementing these method is very straightforward so all we're going to do here is to First just check that the type of the token that we are reading from our Json is an actual number so we're going to say if reader. token type equals Json token type. number if that is the case we are going to go ahead and uh return reader and from that reader we have to read that number and we're going to be reading it as an integer so get int 32 and from that number we can go ahead and turn that into a string so to string otherwise if the if the token is not a number we're just going to go ahead and and return reader. get string right we're not going to be dealing with any other case than the number now this converter is going to deal both with the with reading values from the Json and into our deed class but also it's going to take care of writing values back right but really we don't really care about the right case it's really the reading that is causing us trouble right now so for right all we're going to do is just say writer do write string value and then we just put here the value that we received in the parameter and that's pretty much it that's all you have to do to implement your string converter and now let's see well how can we use this converter in our uh in our class so let's go back into our models so let me get out of solution Explorer and into our game details model over here and back into our general ID what we can do now is use this attribute right here so we're going to use our Json converter which is going to be of type so type type of string converter right so that is the the type that of the that the class that we just created now let me do control dot here so make sure that we use our game store. front end. converters St space let's use that and I think we're missing one parenthesis right so because we're doing this from here on any time we try to deserialize Json into a game details object instance and the value that we get for Generate ID is a is a number the string converter is going to take care of transforming that number into a string so we can read it properly all right and so with that in place let's see how H reload is doing I think it's doing fine so let's go back into here let me go back into our homepage over here perhaps our reload this and then let's see if we can now edit one of the games so let's go ahead and do FIFA 23 I'll click on edit and sure enough now the general ID was properly loaded so it is a sports in this case right so that's great and that's all because we use the right converter right and so yeah let's make one small change here so let's say that FIFA 23 is kind of on sale so it's now going to be$ 59.99 for a few days so let's go ahead and hit on Save and sure enough that worked we can see that the value was updated which means that the value the correct value was sent back to the back end and our update logic is working as and with that I mean the our entire front end is now working properly with full integration with the back end so technically the application is complete at this point the front end that we wanted to achieve uh is working as aect now one thing that we have not really explored too much so far is what happens in our front end when the back end is behaving a little bit slowly right so how would this data load here if the back end is taking time to respond so that is something I want to explore quickly here so let's go back into our API so I'm going to go back into my API and I'm going to stop it so it's running contrl C to stop it close terminal and what I'm going to do is just go to my endpoints games endpoints and it's going to make a temporal change kind of to simulate what happens if the API is too slow so this endpoint here is the endpoint that is in charge of returning all of the games right when which is the API that's invoked by the homepage on our front end so I'm going to introduce a small change here so let me go ahead and give this an actual body okay perhaps I'll do just this okay and so yeah we're going to now return away difficulties that gains but what I'm going to do is to introduce one more line here which is going to cause a small delay in the return so I'm going to do wait task. delay perhaps let's go for three seconds right so that's three seconds so anytime this endpoint is invoked it's going to take 3 seconds first going to wait for 3 seconds and then it's going to go ahead and actually return the data uh from the database okay so let's see how this affects our front end so let's go ahead and do tet run so we rerun this and instead of keep using that that same browser window that I've been using so far I'm actually going to go to another window because I want to show you what happens on the very first load right so I'm going to go here in this new window I'll hit enter and notice that well really nothing is happening right so it took three seconds to actually load the page right you can see that again if I go to this other tab I'm trying to load but nothing is really rendering here right so that slow backing is causing a pretty bad experience uh into our front end uh because we are not able to see any data until the front end is ready to return that data right and here's three seconds but when you deploy this to the cloud right the back end and the front end uh the experience could be really really bad depending on the load that the server has so we have to figure out a way to present something in the client while the server is is finishing the work to return the do the data back right now fortunately we can do this uh actually with just one line in our Blazer application let me show you how that works so let's go back into here and perhaps we're going to be closing most of these tabs let's go to Explorer and let's head into components pages and home. raser so what we're going to do is just go all the way to the top and we're going to add just one attribute into our on home component that is known as a streaming rendering so let me add attribute here so it is stream rendering and the idea of this attribute is that it's going to allow our Blazer application to send back some HTML initially back to the browser until the server is ready to send us back the rest of the data because remember that when we initially load or render the component we are ready to present this loading screen right this loading message and only when the when the data is is available we should be able to go ahead and render the table but so far we have not been taking advantage of this streaming rendering capability that will allow us to present this partial view here initially and then do something else so the data is going to be streamed from the server as it is available let's see how that works so let's go back into our browser and let's see how that goes I'm going to perhaps close these two tabs and let's open a brand new one and now let's go browse into our application right so there and notice that in immediately we get the load indicator right there right and only when the data is ready then it is going to come back right so once again I'm going to open up a brand new tab I'll go there enter it says loading right it says loading and eventually the data goes back okay so I think this is a pretty good Improvement for our experience because once again uh everything is going to working be working super fast in your local box but as soon as you hit the cloud or any deployed environment things are going to start going much slower right so your UI needs to be ready to behave as fast as possible and and have this responsive Behavior regardless of all of these networking conditions so make sure that you use stream rendering in Pages where you expect that the data may take some time to okay and so next I want to show you one more Improvement that we can introduce actually into our edit form this next Improvement that I'm going to show you mainly applies to forms where you have not enabled any sort of interactivity so static server side rendering but I still want to show it to you because you may have to deal with forms that have no interactivity and this Improvement is is very essential so to start with what I'm going to do is first let's go just go back to the back end this is our game store API and I just want to stop the server I'm going to remove this uh this lowliness that we introduce it a few minutes ago so I'm just going to do just do contrl c so now the backend should be as H as fast as possible so I'm going to re the back end okay and now let's go back into our vs code instance where we have our Blazer application so we're going to do cond shift e let's close home that raser and let's go into edit game that raser now remember that we have enabled interactivity here via the interactive server render mode here so let's go ahead and temporarily remove this let's just remove it so that the form becomes static so let's see our watch the application I think just restarted okay and so let's go back into vs code right here Let's do let's refresh it and then let's go ahead and try to edit one of the games so I'm going to click on edit and let's go ahead now and open our browser console F12 open that and if you go into the elements tab over here and now we click on Save uh you're going to see that H some elements of the page have changed and perhaps it's not very evident in this tab here so let me actually switch into the network tab let's go to network and then let's click on edit and I'm going to clear this for now so it's clear and now I'm going to hit on Save and notice how how all of the files of our home component or of our application really have been reloaded right pretty much the entire page got reloaded here right and in fact if we collap this for a moment and we go into this first request here so this was the post that we sent to the server right post request to post the changes and then we go into this next request which is a get to retrieve all of the data for the home component and then besides that we have to load also all the CSS the JavaScript files right and yeah a bunch of things happen here right now this doesn't look too bad in our local box but in a deployed application this is not going to look very nice you may have to end up with a patient that you're going to see that it is loading and it's taking time to load with with all the files that are involved so in static form uh there is a nice way to not have to deal with this kind of experience so let me show you that so let's go back into BS code over here and what we're going to do is just scroll down here into our edit form on the right side of this of the Declaration of the edit form what we're going to do and perhaps what I'm going to do this just send this to the next line so we can see better like this and what we're going to do is just to add one more attribute here which is known as enhance so this enhanced attribute is going to enable enhance forms so that they can behave in a similar way as a single page application right where only the the htl that changes is going to be rendered in the page as opposed to having to reload the entire page okay so now let's see this in action that's really all you have to do so yeah application should have reloaded now so let's go back into our page and let's click on the edit button once again so here we are back in edit and I'm going to clear our Network tab again and let's hit on Save now hit on Save and notice that we don't see we don't see anymore all of those requests right so all we see here is this first request here which is actually I mean it is a post I mean it is a post back to the server however it is executed via a fetch call right notice this it is a fetch call that does not require reloading the entire page right so we do the Fetch and then in the next request over here we have our get for the homepage but again it was intercepted by Blazer the client side and is transformed into a simple fetch call over here and because of that there is no need to reload the entire set of elements for the page but only we will go ahead and reconstruct the pieces of HTML that change it when we move back into the home component now this this is the same behavior that you would observe if you have interactive enable for the form but if you have an static form you want to make sure that you enable this enhanced Behavior because as you can see it's going to end up a producing a very a very interactive and nicely loading uh component over here all right and yeah with that said let's just go back into edit game and we're going to perhaps we're just going to leave enhance over there and let's bring back our render mode interactive server okay well it's not going to hurt H in any way to just keep having your enhance over here so it should be just fine but now you know how to enable nice interactivity or a nice navigation from one component to the other regardless of the fact if you are using interactivity or not congratulations you now have a fully working and modern and interactive front end I hope you enjoyed going through this course as much as I enjoyed creating it and I can't wait to see what you will be able to build with your new player skills

Channel: Julio Casal

Views: 21,816

Keywords:

Id: RBVIclt4sOo

Length: 306min 17sec (18377 seconds)

Published: Wed Mar 27 2024