Blazor Tutorial | CRUD With Blazor, Step By Step

hey there welcome to this beginner level Blazer curse where you're going to learn how to build a growth style laser application completely from scratch and step by step my name is Julia Casal I'm a software engineer with many years building different kinds of.net applications and I'm the founder oftenbeckerservices.com where I help.net developers build Cloud ready.net systems at scale by the end of this course you will have a basic grot style Blazer single page application built entirely with c-sharp HTML and CSS that will allow users to manage a simple game catalog from a modern interactive and friendly user interface let's start in order to take this course you should have some basic knowledge of C sharp Java or a similar object-oriented language you should also have some experience with HTML and CSS however this is a beginner level course so you don't have to be an expert on any of these topics simply write every line of code from scratch and everything we do is explained in detail in fact if you already know the basis of laser and you're looking for intermediate or advanced level topics this is not the course for you since we will be covering only the most essential components and features that will give you a great start with this amazing platform before moving on to the software prerequisites let me give you a quick preview of the single page application that you will build in this course so I got the finished version of this application running in my box and it is running in localhost in Port 5259 so let's go ahead and load it and this is known as a Blazer webassembly application and it represents the game catalog section of a fictional game store and this application was built with nothing more than c-sharp HTML and a little bit of CSS now as you can see in the home page of application what we get is what is known as the game catalog right and so it's just a simple list of games each of them featuring an ID a name the general a price and the release date and if you wanted to add a brand new game into this list all you have to do is just to click on this new game button over here just click on your game and that takes us to a form where you can enter all the details for this brand new game now one thing to notice about this form is that it already features what is known as client-side validation so if I wanted to just go ahead and save the form as it is right now just click on save that is going to go ahead and prompt the user to enter all of the required details right so like in this case we have to enter name and generate and the price is also required and it has to be in a valid range so to satisfy this I mean you cannot really move forward without satisfying the validations so I'll have to enter the game so let's enter Forza Horizon 5 let's say and let's pick a generous the gender is going to be a racing I notice how the validations start going away as I enter valid information and for the price you want to enter an actual valid range so it cannot be a negative number like this is not going to work uh also 105 is not going to work because it has to be at least a hundred uh much 100 and so what you want to do is just enter let's say 59.99 and that's going to satisfy the validation and then for the release date you can either pick a date from this date selector as you can see here you can pick a date uh over there or you can just enter the the date by typing in there like I'm going to do right now it's going to be November 5 2021 let's say and when you're ready you can go ahead and just click on this button here save to go ahead and save the the brand new game and as you can see it shows up right here at the bottom right that's our new game now just like you can create a game uh you can also go ahead and edit any of these games so for instance let's say that I'm going to edit a Street Fighter 2 I'm going to change the title and perhaps change the price because it is on sale so I'm going to click on this a edit button over here okay to click on edit and that's going to take me back into the same form but this time it is in a edit mode right the same form in edit mode so what I can do now is just let's say change the game is sorry the name so it's going to be three Fighter 2 Turbo right and then since it is on sale they say this is going to be only 9.99 that's going to be fairly cheap and then you can go ahead and click on Save again and that's going to uh take the effect of having the modified a game right here as you can see it has modified the values and finally of course you can also delete any of the records over here and so the daily experience looks like this so you just select the game that you want to delete let's say we want to delete Minecraft so all you have to do is just click on this x button just next to the game so click on that that's going to pop up this this nice dialog over here and you can say cancel if you don't really want to to delete the game or you can actually go ahead and say delete after which the game will be deleted as you can see it is no longer here in the list so yeah so that's the application that we're going to build across this course and next let's talk about the software prerequisites that you will need in your box to get started in terms of the software prerequisites for this course all the tools that you'll use are cross-platform so you can use any computer with Mac OS windows or Linux as your operating system you will also need to download and install the following the.net software development kit or SDK which includes everything needed to build and run down their applications and visual studio code are lightweight but powerful source code editor that you will use to write build and debug your code you could also use any other code editor if you prefer but vs code is your best choice to follow along step by step please make sure that you download and install both in your box using the URLs on screen before starting the coding part of the course so what is ASP and net core well in simple terms asp.net core is a popular web development framework for building web apps on the.net platform ASP stands for active server Pages which was Microsoft's first server-side scripting language and engine for dynamic web pages and was released in December 1996. it was superseded by asp.net in January 2002 with the first version of the dot-in framework and several years later around 2016 it was superseded Again by Asia netcore where core mainly hints to the cross-platform capability of this web framework now it will be good to also briefly mention what is a.net platform and how it relates to ASP and netcore.net is a free cross-platform open source development platform for building many types of applications the Govern apps for Windows desktops to web applications Cloud applications mobile applications games app for internet of things and even apps designed for artificial intelligence scenarios that net is a unified platform that serves the needs of all app types to make it easy to reuse code across all of your apps now in this course you will focus only on asp.net core which stands for the web type of applications that you can create with the.net platform now how do you create HP net core applications well you got to use a programming language but that language is not really.net or even asp.net core you get to choose between three languages to create your svnet core apps which are c-sharp F-sharp and Bissell basic but in this course we will be using the most popular one which is c-sharp when you install the.net software development kit or SDK you get access not just to these languages but also to a series of tools that make it very easy to get started with the platform even before choosing a code editor or IDE you also get access to a Microsoft and community supported set of libraries and packages that can quickly expand the functionalities of your app so you don't have to reinvent the wheel there are many ways to deploy ASP and net core apps to make them available to your users that go from simple xcopy deployments to fully dockerized deployments ready for the cloud your API unit core apps are cross-platform meaning that the same code that you write once can run on Mac OS Linux and windows and it's all open source on GitHub along with.net core it has thousands of contributions by hundreds of developers and companies making it one of the fastest growing and loved projects on GitHub we talked about the different kinds of applications that you can create with a.net platform but even with asp.net core there are also a few types of applications that you can create on one side you can create very rich Dynamic and interactive web uis or front-ends with the extensive UI framework included in Asia net core but on the other side you can also create many kinds of secure and Powerful backend services that can provide data to the web UI or take care of long-running or compute intensive scenarios that don't need any user interaction now when you create web uis with HP and net core you have the choice to create either server renders or Clan render uis a server rendered UI dynamically generates the HTML and CSS of the pages on the server in response to browser requests so when the page arrives to the browser it is ready to display to create this type of apps you can choose either aspinets NBC framework which uses the model view controller pattern or the Razer Pages framework which follows a page-based model a client render UI dynamically renders the UI elements on the client directly updating the page you see in your browser as necessary this type of uis are also called single page applications or Spas since usually there's only one single page that is continuously updated as you interact with the site asp.net core includes a complete UI framework known as blazer for building this type of application with c-sharp HTML and CSS there are also several choices for building back-end Services web application programming interfaces or web apis are the most common form of backend Services giving how easy it is to use them to query or send data from and to backend servers using the HTTP protocol but you can also create real-time applications via signalr to push content directly from the server to the client or grpc apps which allow for high performance remote procedure calls between clients and services or even backgrounds worker Services which can perform tasks that usually require no user input like loan running or Computing testing operations or even tasks that start based on some sort of external event you could also create microservices which are business aligned Loosely coupled services that smaller Focus teams can build and deploy independently using one or more of the available back-end service Technologies I just mentioned sadly we can't cover all of this in a single course so in this video the focus will be on building a client render web UI using Blazer if you're also interested in building back-end services please check out my site where I offer other courses that cover that side of the spectrum so what is Blazer Blazer is a framework for building interactive client-side web UI with.net this means that instead of using JavaScript to create a rich interactive UI which is a more traditional approach you can instead use c-sharp in combination with HTML and CSS now you can host your Play Store applications either in the server via an asp.net core application or in the client using a technology known as webassembly in this course we will focus on the client-side option so it will be good to understand what is webassembly in simple terms webassembly is a web technology that allows code reading in different languages to run in a browser that means that you can code your application in languages like C plus go c-sharp and many others compile it into webassembly format and then that same application can run in all modern browsers without any additional plugins so thanks to webassembly your c-sharp code can access the full functionality of the browser that takes us to Blazer webassembly which is a single page application framework for building interactive client-side web apps with.net a single page application or Spa is a kind of web application that dynamically rewrites a single web page in response to user actions that is something that you can also create with javascript-based webui Frameworks like angular react and view now with blazer webassembly you start by creating reusable components using a mix of c-sharp and HTML these are commonly known as Razer components and your Blazer application will likely be composed of many of them then you compile these components into a.net dll which is known as an assembly in the.net World along with all the required assemblies that ship with.net after that you take all these assemblies and place them in a web server which could be either your local box a server in your local network or a web server in the cloud when you navigate to the web server all the required Blazer components will be downloaded to your browser this includes the webassembly implementation of laser all the required that in assemblies and the assemblies that contain all your razer components laser webassembly boots traffic.net time loads your assemblies and then your app starts manipulating the page via the browser's document optic model or done let's now get our hands dirty by building our game store Blazer client so here we are in a brand new instance of Visual Studio code and before we start doing the actual coding what I like to do is to just set a few settings in this studio code so that it is easier to format the code that we'll be writing and to do that what we're going to do is go into file and then preferences and then settings and here we're going to be looking for just three settings let's type place open brace and that's going to show up this these four settings here and what you want to do is to click on this first two the one that says place of a brace or new line for Contour blocks and place open brace on your line for functions so this is just going to modify the default location of the curly braces anytime you write like an if else statement or if you create a new function the opening calibration just go into the next line which is a nice formatting I think and then the next element that we're going to modify is format on Save okay it's the first one over here you want to tick this one and this is just that at any time you save the file it is going to automatically format and the file for you so that's it in terms of Visual Studio code settings and we're just going to go ahead and close this and the next thing we're going to do is to install a few extensions that are going to make our Blazer and c-sharp coding experience much better in this code so we're going to do is go into the extensions View and you can get there by going into this this icon over here this is the extensions view so just click on that one and here you're going to see any extension that you have already installed in my case I only have one extension which is ABS called icons extension and all this one does is it gives much better coloring to the files that we're going to see in the Explorer view so this is optional feel free to install it if you want to but it's not really required for this curse now what I'm going to be looking for is for one extension that is called laser wasm for Blazer webassembly right you just type that one you're going to find this one extension here is Microsoft 8 Minute core razor BS code Placer bus evolving extension and so this is the one that's going to enable a bunch of nice debugging features for Blazer within this code so I'm just going to go ahead and click on install and this is the initial is going to install not just the place or extension but also the c-sharp extension so I'm just going to clear this now you're going to see that now we have few other extensions so we have the laser extension over here we also have the c-sharp extension let me expand this for a bit right there the C sharp extension is the one that provides all the c-sharp productivity features inside Visual Studio code so you have to make sure that you have this one installed and it came with the laser extension and then there's also this other extension gear that supports the only ones there's one more extension that would recommend that you also install which is is called actually c-sharp extensions and then they're going to be a few variants of this one the one that you want to install is this one here right here from just creative right so this is the one that is going to allow to give us a bunch of more additional context menus specifically to create C sharp files inside Visual Studio code so I'm going to go ahead and install this one here okay so that's installed and now we're pretty much done with the configuration of our development environment so now it is time to create our bracer client and to do that first we want to Define what is going to be the location in my box in this case where we're going to be creating these files so let's go into file and open folder and here I'm going to switch into my d projects directory you can choose really any directory in your box I'm going to be just using this one here for for our purposes and right here I'm going to just going to create one folder that I'm going to be calling game store okay because this is fictional game Sorry scenario so this is what we're going to be having our projects so you're going to click on select folder right there so this opens Visual Studio code in the context of that one folder and what we want to do now is to create our Blazer client using the.net CLI and in order to do that we're going to be using the integrated terminal of Visual Studio code so for that let me first collapse this pane over here and to open the terminal you can go into view and then terminal and that's going to open the terminal in the context of the folder where we are right now which is our game store folder now a couple of shortcuts to open this terminal are if I just close this for a moment are Ctrl tilde at this Windows you can do Ctrl tilde or you can also do Ctrl J to open the terminal very quickly now what I also want to do here is just to expand this terminal and you can do that by using this this icon right here you can use that just to expand the terminal and what I like to do now is to First verify that we do have the.net CLI installed and to do that all you have to do is just type the net Dash Dash info and that's going to show all the information about your version of the.net SDK as you can see I am using version 70102 of the.net SDK now you don't have to have exactly this version of it on SDK but I will ask you to please stick 2.net7 at least because the predicting place I'm going to be using for creating the projects are going to include files generated by The Net 7 sck other version of the SDK may not have the same files that we're going to be seeing across this course so that make it a bit more challenging to follow so please stick to Net 7 SDK for this course so now we know that we have the client installed let me clear the screen and now we can go ahead and create our project so to do that all you have to do is just say dot net new and then you can use first the option list to get a full list of all of the included project templates so as you can see it's kind of a big list over here that reveals all the types of projects that you can create with the.net SDK like I mentioned there are many different ways that you can create but in our case we are mostly interested in the Blazer webassembly app template right here so this is the one that allows you to create a single page application using blazer with a sample okay so that's the one that we're going to be using so let me clean the screen again now what we can do is just say net new blazer wasm and then you want to use Dash and specify the name of the product to create so that's going to be game store dot client okay hit enter and now we'll go ahead and create our project and so if we open explore review Now by using this view over here Explorer you're going to see that now we have a folder here with a bunch of a bunch of files now we'll talk about these files in a second but before doing that what we can do right away easier to verify that we can actually run a laser application in our box and since this template generated already upgrade for us with a little bit of functionality we can just verify that very quick so we can do now is now just clean this we're going to switch into them gamestore.client directory and now we can go ahead and do a couple of things first thing would be to build the application so to produce the output of this application what you can do with the net CLI by just typing.net build so I will go ahead and produce an output for an application and now that we have that you can go ahead and just type dotnet run of course you could also just go ahead and just type that and run if you wanted to so that will go ahead and build and then run the application and so it's always good to just verify that things are building properly now as the output of this standard run execution you can see that we have a line here this one here that clearly tells us what is the URL of the site that is running now in our box as you can see in my case WB HTTP localhost import 5259 but that's a random Port so in your case it's going to be different so that's fine but it's good to know that this is where the application is running and in fact we can now just go ahead and copy this URL and you can also just click on it if you wanted to we can copy that and we can go ahead into a browser so here I have my browser and you can just paste that in the navigation bar hit enter and here you're going to see your initial laser application so this layout that you can see here is kind of the default layout that every Blazer application gets and so it's very simple so you can see there's a central content page over here with just a simple hello world a brief survey and then we do have a left navigation bar on the left side there's also kind of a top bar over here at the top and if you go in the left side there's a little counter element here that you can just click here and this is doing Accounting in the client side directing the client so there's no server side here there's also this fetch data a section that that shows you how to load data from some little Json file that's included in operating plate but it's not doing really any server side but this just shows you that application is up and run it doesn't just not spend too much time on this we just know that application is running which is great and we can also use this here to describe a little bit the files that have been created accurate for this project so let me collapse this who loves this a little bit we're going to minimize a little bit this terminal I'm actually going to close here this is not going to stop the application it's just closing the terminal so the application just keeps running which is okay but what we want to do is just explore very quickly the files that have been generated for this break because it's good to understand what you're going to be working with we're not going to be looking in detail on living into every single file here but these files are important so it's good for you to understand what's going on and so the first time we're going to take a look at is this game store.client.csbrock here this is what's called the project file so every.net application has a project file and the break file defines a few important things the first thing at the top here is going to define the type of application that you're working with in this case it clear says that this is a Blazer webassembly application it's a type of application I want to work with but it could be different depending on the in the type of application that you're creating and the other important part is going to be this one here which is the target framework so this defines what is the set of apis of.net that you're going to have access to since this one here says net70 it means that this targets the apis included in the.net 7 SDK and runtime that is what and since we're using the.net 7 SDK that's what you got this this target framework here and then the other important thing here is going to be there's a list of package references these are external components that are included now in in our project and in this case it's just a couple components for being able to develop webassembly API you should place over sample applications in your box so that is the product file one important thing to understand here is what is the root the web root of our application since this is a web application that has to be available and that's actually in this www root folder over here which as you can see it looks really like a very standard and simple website over here which in fact has an index page an index has HTML which is a very common page to have in your website right and this page has expected a head element over here it also has a body element over here as you can see and then of course in the head it is it is referencing a few style sheets CSS and files that Define styles for the application right and those CSS are going to be located on the left side over here in this CSS folder you can see that there's an app CSS for the CSS for the application and there's also CSS for bootstrap which is a layout framework that we're going to be talking about later on and there's also this open iconic order framework for fonts that we're also going to be using here later so this is basic CSS included here and then looking at the body of this index page we do have a couple of sections here but the important section here is going to be this div here that has the app ID and this is going to be the section where we're going to be rendering and re-rendering the different racer components the dynamic razor components that change based on the interactions that the user has with the site remember that we said that this is going to be a single page application and by single page we really mean it there's just one page in this application and that is the index page this one that we have right now but it is dynamic so things are going to be changing and they're going to be changing within this app a element over here and so there's also another component here this is the error UI this is just a section for displaying errors from Blazer but then there is also very important element down here which is the laser that webassembly.js this is a Javascript file whose purpose is to actually load Blazer into the browser right so this is in the Javascript file and that's included already with the framework but this is the file that downloads the Blazer implementation of.net into the browser when the application loads it loads the dot net assemblies it loads your own assemblies and components and that's what it brings to life the whole Place replication all right now we're talking about Blazer razor components here but where are those compound exactly so if you go on the left side let's go into the pages folder here so pages is where you typically Define these razor components as you can see we do have components that correspond to the UI right so if you see the UI here we do have a section A hot section counter and fetch data and so as you see the pages we do have counter fetch data and an indexed razor so let's look at indexed razor over here by the way yeah you may get this prompt over here not that it showed up so this is this code detecting that we're going to be working with C sharp code here so it is asking us to add additional files to make the experience much better so we're just going to go ahead and click on js on this dialog so click yes and that's going to generate that that is called folder we're going to be talking about that one in a moment right but if whenever you see that file that that will happen when you open a Razer file or a C sharp file so make sure that you click yes so you can get this this that vs code folder over there and so going back to index.gracer this page here represents the of course the send Central and main element that we're going to see in the in this page here right so it says hello world welcome to your new app and there's a this survey link over here so that is exactly the content that you can see over here but notice that this is looks like HTML but it's not exactly HTML it's called the resource syntax and this is HTML combine it with Razer components and even with C sharp you can also include in this page here so notice that this is a normal H1 so that's expected in HTML but you also have this page title element here which is not just HTML this is actually another Razer component that is included with the Blazer UI framework right so that's included for you bring it in Via the.net SDK you also have this survey prompt component over here which is also another component that's not just included with razor basically Define it in these shared folders you can see over here there's a survey prompt that Razer component that's been included right here okay and we'll be working a lot inside this Index this is going to be the one place where we're going to be defining the whole layout for our little application but yeah this is the index page this index page doesn't just show up by itself right as you can see in the page there's kind of a layout that has a sidebar on the left side so there's an entire layouts set up for this application where is that layout defined so if you go into the share directory over here you're going to see that there's a bunch of files but among them there's this main layout.racer file over here and so and I can collapse this a bit more this is the one that this one that we know as a layout component and you can see that it inherits from layout component base right which makes it a layout component Alia component is a one to design it to render the content of other components and as you can see this one has an app menu that's a menu that shows up on the left side but I also have a main section here where the important thing is going to be this body right here where body is really a property of layout component base and body is the place where the actual content of the thing that you want to show in the layout is going to show so this is where the content of index.tracer it will be go ahead and unrender if you selected index or fetch data or or the other component over there now this layout component doesn't just become a layout component just because it denaries from their Google device I mean yes that makes it a real component but how do we set up so that this is the layout that is going to be used in the application and before that just notice on the left side that this layer these Razer files can also have their own CSS file right so as you can see this cccss for the main layout.racer and you can have additional CSS for the other physical components now where is that we defined that main layout that razor is going to be the layout for the application so that actually happens down here in app.racer this file over here and this one here is what we know as the root component this is the the root of the three of component of Razor components that are going to be defined in your application you're always going to get adapted razor and this one here as you can see in let me collapse this for a moment this defines a router component so the router component is the one that allows you to have client-side navigation in your Blazer application what does that mean well if you go into the application notice that if I switch into counter on the browser there is now a slash counter route and if I switch into fetch data there's now a slash phase data route and these are not server-side routes I'm not navigating anywhere in the server side this is just in decline in the browser so we are doing navigation within the browser so this is client-side navigation and that kind of navigation like I said it is enabled via this router component that you see here so we are just saying hey go ahead and find all the components that have defined some sort of out like for instance if you go back again into counter that razor you can see that it defines this slash counter route so after the razor via the router component is going to say okay so find all of these components that Define a route for each of these ones whenever the user navigates to one of those routes go ahead and use a route view component over here another razor component get the data of the router window display and display it guess where in the main layout in this case so this is one that defines the default layout for your application it says def layout it is going to be the main layout and that's the main layout that we're just looking at a moment ago right so that's how you wire up main layout into your razer application and of course there's another section here for the case that we cannot find the actual element it will render this other piecer here so that is great but remember that we said that the razor components the dynamic components are going to be rendered in the index page in this section over here right so in this div that has an ID of app but what is that we wire up that connection between the app Root component and this index page well that actually happens and let me just collapse a little bit these things that actually happens in this program.cs file here proton.cs is what we know as the application entry point so these are the first lines of code that execute when you start your application and so for instance this line 5 here is going to be your first line and this one defines a crease what we call a default webassembly host Builder right and where is this Builder object over here which you can use to do initial configurations and register services for your Blazer application and before we look at these three lines that are happening here look at the last line here what this guy is going to be doing is just taking down the other component in execute this build method here which actually configures all of the things that you have defined before it and then it is Inbox this run async method to actually kick off the execution of the application but now the important thing or the interesting thing is going to be this line here line six where we are saying hey I have a list of root components and I want to add a one root component here so what is going to be that group component is going to be the app component we just talked about right so that is the app component that's defined right here after Tracer right so we want to add that root component and where do we want to add it well there's a selector here as you can see there's a selector with pound app that says hey in the index page represent the page where we render everything find the ID or the element that has already of app and in that place put this the contents of the app components so as you remember WWE root index.html we have this ID of app so that means that we're going to be overriding the content that's in here that initially will show a loading progress but then go ahead and place the content off of the app component right and everything else that's included inside it right so program.cs is the one that's going to be initially wiring up these things and of course it's going to be doing more than that right so there's this other Head outlet component but there's also these Services you can see here this services collection that we're going to be talking about later on but these are Services able do we reuse it across your application but we will talk more about that later on now there's also these imported Razer file here this defines a bunch of using statements for namespaces that you may want to be using across the entire Blazer application so that way you don't have to be declaring each of these usings one by one in in the different places in your application right it's a nice way to concentrate a bunch of reusable usings as you saw when when we opened the first eraser component this code detected that this was laser type of application and it has c-sharp code and it prompted us to generate stuff for us so that created a BS code folder that created these two files from here now let me close this now if for any reason this directory and these files did not get Auto generated for you you can also prompt this code to do that for you manually and you can do that by doing the following you can just go ahead and do view command palette or you can also use this combination of Ctrl shift p in Windows and then you're going to be looking for an option that says net generate assets for build and debug so you just have to select that option and that's going to go ahead and generate those initial a files for you so you can click on that one right and in my case it will say yeah replace the sitting build and the podcast is all say it canceled because I already have them but if you didn't have them it will go ahead and generate them for you so what are these files where we just have to fast here there's data Json that defines the initial a series of tasks that you can execute NBS code and so the most important one is going to be this this one here we use the build task that is going to be used for building the project right so you know that you can always just open your terminal like we did I'm going to do Ctrl C here and I'll clean this you can always just dot net build and that's going to go ahead and build the project right but since your vs code what you want to do is just take advantage of shortcuts within this a code Editor to do this faster so now that we have this build task defined here what you can also do is just go into terminal and then run build task right and that will go ahead and build the preview as you can see it is building the project for us so that is integration into vs code now the cool thing about this is that it also has a shortcut right it says control plus shift.p plus v that is Windows so I can do the same thing I can go ahead and do Ctrl shift p and that will go ahead and build my product so that's a very nice shortcut that you get there and you don't have to be building the project manually every single time right so that is our build task and then if you go into launch.json we also have the configurations for being able to debug not just run but debug the laser application in our box we're going to be making a few changes here that are not set up by default to make sure that we can debug the application in the box but before doing that a one more file that I want to show you here is inside properties there's this launch settings.json file that I'm going to open and read this DC finds a bunch of settings for your development environment right so this is your developer only settings that you want to that are very useful for local development so for instance this defines the application URL that you're going to find right here application URL DC finds that my application should be running in HTTP localhost Port 5259 as we saw so this is the setting that defines that and it also defines that we are working in a development environment like 18 core environment variable environment variable defines that this is a development environment and if you didn't have this it will just revert into a production environment so a few things change when you do that kind of change in this environment and if you wanted I mean since we have the HTTP profile as the first one the application is always going to be running just in HTTP but if you wanted to use https in your local box all you have to do is perhaps change the order of these profiles or get rid of the HTTP profile and then you will be reverting into the https profile that's going to be running things in HTTPS for our purposes it's just running an HTTP is just going to be just fine but you certainly want to be using https when you deploy the production which means a bunch of other configurations and this file is not going to be used in that case right so let me close that and let's now go back into launcher Json because like I said we do need to specify a few additional configurations to make sure that we can debug this application in BS code so let me actually collapse this a little bit and as you can see we are defining here a few things and the first one is going to be the name of this figuration then we say that this is a blazer with a sample application request launch this one here means that this is going to be the working directory as we are executing the debugging session but there are two things missing here one of those things is going to be the URL the browser can know where it is that we are going to to be hosting our application so that the debugger can connect to it that URL is actually going to be in properties launch settings like I said this is the location where we have the URL so what I'm going to do is just copy I'm going to copy that URL from my HTTP profile into launch the Json and I'm going to paste it right here okay so make sure that you have here the exact URL that you have in logitech.json so that your device session can happen properly and then just one more set that I'm going to Define here and this is totally optional is the browser that I'm going to be using so in my case I do want to use Edge so I'm going to pick edge here if you want to use a chrome feel free to choose from your case in both cases things should work just fine okay so I'm going to save these files so Ctrl s just to save and now let's verify that we can actually debug this application right and for that what I'm going to do is go into brand.ts and I'm going to place a breakpoint let's say in the like I said this is the first line that should execute so this should confirm that we can debug the application now how do we kick off the debugging you can do it a couple of ways if you look at the activity bar on the left side uh we have this icon over here that that kicks off the debug view so I'm going to click on that and if you expand this a bit you're going to see that there's a drop down here that shows all of the debugging configurations that have been defined so if you saw in logic Json we Define it the name launch on the box Standalone blazer with assembly and that's going to be showing up over here launching the Box Standalone with real assembly app so that is the debugging configuration that you can use and you can have you could have more than one or here but for now just having that one is good enough and so at this point I'm just going to go ahead and click on this play button here to start debugging and notice that you can also just do F5 if you want it you don't have to click on that you can do A5 but let's just click on this on that one for now and let's see what happens so as you can see the debugging session has started and right here here's my browser so it is kind of stopped right there because it is waiting because of the debug breakpoint right here as you can see we hit the breakpoint right at this point you can go ahead and start going line by line if you wanted to let's do uh step over yeah F10 as you can see you can go one by one across each of these lines so you're debugging directly in the client via Visual Studio code right you can see even inspect things here right so you can see the status Builder object if here if you wanted to debugging seems to be working properly I'll just click play and that will go ahead and finish loading the application in my browser right there so debug is working properly everything is working properly and so that that is great for now let's just go ahead and close the browser and let's go ahead and also stop the debugging session and like I said anytime you want you just hit that five and that will allow you to go ahead and start debugging now like I said we're not going to be using all of the assets or initial assets that didn't play generated for us so at this point what I like to do is just to do a little bit of cleanup to have kind of Almost Empty slate where we can start introducing the actual layout of our application so what I want to do is just start closing a few things here I'll go back into the Explorer View and I'll collaps this and I'm going to be removing anything that we're not going to be using across this course so I'll go into the pages folder and we're not going to be using either the counter or the fetch data razor components so I'll just click delete on these two so those yeah coders are giving we'll stick with the index advancer page and then we're going to be going into shared where we're going to get rid of nav menu not menu that razer.css and sorry prompt we're not going to be using those so recycle bin and then also in WWE root there's this sample data folder here which all it has is just the Json file that is going to use it for the fetch data sample but we don't need that really so we're just going to right click on Sample data and just delete that all right so that's gone and now that we did that we need to fix just a couple of things here to make sure that they keep compiling property so if we go into index.tracer over here of course this server prompt element does not exist anymore because we just deleted it so we're going to delete this part from here now it is gone okay I'm going to save this file the next thing that we want to fix is insert main layout.racer so this one right now is using element sub we also don't have and that's going to be our nav menu over there and so we're not going to be using that one so I'm just going to clean up things like this so now we only have this main element and we also not we're not going to be using this top row not needed we'll stick to this Justice article element and the body and that's all we're going to be showing up okay so if you save this and we run the application again it's not going to do Ctrl J and I'm going to be switching into my terminal so let me go ahead and I'll do these three dots here to go to terminal I'll delete this terminal here and I'll just dot net run again okay I'll go back into my page that I was running before and I'll go to home and I'll just refresh the whole page and this is what you should be seeing now right we just have Hello World welcome to your new app but device is just pretty much empty so this is going to be our initial slate where we're going to be kind of painting our a pretty awesome application let's now go back into Visual Studio code and let's start working on this index page so let me minimize this and then I'm going to stop executing my application by doing Ctrl C in the terminal this Ctrl c will stop then complete the application and I'm going to close the terminal I'm going to also close main layout.racer I'll collapse this and we're going to be focusing on index.racer let me click left that so we can see better so first let's fix both the page title and the H1 here so this should read As game got a look okay these they are getting catalog page let's do the same thing for each one so page title is for the browser Tab and then game game catalog is going to be just the title that shows at the top of the page the main thing that we want to show in this index page is the list of games right the list of games in the game catalog so to do that what we're going to do is just Implement a very simple HTML page so if you know your HTML you will know that that is that can be done via a simple table element here right so it's going to be a table element and then what we want to do here is first specify the headers for our table so we will do that VLT D hat element here okay and then we're going to specify elements for the following properties it's going to be for the th day ID and then perhaps I'll copy these a few times let me just leave the space there we're going to be needing perhaps five more of this like that and so we're going to be showing the ID the name the general the price and the release date for our games okay we're going to be leaving just one more for the actions that later on the user is going to take in these games okay so that's going to be the header of the table and then we're going to specify another section here for the body right so the the body section we will fill this device in a moment but for now we have a basic layout for our table so let's see how this goes I'm just going to open my terminal via Contour J and then I'll do again.net run and we're going to go back into the page over here let's refresh this and see how it looks like yeah I suspected so we have now let's see again catalog in the page title over there in the tab we have again catalog as our title for this page as an H1 and then we have the different headers in there so this is looking as expected okay so let's go back to visual studio code and I'll do Ctrl C and I'll close this now in order to show any actual data in this page we will have to Define what we know as a model this is going to be the model class that represents our games right and we are going to be showing a list of these games in the page so here's where we're going to start writing some C sharp to come up with that list of games so we're going to be opening our Explorer section here and we're going to do is just create a brand new folder just at the root in game store.line I'll do right click and we're going to create a new folder that we're going to be calling models and inside models we're going to create a brand new class and we'll say right click new c-sharp class and this class is going to be named just game as you can see we got our namespace game store.cliented models that corresponds to the name of the directory and the name of our models directory and then we have our class here now one thing I'd like to do is to change this namespace from this shape into simplified version of that so if you just click you see there's a light bulb over here so you can click on that one and then you can convert Disney space into what we know as a file scope of namespace so if you just click on that you're going to see that now you have the namespace here ending with semicolon and now the class I mean there's no more curly braces surrounding this class here so that's kind of a different way of laying out your c-sharp class over here and just saves a little bit of space so then you don't have to scroll to the right a few spaces so if I do Ctrl C you'll see how it looked before right with these curly braces over there then I'll do Ctrl Y and then we'll save a little bit space here right so it's optional but I think it saves a little bit of space in your c-sharp class let's Now define the properties of our game class here this is going to be the same properties that we just saw in the HTML table so we're going to do prop and then you if you use to prop and then you use tab that's going to Auto populate a C sharp property here and then all we have to do is just fill in the details so in this case it's going to be an integer and this is going to be the ID that you needed the file for this property and then we will keep doing this a few times to populate all of the properties so I'll just type prop tap and then this is going to be string name you will see that at this point a bit of a highlight here right so what does this mean this is really one of the different set of warnings that are trying to help you to make sure that you don't run into some common issues later on so what this is saying is that this name property since it is a string it is supposed to have some value either when we declare a property or in the Constructor of this class here since we have not specified any value for this string it is warning us saying hey you actually may run into a new reference issue later on because you have not specified an initial value for this name property here so one way to fix this would be to say that this course equals let's say trigger empty and so that will give it the default value of an empty string to that string over there if you wanted to and then another way to to fix it would be to also Define a Constructor for this class here but we're not going to be needing a Constructor for this yet another way that we can do this and which is the way that we're going to be following in this course is to specify that this is going to be required property so we will just type here required by doing this we are specifying that whoever creates an instance of this class must specify a value for the main property right either be a Constructor or via setting it directly the parameters when the class is constructed at that point the name property has to be specified otherwise you cannot move forward and that will generate even a compilation errating that is one way that you can handle this situation where you have some properties like stream properties that should have some value when after the construction and so we're going to be using this a few times here so let's move on with the next property so I'll say prop it's going to be string General right so it's got the same thing so let's do required that will satisfy the constraint and then let's move on to prop decimal price so it's going to be our price and I think yeah decimal should be a good data type for something like a price and then lastly we have our daytime daytime release date right so this is the day when the game was released let's clean up a little bit our file here you see we have a bunch of nice spaces at the top that we're not quite using to clean up that you can click on this light bulb over here and you can use a select this remove and decided usings now a quick shortcut here that I'll be using all over the place as you're going to see instead of using the the light bulb what I'll just do is select the section what I'm going to be working on and I'll do just Ctrl Dot and that's going to pop up all of these in nice helpers as you can see here so now just click on remove necessary usings and that's going to click number file and at this point one more productivity feature that I can offer you here to avoid having to save every single time we change a file is to use this feature that's over here in file auto save right here right if you enable that it means that anytime you change your files there will be automatically saved as you start creating them right so some people don't like it to use it but I find it fairly helpful so that you just don't forget to save files and later on just regret so yeah we'll be using that in this course now since we have this model class ready how do we use it right how to use it to render our table of games in the index phase so let's go back into the index page and so the nice thing about eraser pages is that you can combine both HTML and c-sharp over here in this case what I'd like to do is to Define for now a static list of games in this table and to do that we're going to be defining a code section for these files so if you go down just under table here we're going to be defining a code section and this is going to be a section where you can go ahead and freely add your c-sharp code okay what we can do is just Define here our private array array of game objects it's going to be called games right so it's going to be a new array and we're going to open and close curly braces okay like that first thing here is going to be make sure that we are using the namespace needed for being able to use our game class so as you can see it cannot find the game class right now because we have not imported the namespace where this leaves so this leaves in the game store that client that models namespace so let's click over here and then as you can see you can make use of this action here that says add using model so click on that and with that you'll see that at the top there's a new statement here at using models that means that we are now able to use any of the classes that have been defined in the model's name space right so by default this page is going to be in the game store.clining Space so we need to append the missing part of that which is models right so we'll be using models over there and that will give us access to the game class that we have over here now to Define our initial array of games we're going to just say here new game and then we will initialize the properties of this game class right away so let's define an ID so let's say this is going to be id1 let's define the name so here we're just going to start coming up with a few game names so and I'll pick a few of my favorites here so this is going to be strict fighter 2. all right one of my favorite favorite games of all time then it's going to be the general is going to be fighting okay and then the price is going to be 19.99 and then the release date for this game let's say it's going to be a new daytime and then for the year we're going to be using 1991. this it's been a while since this game was released it and it's going to be February 1. and as you can see we're getting a little bit of warning here about our price down here and this is because uh there are multiple numeral numeric types where a number that has decimal places it could be converted into that this could be either a double a float a decimal any of these ones so the compiler doesn't like the fact that we have not specified what exactly this this number is going to be even when the the property we know it is a decimal so you have to be explicit here so in order to do that what you can do is just append an m a suffix over there and that should clearly tell the compiler that we do want to be using a decimal for this one and so I'll just also fix this issue here by adding a semicolon over there and that should fix things now code formatting for C sharp code inside of a razor file can be not really perfect sometimes right so if I do Ctrl s to save this file right now you're going to see that the format is going to be screwed up a little bit right so I'll do Ctrl C to undo this and so we will let the auto save feature just keep saving the file for us and we'll so that we can try to keep this in a nice foreign file right and so that's not going to be an issue anymore right let's keep going and let's add a couple of more games right so now we have this one game and then let's I'll do just coma and then I'll add one more here and comma and one more there and so for our second game we're going to go with another one of my favorites Final Fantasy 14 and so this is going to be a role-playing game role playing this one is going to cost 59.99 and the release date of this one it was in 2010 September 30. and lastly for the last game we're going to go of course this should be ID number two and then this last one is going to be ID number three for this last one we're going to go with sports so it's going to be FIFA FIFA 23 and then it's going to be Sports this is kind of a more expensive game so it's going to be 69.99 and then lastly release date for this one was in 2022 in September 27. and with that we have our initial set of static games to prepare so yes so this is a static list of games and keep in mind that we will be iterating many times over these examples until we reach the final version of this right so this is not going to be the final way that we're going to be using our data you're going to see this evolve in many ways across this course so now that we have this array created how do we use it in the table so let's go now up over here and I'm going to also collapse these for now what we can do is just focus in this tea body section over here let me actually scroll down so t-body we can open another C sharp section over here to iterate over the games array that we have array so like I said we can mix C sharp with HTML with this razor syntax so what we can do now is just say over here for each and I'll do tap and that's going to open up after each section here right so I just did tap after typing for each and then what we can say is that's going to be for each VAR game in in the collection so what's going to be the collection The Collection is arcade so we can just say games so here is where we can go ahead and display our games so as you know for each row in the table we need a TR right so it's going to be TR and then for this TR we're going to be defining these TD elements for each thing that we want to display here I'm just going to be actually a few of these so let me add five more of these there and for the first one we're going to be using our game dot ID so this is ID property of the game element okay so notice that anytime we want to reach out to one of these C sharp properties we just introduce an ad symbol right and then we specify whatever we want to do in in terms of C sharp right so that is a resource index and let's go into for the next one is going to be gain that name then we have game dot generate and then game Dot price and finally game dot release date just by doing that we should be able to see now a living table in our page so what I'm going to do is again do Ctrl J and I'll do dot net run over here and then let's switch again back into our page right here we'll do a quick refresh and as you can see now we are able to see some data in the page right it doesn't look pretty just yet but it has our three games right static games that are coming from a mix of c-sharp and HTML now one thing that we can fix very quickly here is the way that we're showing and the dates right so because we're not quite expecting to see this much I mean the release date is going to be the date part of this but the time part is not quite needed here who cares about the time of the release so how can we fix that quickly so if you go back into our C sharp and I'll do Ctrl C to stop this close terminal what you have to do is just do a little bit of normal C sharp formatting right so we will do dot to string and then here we'll be using a standard way of formatting dates so what we can do here is say that we want to show the month and then the day and then the year and yeah that should do it so I'll do Ctrl J let's start this again and let's go back to the page I'll refresh this as you can see now we have just a date portion right so the date portion of our dates there's no more a time appended over there now this is fine but it still doesn't look really good right so we should be able to display this in a much better way to do that we could either come up with our own CSS right the style sheets to fix this but much better way is to take advantage of the bootstrap framework that has already been included for us in this via the Blazer template so if you go back to visual studio code and I'll do Ctrl C and I'll close the terminal and we go back to Explorer remember that in WWE root over here in CSS we do have this bootstrap folder here right which includes these two files and what this is is the entire bootstrap UI framework well styling framework has been included for us over here and if you want to know more about this UI starting framework what you want to do is just go to the getbootstrap.com page over here we're going to be able to find all the information about the different ways to use bootstrap in your application I like bootstrap very much it is not the only way or not the only installing framework there are several others but this is the one that's included for you in the Blazer template and so we might as well just take advantage of it right and so in this case we want to do is to know a better ways to render our table so to do that we're going to do is just go let's scroll down we can go into read the docs and this should give you all the information that you need to apply different elements in the comfort bootstrap now if you go back quickly into vs code one thing that we should notice is what is the version of bootstrap that we're using if you look at this very first line over here you're going to notice that we're using version 5.1 just make sure that you are focusing on on that version as you brought this documentation so I'll go into the right side over here it says 5.3 that's the last version that has been released at the time that I'm recording this so just switch that into 5.1.3 in this case and that will set us exactly in the version that we are interested in right now and so yeah this has plenty of documentation here that you may want to read but in this case what we're interested in is in tables so for that you want to go into content and then tables and if you go across this page you are going to be finding many many details about how to format your tables and there's a lot of details here there's a lot of variants and ways that you can lay out your tables according to your taste right and so I'm not going to go across this commentation in detail but I just wanted to let you know that this accommendation is here I use it a lot so make sure that you use it as needed what we're going to do is just take advantage of several of the stats have been declared over here so let me go back into vs code and I'll close this and now close that let's scroll up up a little bit over here until we can see the table element and so we are going to give Styles into the table right based on bootstrap so that we'll just say class and then the first style we're going to apply here is the table style but then let's also apply a few other ones it's going to be table striped we're going to be using also table ordered and table hover okay so it will give us some nice style for the table and let's also customize the header the header of the table for the head so we're going to say this is going to be class is going to be table dark that's a nice one to have and with that let's go ahead and reroute this so Ctrl J to open terminal.net run and let's go back into our page and let's see what we got so I'll go ahead and refresh this and as you can see right away this turns into a much better looking table right that it even changes a little bit as we hover into each of the rows so this is a much pleasing way of looking at your table so again remember that you are able to do this because you're using the bootstrap framework that of course it is over here but also it is imported in index.html and collapses for a moment if over to index notice that it has been imported already for you right if you started from a place where this was not imported already you can just go ahead and import it by yourself so I'll close that and if you go back into our uh well let me actually just do Ctrl J to show that yeah we're still running terminal over there and so if we are back here in the page um so at this point we do have our table being better in there and so what I'd like to do now is to figure out a way to create another piece of UI so that we can also add elements here so so we can create a new games in here it's not just list them and to do that of course we'll have to come up with a brand new Razer file right so if we just go back to visual studio code and I'll do Ctrl C here and close this in order to create or edit page we'll have to come up with a brand new eraser file but also the problem that we'll have with that is that these analytical apps this right now we have our data is hard-coded in this page in index eraser and if we come up with a brand new page or a brand new component it will not have access to this array of games over here so we want to do is to introduce a brand new class that is going to take care of holding the data for now and that we can reuse across multiple of these razor components to do that let's go now into our Explorer view over here and let's uh collapse few things like that what we want to do is just right click a in-game store.line we will say new C sharp it's going to be a class and this class is going to be named gain client okay just game client over there okay and so like I said the purpose of this class is going to be to centralize the way that we manage the data for our application for now and you will see how this evolves over time as accuracy scores but first let's start by just fixing the same space so I'll just do control Dot so that we convert this into a fast Opening space just like that so that's a writing space also I'm going to clean up the at the top here I'll do a control Dot and then remove from the society it usings and in this class the first thing that we're going to do is to grab that array that we have defined it here these private games a array we are going to grab it so I'll just go ahead and cut it from here and I'll take it into our game client so I'm just going to go ahead and paste it over here right there and of course this class is still not aware of the dating space where we have our game class so I'll just click on game I'll do Ctrl Dot and then it will say using Game store.line.models do that and that will allow us to reuse the think space since this class is going to take error of allowing us to just retrieve the array of games or the list of games but also modify the list as we create new items out of data items or delete items we will not keep using a simple array here but we'll switch into something else that can be more Dynamic and that is going to be actually a list so we're going to transform this into a list of games instead of having this what we're going to do is instead of that we will say just list of game right so it's still a is called games but it's going to be a list of game and then instead of a new array it's going to be just new like this now let's see if we can format this a little bit better I'm just going to select this like that okay yeah that looks better and then the thing is that for now we want our different racer components to have a very easy way to reuse this game's collection here and so for that we're not going to be asking them to create instances of the gamecline but instead we are going to just turn this into a static class for now that it can use it across any other razor components to do that we're going to video specifying that this class is going to be static right so study class game client and this array here is going to be also a static list of games so that way our components don't have to be creating instances of this and because if they did that each component will have their own instance at their own list of games and that's not what we want for now right so by doing static every single component will be reusing the same list of games and again like I said this is going to evolve over time so don't worry about the way that we're doing things for now so now we have this list of games we can go ahead and Define a method to be able to retrieve the games from the different components because notice that this is uh this right now it is a private games array or games list so we need some sort of a method to be able to retrieve them and by the way there is a little bit of a warning here stating that this field should leave it only which makes sense because we are initializing this right here as part of the construction of the study class so to formalize that what we can do is just say that it's going to be a private static read only list okay which means that this this after constructing this list nobody else is going to assign a new value to this games object here I mean we can we can add remove elements from the from the list but we cannot set a new value for the game's variable itself now let's roll down here and what we're going to do is just to add a little bit of a method that we're going to name so let's let's go down here this is going to be a public method it's going to be also static and then this is going to retrieve or provide us with a game array is going to be get games all right and we'll say return games dot two array okay so our list is turned into array which is the array that the components are going to be expecting so now that we have this class already we can go ahead and start using it across the first component which is index eraser so let's go back over here insta racer and then of course we got red completely of the gains array here and the yeah the page is complaining because we don't have a game survey anymore so what I'm going to do is let me just do Ctrl C here to get back to this list but we're not going to be defining the array explicitly like that anymore so I remove most of this and what we're going to say is that we will Define the variable there but we will be providing a value for it in a different way now since we will not be initializing this variable in Constructor anymore we are back into this warning that says that yeah I mean that's okay but you should have some non-node value for this variable as part of the Constructor right but it is actually okay to initialize this with no because there will be a method that will invoke in later on to populate the value so instead of having it this being a game array we will turn this into a nullable array we can do that by using the question mark right here so that way we are a bit explicit saying that yes so it is okay to have a null in in games when the page is constructed but we have to make sure that we of course we initialize this with some value at some point and to do that what we're going to do is just scroll down a little bit so I'll do this and we're going to start taking advantage of some of the built-in methods of laser so that allow you to get into the life cycle of the page itself and that first method we're going to be using is called uninitialize it so you can type here rotate it override and the method that we want to specify here is void on on initialize it right there and so perhaps yeah we can fix this a little bit like that uninitialize it so this is the method that's going to be invoke it at the very start of the life cycle of this component so just after construction and after this component has received any parameters if any then this method will automatically be invoked by the Blazer runtime so this is a great time for us to go ahead and initialize array so in this case what we can do is just say games equals game client dot get games right so that's the get games method that we just implemented over here in game games client and since it's a static method we can invoke it just like this without having to construct an instance of game client so that would do it now let's scroll up a little bit and as you can see there is also a little bit of a warning over here as you can see it says yeah the reference of a possibly node reference so again the compiler is really trying to help us saying hey you could run into a null reference over here which makes sense because this table might be rendered at a time where we have not Jet and getting a chance to populate these games array and since we find that it is communicable so that's a possibility so we can do at this point is to do a little bit of I mean help this page a little bit in terms of checking first if we do have a situation where the game's array is null and then display something else well we wait for the a component to be rendered so we can do is just go up here just before the table declaration we'll do this in the following we will say if gains is null right so if it is no we will do something so that something could be Joseph Plain a simple loading text right so we'll add a paragraph here we will do em and then we will say loading okay just like that and so that was going to happen if games is known but otherwise so I come with else otherwise we'll go ahead and if display our table so let me just grab the entire table got that and paste it here okay the table like that and so things should look like this now so if games is no then do this and then else do the following and notice that just by doing this the compiler understands that now it is not really possible to run into this situation where games is not right here so if we reach this this section here this line 24 where we try to use against array it must have an instance it cannot be null because we already checked it for that over there and so yeah the compiler is smart in the sense that it can detect that and then the warnings just go away so let's make sure that this is still working so I'll do Ctrl J and we will do.net run once again let's go back to our page over here and now refresh this and as you can see things are loading just fine so really no changes really and behavior it's the same thing but now the data is coming from our game client which will open the possibility to reuse the data in other Razer components so now let's go back to visual studio code I'll do Ctrl C and I'll close this so now it is time to create this brand new page where we're going to be creating and later editing our games so to do that let's go back into our Explorer and what we want to do is just to place a brand new Razer component over here so at this time we can either create that manually over there or we can take advantage of the dot NC live once again to create that razor component so let's let's write that second option so I'll do Ctrl J and now clean this a little bit and let me also put things like this what we want to do is the following so all you have to do is make this bigger dotnet new and what you want to type here is just racer component and then let's give you the name the name is going to be edit game we'll use it for both for creation and edition of games and then for the output directory that's going to be our Pages directory notice we are still in the game store.client directory so this should go into the subdirectory called pages so I'll hit enter and as you can see we now have an edit game Razer component right there okay so let's close terminal and let's go into edit game and we are going to be focusing in this file for for now so yeah let me close kingcline and game for now what we want to do is well just like with the other page let's start with the basics we can Define here both page title right the page teller is going to be for now it's just going to be new game we'll see how to modify this dynamically later on and then we will have an H1 which is going to be the title of our overall section which is the game catalog and then for H3 is going to just say this is going to be a new game right this is the kind of a title of this page now one more thing that we have not used before is the actually kind of the routing of this page let's see if we have we're using that yeah we are actually using well it was implicit in the first case but notice that if we go back into index eraser we have this declaration of page over there and then this uh this kind of uh forward slash so this is going to be the route of the page right that's how in the client the browser can reach this component we have to do something very similar for edit game to specify how is that we're going to reach this page from the client so let's go over here and let's say this add a page declaration and let's say that to reach this page what you have to do is just say slash game and that is how you're going to be able to reach this page we will also modify this a little bit later on but for now that will be enough to be able to reach this page on the client now it is time to define the shape or the content I guess for our page so to do that what we're going to do is again we're going to be using a little bit of the styles that come with bootstrap to give it a nice layout to this page what we want to do is to start this kind of a form where we can input all the details of the brand new game so just here just under new game and before our code section over there we're going to define a div okay so this is a div that is going to have a class of row okay so row if one of the classes included with the bootstrap so again if you want to know more about any of the classes that I'm using here the CSS classes just go check the bootstrap documentation that will give you a lot of details about any of these classes but yeah so you can define a row in these rows and you can Define columns right so that's one of the layout features of bootstrap so we're going to Define here a column so it's going to be div and then it's going to be class equals and then the class is going to be like I said a column but then we don't want this column to just take over the entire width of the page these columns can have up to 12 sections in this column but we want to say is that it's going to be just we just want four sections so that it just takes kind of the left side of the page and then we're going to be using the SM modifier here so make sure that it renders nicely even in smallest spaces again you can read more about this in the gay bootstrap page now comes the interesting part here because here we're going to use a component that is called a form or an edit form that is built in as part of racer so what you can say here is just edit form what you want to do here is to specify a few things first thing is going to be the model because there has to be some class that we're going to bind into this form here to show its data right and then to capture that data and so but before we can Define that model we have to Define actually what is going to be that class so now it's time to go very briefly into the code section over here and we'll have to Define that class represents the model so I'm just going to say private game and we just game game this is going to be equals and of course we have not imported the writing space for this just yet I'll just go into game here I'll say control Dot and we will say using models right there so now we can take advantage of the game type here so this is going to be new and then we're going to provide some initial values to this we cannot just leave it as null here because that's going to cause trouble in in the case of this page here so we will just going to say that we're going to say the name is string.empty then General is also going to be string.empting the release date let's say that by default we're going to be using date time dot UTC now which you see now and that should be good enough for our initial game here so this is going to be like I said the object that's going to be bound to the form that we're going to edit so we're just initializing the form with kind of anti-values and then we'll let the user populate the values that he wants to use but now that we have defined this variable we are able to provide a model for our edit form so now you can go into this form and just say model is going to be at game and now that we have access to that we can Define the different input elements for our form for E of the elements we're going to Define here another div so this is going to be first let's put a label here this is going to be a label that's going to be for our name element and the class is going to be form label and the actual thing that we want to display with this label is going to be name now where is that name identify that name input that's going to be and input text like this so again this is another razor component that allows you to input some text right and so the ID like we said this is going to if the label is for name so name is what we want to use right here right so the ID is going to be named and then like I said we have to bind this input element into the game a model that we're using so at this point what you want to use is this bind directive over here bind actually bind value and then you're going to say that's going to be equals to game dot name that means that any values that user enters into this input text is going they're going to land into the game variable that we have defined over here and that is connected as the model for this form and then the next thing is going to be to Define some class some class for this input element so the class is going to be form control all right and then we can just close that input text that's how you can define a little bit of one input for our game and then one more thing that we might want to do is just to add a little bit of spacing between the elements because we're going to be creating a few of these so let's add a class over here that is going to be MP3 that means margin bottom is going to be three so three spaces after this one here and so just to say time I'm going to be copying this one and I'll add I guess one two and three copies of that one for the other elements that we want to input here so the second one is going to be the piano right like that so we'll change that into here which binds to generate in the game variable but yeah that's fine so this is another input text then the next one let's keep going the next one is going to be for our price so let's name this one so prices technology right so input is going to rename it price we will say this is price but then the type of the input element is not going to be input text I mean we could do text here but we can also take advantage of other types of elements that are better suited but for this data type in this case what we want to use here is input number right and you'll see how this renders differently than the other one so this is input number we will change that in the right side also so this is for the price so we'll say game dot price so that defines our number and the last one is going to be our release date so release date I'm going to go here and here and then this is going to be release date release date again we could show this as a simple input text but since this is a date we can also take advantage of another type which is the input date so we'll change input text into input date right here and then I'll change that also on the right side so that turns it into an input that's going to be able to show a nice date and picker for the date and so with that I think we should be able to render this this component in the browser and see just how it looks so far it cannot do much but at least we should be able to render it so let's go ahead and do Ctrl J we will do again.net run and let's see what we get of course we don't have a way in the browser to just navigate directly from the home into this page so let's just remember that this is located at slash game right so let's go to the browser now so here we are that we want to do is just say slash game right enter and now as you can see we are able to render our brand new form to input gain right and notice that it does have the idea what this is file for the titles over there and then we have one element for each of the types so notice that we have these are the input text for name and generate but for the price we have something a little bit different let's initialization the value with zero but then you can do this thing where you can take the values up or down as needed right for the price so it's a better input that's what the input number will show for us and then notice that for release date this also shows this nice date and picker right that you can use to select a different date also as needed that is nice but then of course this form is not going to be doing much until we actually take the inputs of the user and add a brand new game into our games list so let's go back into vs code the Ctrl C again and back here what we want to do now is to start taking advantage of our game client to be able to add elements to the list of games so to do that let's go back into Explorer and let's go back into our game clients class over here not classes again and what we're going to do is just to add one new method that is going to allow us to add elements into the list of games so I'll just scroll down and now add a brand new method it's going to be public static void at game and we're going to receive the game over here right and all we have to do at this point is say games dot add the game so that method will allow us to add a game into our existing list of games now where are we going to be calling this method from the edit page so let's go to editgame.racer and of course that's going to happen in the code section of edit game and we want to do now is to define a method that's going to be attached to the onsub bit method of our edit form so let's first Define that method over here so we're going to be naming this private void it's going to be handle submit and so in this method all we're going to do is just say game client dot add game which is a brand new method and that's going to be the current game that we are using in this form now how do we invoke these handle submit method so we want to do is just scroll up into the definition of our form so right here we Define the form and the model we want to attach something to the on submit event ISO on submit we will be using this handle submit method that we just created and of course in order to be able to submit this and to trigger the submission we need some sort of a button right in the form so that we can submit the element just down here before edit form we are going to add a simple button like this which is going to be off type submit and the text is going to say just save we should also give it a little bit of a style here so let's do class is going to be button and this is going to be button primary once again this is Task come from bootstrap and so uh the documentation page will have more info about what you can do with these buildings yeah with this we should be able to go ahead and start submitting the data that has been entered by your users and this time what we're going to do is just instead of just running the application we're going to set up a debugging session just verify that the element is actually getting added to the collection right what I'm going to do is just put a breakpoint in this case in line 42 which is where the game should be added right the double layers confirm that handles a bit is beating both what we're going to do now is just hit F5 so I'll just hit F5 here just going to kick off our debugging session and of course we still have the breakpoint that we had in problem.cs so I'm going to remove that breakpoint and hit play so that we keep going and we can see the list of games here right so just before I'm going to do slash game to go into our create game a page you can see we have the create game APA here and so let's just add some random data right so and then the price is going to be let's say 33 let's just leave the default release date and then what I want to verify is that when I click on Save we should hit that handle soup yeah you can see we hit handle submit we are right here and what I'm going to do is just step into actually with this one step into or f11 into add game right here and then I will be using now my F10 in my box just to keep going actually let's let's just keep going this way so I'll say yes stop over and then step over and now the game should be part of our games collection and we can quickly inspect that by looking at games over here see we have now four elements right which is expected for elements where the last one should be our random game yeah it is right there things are working as expected so I'll just click play of course if we go back to the browser what we're going to see is that nothing is really happening here right for the point of view of the user and that makes sense because we have not yet told a Blazer that what is that we want to do after we add or submit this new data into the page so what we want to do now is to instruct Blazer that what we want to do is just to go back into our home page to see the new game being added into the home page so let's see how to do that what we're going to do now is just let's just close the browser and let's stop this debugging session completely and we want to go back into edit game.racer and I'll collapse this for a moment remove this breakpoint and just after up game what we can do is use another Blazer component called the navigation manager in order to navigate to another page after something happens in our code now in order to use the navigation manager you first have to do what we know as injecting that element into the page and you can do that all the way into the top just after using models what you can say here is inject and here you can declare the type of what you want to inject here which is navigation manager in this case and then we'll just say navigation manager what does that mean I mean inject is really part of it refers to a technique that's called dependency injection and that what it does is that it allows you to insert instances of types in this case into our Blazer component but these are instances that have been registered somewhere else usually in the initialization of the application they have been registered in let's say into into what we know as a service container so and you can think of that as a container of different types of classes that can be reused across the entire lifetime of the application and we'll talk more about bench injection later on but for now so just know that the navigation manager is one of the standard types that are always registered for you as the Blazer application is bootstrapped as it initializes and you can always go ahead and inject an instance on navigation manager over here so notice that because of this we don't have to say a navigation manager navigation manager equals new navigation manager we don't have to do that in our code I will have to construct it because the runtime is already doing that for us when the application initializes and all we have to do is just request an instance of it and it will be available for us so there are a few types that are available like this from Blazer and this is a nice and great facility that we can use so now we have an instance of navigation manager we can now go down again into our handle submit method and just after adding the game what we can say is just navigation manager dot navigate to and where do we want to navigate well we just want to go back into the home page and that home page is in this root location right and yeah that should do it right so let's go back into our page so at this time I'm going to do these three dots to go into terminal and I'll just do dot net run once again and let's go back into the page that we had opened before this one here and let's just go back to the home for a moment let's see what we're having home yeah yeah we have these three games over there so let's go back now into slash game this time let's I enter again just some random game so Random game and yen is going to be ports some price in there and then we'll keep that default release date so now I'll hit on Save I noticed that we're immediately taken back into the home page and our game is showing up right here so that is great it's great to have the random game added to at least here but as you may have noticed we don't have an ID for this game and so that's not really a big deal at this time but we can fix that very quickly very easily by filling out a way to add an unique identifier to each subsequent game here so to fix that quickly what we can do is just let's go back into the code and I'll stop my server again I'll close that and we're going to go into our game client and in our add game function the one that we just created to add games we're going to specify what is going to be the unique identifier of this brand new game and for to keep things simple we'll just say that the entire is going to be one plus a number on top of the biggest number that we have so far for IDs in our Games Collection so we're going to do now is just say game dot ID is going to be from our games collection we will use the max function right so this is part of a series of extensions that you can use on c-sharp to be able to manipulate your data right so we'll say use dot Max and so we will specify kind of a Lambda function here where we're going to say that we want the Max from game dot ID right so from The Collection just get the max aid and then at one all right so that's as simple as that so whatever the max it is if we want to add just one more with that let's go back to the browser so I'll do the net run once again in my terminal back into my browser so let's refresh this page we will not have the random game anymore we are going to navigate into game we will add again so Random is going to be Sports price 22 and then I'll hit save and now as you can see we now have a brand new number this four because the max was three plus one it is four right so that is nice but it will also be good to have a way to go into that edit page without having to deal a mess with the browser and navigation bar right so at this point what we want to have is some a button in this page that can take us directly into that page to create new games so let's go back to visual studio code over here and let's head down into uh let me just close this program and let's go into index address we're going to be doing something similar to what we did in edit game right so we're going to add a button and we're going to use a navigation manager to go to that page so first thing is going to be to inject once again the navigation manager at the top so we'll just copy that line that we have in edit game we're going to copy this and we're going to paste it over here paste so now we have a navigation manager available in index.tracer the next thing is that at the very top of the page we're going to display this button that we're going to be using for navigating to the edit page so let's just Define a simple div here okay which is going to be a of class row to define a brand new row and also let's specify mb4 so that there's a little bit of spacing between this row and what comes after which is the gains table and then let's define another div here which is going to be off class of course column so you always have rows and then columns so it's going to be a column is going to be of six spaces we'll say and then let's also use the SM and modify here so it works nice in smaller resolutions here is where we can specify the actual button which is going to have it's just going to say new game and then let's justify that this is going to be the type is going to be burden and the class is going to be once again BTN BTN primary now of course we need to do something with this building right when it clicked it has to execute some code so let's go ahead and Define that code as a function in our code section just down here after uninitialize it we're going to define a new method that's going to be private void create game here we're just going to say navigation manager dot navigate to and then we're going to go into slash game which as you remember slash game is the route that we have defined for our edit game page right so we're going to navigate into slash game and then of course we have to invoke this function from that button so we'll go again once again up into the button declaration and we're going to say on click equals create game it's a function we just created and that should be it really for what we want to do so let's go ahead and run the application once again let's go back into the browser let's refresh this and sure enough we now have our new game button showing up right there and if we click on it we are taking into the new game page which is what we wanted so so this is great and then one more is slight detail that we should include in this edit game here now that we are here it's just a cancel button right so because what if the user doesn't want to actually save it just want to go back into the home page we should have some cancel building over here and that's very straightforward to add actually so let's go back here let's stop the again the server let's go back into edit game and what we're going to do is first Define what's going to be the behavior when the cancer button is clicked so what we want to do is just really go back again to the home page so we're going to define a method here let me scroll down a little bit more it's going to be just private void cancel and all we're going to do is just do the same navigation that we do with handles open but this time we're not going to be saving anything that the user has been typing in the form right we just navigate back into home and now where we're going to invoke this method from so for that one we want to add a brand new button so just after the Declaration of our supply button we're going to declare yet another button so I'll just copy this actually let's copy that and let's add a brand new line here paste now this button is not going to be of type submit it's going to be of type just button right so this you can only have one submit button in the form but the styling is also going to change so it's not going to be that button primary is going to be button secondary the text is going to read as cancel right so cancel and then we want to do something at the on click event here so we will say at on click what we want to do is to invoke they cancel a method that we just created let's see how this behaves let's again let's run the application and then let's go back here we will just refresh the page and as you can see we now have a cancel button right here that's our console building and if I click on that one it will take us back into the home page which is what we want now let's go back into our brand new page for creating a game and one thing that we're missing still here is for a way for users to not just have to enter the genre like this right what we want is to have a way for them to select the Android from a pre-selected I mean pre-made list of genders let's see how we can modify this UI here so that this turns from a text box into a selection a drop down selection over here let's go back into Visual Studio code and I'll stop this and I'll close that and let's scroll up a little bit until we see the section where we have the agenda which is this section over here right so what we're going to do is to change things a little bit so that instead of using an input text element over here we're going to change this into an input select and we will change that there so this is an input select now which means that we can add options to it so that user can select from them so but we also we want to change this from for control into form select and then we'll open a section here and here we can specify all of those options so all you have to do is really say option and then there's going to be a value and so let's say that the first value is going to be our filing category right so it's going to be fighting so that's going to be the value and the actual text that displays when somebody selects that value is going to be the same thing right so fighting and so just like this we can introduce a bunch of other options for the different genders that we're going to support for our games so I'm going to add yeah I think there's so much maybe three more options and then this second one is going to be kids and family okay kids and family on the right side and then the next one is going to be racing the next one is going to be role playing and then let's actually add one more at the bottom for sports sports right there okay and that will be all of the genders that we're going to support in this UI now one more thing that we may want to add here is the default value for this because when the user just comes into the page he may have I mean he will not have selected anything just yet right so we want to specify a value for that situation so that's going to be the very first one that we're going to add here which is going to have a value of nothing it's just empty and we're going to say here select yeah right all right and that should be it so let's go ahead and run this and see how that looks so I'll just dotnet run once again and let's go back into the page over here we're going to refresh this I noticed that now we have our drill down list right there so now the user can come and select a among any of these items so in fact let me just go back let me do cancel and let's go ahead and do new game now and let's say that we want to add uh Minecraft and this is going to be now kitchen family let's say that the price is 44 and let's just keep that release date I'll hit save and as you can see now we have a Minecraft with the brand new genre of kids and family added into our collection so with that our edit form is pretty much ready but I think we're still missing something so let's go back into new game over here and notice the following what happens if I just don't enter anything here and just hit on Save right so hit save and then what happens well we now have a very empty row over here which makes no sense at all right what we're missing here is of course some sort of validation in that form to make sure that the user has to enter the data that we expect them doing and so let's see how we can add that validation in our code to make sure that this doesn't happen so let's go back into the code over here and I'll stop my server and what we're going to do instead of of starting with the edit game that Razer page over here we're going to exactly go back into our remember our model our game model over here uh what we want to do is to use validation attributes directly in this model page so that any component that binds into this into this class into the objects of this class automatically acquires those validation behaviors that should be applied for this class so for instance let's say that for the name so let's copy the name first what we want to do is to make sure that the name I mean the name has to be required right so to make sure that that happens what you can do is just add an attribute here called required like that and for that I'll do I'll just step there and I'll do control dot we want to import system componentmodel.data annotations okay and so that will import the required name space now sometimes this just doesn't work for some reason I'll try a second time and it doesn't work yeah we can do this manually so what I'll do is just I'll go to the top and then we will do using system then componentmodel.data annotations all right so it happens in time and that will make sure that the name has to be there but not just that we can require that the name has to have some some specific lens so for that you can use another data attribute here called string length so with string length you can specify that the link should not have like let's say that the name for the game should not leave more than 50 characters right that should be good enough for the game and just like we can do this we can do the same thing for the other attributes right so I'm going to copy this and then the next one that we want to require things is going to be in general so General is going to be similar it is required it doesn't have to be that long so let's say it should be just a 20 should be good enough it doesn't really matter that much anyways because the user has to select it but anyways let's make sure we have this restriction in place the next one is going to be for the price we should not have games that can cause so much maybe incredibly expensive right so let's say this is going to be a range so we are only going to allow values that go from 1 to 100 and so this will prevent the case where somebody enters a negative number or even zero for the price and the price cannot be more than 100 and that will take care of the validations by using these data annotations but we also have to do a small change in editing the razor here to make sure that the edit form itself shows some visual indicator visually later there are some validation errors here right so it's not just about making sure that the class prevents the invalid input but also to show some sort of indicator in the UI so to do that we're going to do a couple of things so first just under edit form we're going to enter here two things the first one is going to be data annotations validator okay and we can just close that there so that we get some visual indicator in any fields that don't have the appropriate values and then we also want to add a validation summary so that we get kind of um you're going to see this is a little bit of a summary of all of the validations that are not succeeding at any given time the next thing we're going to do is to do a small change in this method here on submit should not be just unsubmit so if we now want to make sure that the form cannot be submitted unless all validations are passing we want to be very specific about this so instead of using awesome bit what we're going to do is on valid submit so now on valid submit will make sure that if there's any validation errors the form will not be submitted to the server let's go ahead and see see how this goes so I'll do Ctrl J let's start application once again and let's go back into our page over here I'll just refresh to get rid of that line over there so I'll click on new game now let's see what happens if I try to just save this form now so click on Save notice this now we are being prompted for entering the values for the invalid elements right so notice that we have a red indicator across all of these three Fields because the validations are not succeeding and also we have the validation summary at the top over here that clearly tells us what is missing here now I I know that I do have the internet name here so that's going to be let's say Minecraft okay and that will satisfy the first validation but also notice that if I just enter a long name so let's say I do these Minecraft Minecraft bunch of times now this is too much too much text and now we also have the other validation there saying hey the name cannot be more than more than 50. so that is great let's let's clean that so that is satisfied we have to select a general and the generator is failing because the default value is an empty string as you remember go back here the default value for the generator is an empty string right here empty okay so that is why it is failing right now so we do have to select something so let's select it's going to be get some family so let's define the second validation and for the last one uh let's try a negative number let's see -4 that still is not going to satisfy it because it has to be between 1 and 100 okay so we can also not do 150 that's not going to work but let's say that for Minecraft good number is going to be let's say 14.99 okay that's going to be and that is a good value and so now we are able to go ahead and hit save and double it takes us over here so on this all the navigations passes you will not be able to submit that form and move on with the flow so we now have some a very nice client-side validations even way before we start talking about anything about the server side where we should also do some validations in the backend of course but with this we even avoid that trip and it's a very nice experience for the users and with that in place let's now look into what is that we will have to do in order to enable an editing experience right so now we want to change let's say the price or something about the name of the game or something else right so what I suppose we have to do in order to enable an editing experience so for that let's go back into Visual Studio code over here and I'm going to Ctrl C and stop my server and what we're going to do is first we're going to modify our game client this game client class over here so that we have a method that allows us to modify a game in the list and after doing that we're going to go back into our edit game page and we're going to see how to use it not just for creation of games but also for editing games so first thing we're going to do is to introduce a brand new function here this is going to be first a function that allows us to retrieve one of the games based on their ID create here public static gain get game and so we're going to be passing in the ID and subtly scroll down a bit over here get game and so what we're going to do is is the following we're going to say return and then from our Games Collection our games list we're going to be using the find method okay so just find and this method allows us to provide predicate right that where we can specify how is that we're going to find the game within that collection so for that we're going to be introducing kind of a Lambda function here it looks like this Lambda or Arrow function and then here for DC for each game we're going to compare the ID of the game uh with the ID that we received as a parameter so this means that for this game's collection we're going to have all the games go ahead and find and check for each of the games check their ID right and compare it with the edit that has been specified if it matches then we found our game otherwise we will not find it the thing about this this function is that as you can see it could return a null and once again we are warned by the compiler saying hey uh this could return no and you're saying that you're going to return a game object here which is not going to be nullable right so you may run into a new reference exception once again so how can we avoid that well in this case let's do something very simple we're going to say the following so if it is new and we're going to be using this this operator here double question mark which means that which means do the following if the this expression returns a null we're just going to draw an exception really so throw new Excel exception and we're going to put some simple message here that's going to say good not fine game and so that's one of the ways that you can deal with this possible new references right so this way if we don't find the game we will for sure get return exception that says could not find the game as opposed to just a simple new object that could cause trouble to the calling method and now we have this get gang method we can move forward with the next method so let me keep going down here which we're going to be calling update games so public static void of the game okay and so here we're going to be receiving the new payload or the new data for the the game that just got updated in the UI it's updated game and here we're going to do a couple of things so the first thing is going to be we need to find the game that we need to modify in the current collection of games right so we're going to say okay so again existing game is going to be we just call the get game function the one that we just created up there we say you get game and so updated game.id so it will go ahead it will invoke this method here find the game hopefully it finds it otherwise it will draw an exception and then after that we'll just update all of the properties of that game so we're going to say existinggame dot name is going to be updatedgame.name and just like that we're going to be doing the same theme for each of the properties so we do generate updated gate that General and then existinggame dot price I'll dedicate the price and then existing game dot release date is updated date okay that release date and that's it with this method this will go ahead and modify the game in our collection with the new data that has been provided by our Razer component and by the user okay so now we have to go back into our edit game page over here and we're going to be performing a few modifications so that this page can be actually used for editing a game so we'll start from the top the first thing that we have to do here is to introduce a new route for this page so that it can be loaded based on the ID of a specific game right so the idea that you go from the home page and you click on one of the games in the list and you arrive into this page but for that we need to be passing in some identifier of that game so that we can work with identifier in this page so for that we need to introduce a newly active at the very top is another page directive that's going to start with the slash game but it also has to have another piece here which is going to be the ID so that's going to be the ID and you have specified also what is going to be the type in this case the type is an in it's just a simple integer right so that will allow us to nicely navigate into this page when we do have the ID of the game 25 if not then it's going to be just a page to create a brand new now in order to receive this ID that we have this file here we need to define or what we know as a parameter into these razor components so I'm going to scroll down here as you can see into the code section and we're going to be making a few changes into this whole section so that we can work with the ID of the game that has been received so first thing we are going to declare at the top when a variable is going to be this public and and this is going to be ID and it's just going to have a getter and a Setter property it has this question mark here because it is a nullable property right it may not have a value when we just construct this razor component later on there will be a value when the parameter is set by laser but initially it just doesn't have any value now this is a parameter and to make it a parameter you do have to specify one attribute here which is called just parameter okay so that instructs the laser infrastructure that ID that was forwarded at the very top here you see this ID over here has to be has to be assigned into the parameter over here right this ID is right there the next thing is that we are not going to just Define our initial game like this anymore because we may need to actually retrieve an existing game for the edit case right so this will not make too much sense anymore at least not in the in all cases before actually changing this variable here we're going to define a brand new method and I'll do that just right here which is a called on parameters set so protected override void on parameters set so this is the method that is invoked automatically by the laser infrastructure as soon as those parameters arrive from the calling razor component right so when those parameters arrive this method will be called so this is your opportunity to do something about those parameters and so here's what we're going to do so if the ID parameter is not null right which means that there's another component that passes in the ID into this a component here we should be able to find that game and assign it as our game variable here to do that we're going to do the following we'll just say again this is the found game equals our game client and remember that now we have a get gain function so we can just say get game and then we will say ID dot value since it is a normal int it does have a value property that you can use to retrieve the actual value of that a variable and the next thing that we want to do here is to actually not just assign that found game into our game variable over here but instead what we want to do is to construct a brand new copy of of that variable and we're going to be doing that because if we just took this variable here and assigned it directly as the again variable and since this one is bound into the form that means that whatever the user types in the form right away as he is editing that will be immediately transferred into our Games Collection right regardless of if the user click it saved or cancel or whatever he clicks that will just immediately be transferred into the collection and we don't want that we want to give the user the chance of say save or cancel right so because of that we're going to be creating a copy of the game as opposed to just grabbing the game directly from the collection so now we're going to say then game he equals new and here we're going to be transferring the values right we'll say ID equals foundgame.id name equals down game.name and then gender we do the price and release date okay let's close that so that will do it for the case where we are able to find the game right because it exists this is an edited scenario but if we're not able to find the game it means that we are creating a brand new one so what we're going to do is just say else okay and so let me scroll down a bit here is the case where we actually want to do what we're doing already so prepare a new object for a brand new game we are going to be copying you know this section here we will copy that down here so game equals new with name a general as string empty and release date as your UTC now and now that we have this we can go ahead and change finally our game variable the one that's declared right here we can change it so that we don't initialize it on right there in on construction instead of that we're going to just say that this is just a game variable I mean game field right there and yes it come in a level so we will just say uh the question mark to make this a notable property it will be initialized by on parameter set depending on if we get an ID or not and so now we did that next thing that we want to do is to properly handle the case of the submit right when the game is submitted what do we do about it so let's go down here and here we are in handle submit so here we're going to introduce a little bit of a new logic here so and we're going to say if the game dot ID equals zero okay it means that this is going to be a brand new game all right so we're going to be putting that over here now of course this is complaining so far again because game could be new level right but at this point we do know that it cannot be null because either we found it or we didn't found it that we created a brand new instance in on parameter set so it just can't be null at this point when we do submit so because of that what we can do is use this exclamation mark over there which is what we know as a new forgiving operator where we are saying that hey compiler I know that you think that this could be new but I know that it will not be null it just can be no because I have a structured the way the code in this way okay so notice that really the compiler all this is trying to do is make sure that we don't run it into a situation where we just do that ID and this was new and then this is a new reference exception right we don't want to fall into that but that cannot be the case over here now with one else of course and in this else what we want to do is just say game client Dot update game here's where we use our brand new update game method right where we pass in the game yeah that should be pretty much it what we need to do in order to update our game so let's see if we can do this and see this is a working in action right let me just go up a little bit and see if we have something going on here so there's a warning over there and this makes sense uh yeah it's complaining about gaming new because just like in the index form when we enter the the component the game could be new so we don't want to run into a situation there right we're going to actually do the same thing that we did in index remember that we do have this if else block over here in index I'm going to copy that and we're going to go back here and just at the top I'm going to be saying that in this case it is not games it's just game so if game is new we will just say loading and otherwise we include our entire section of HTML right there for the form right so that should handle that case and we should not have that situation anymore so the game is just fine it's as a notable so let's go ahead and do Ctrl J and let's do dotted run and let's see how this page behaves now so let's go into the page over here and then the interesting thing of course is that we don't have a way to go from one of the items here and and just go and directly edit that we do know that we can go into game right for a new experience and the experience looks good still so in this case we do want to edit an existing game right so I'm just going to click on cancel and we do know that we have IDs one two and three so what I'm going to do is go into game and then I'm going to add the ID of let's say one so I'll hit enter and now we are editing the item number one in the collection you see game one that's a new route that we added to the component as you can see it was able to load Street Fighter fighting and the price and all that stuff and that worked just fine and what I want to do now is just make a small change so let's say that the price change it it became just cheaper out of nowhere so this is going to be now let's say 15.99 and then I'm going to hit on Save and as you can see a street fighter is now a cheaper game we have 15.99 so the value was properly updated into the collection yeah our data scenario is working is working properly so far we still need to do a couple of things in there but seems like the logic is working properly that is great now there's one more thing if we go back into that page here will be we're editing Street Fighter notice that the title still says new game right and that's not ideal we want to do something else right we want to do reflects on the fact that we are editing and not just creating a new game all the time so let's go back over here and I'm going to close that what we're going to do is to introduce a variable for the title so the title you know there's title here there's a title there and instead of in static we want to turn it into a variable that changes depending on if we are creating a brand new game or editing existing one for that we're going to go down into our code section once again I'm just going to introduce a private string title okay we will initialize it with just string empty this is an empty string but depending on the what happens on parameter set we're going to set a different value for it in this case when the game is found it exists what we want to do is the following title equals and so here what we can do is just what we know as a string interpolation where we can type a string but also in insert here the value of some variable so we can do edit and then we will do the equally braces and we will say game dot name so with that the value of the name property of K will be insert it into the string here that says edit right so you should read edit Street Fighter or edit Final Fantasy 14 or whatever it is and that is going to be for the edit scenario and then for the newest scenario the new game scenario we will just say title equals and then let's just grab that string that we have over there at the top and just copy that sorry and going back here we will say just new game and now that we have this we can take advantage of the title variable to place that as part of our page title so now we don't have to do this we can just use add title like that and we can do the same thing over here add type so now the title is dynamic let's see how that goes so dot and run okay going back into the page and now this time if I just refresh this notice that it says yeah edit Street Fighter 2. If instead I just remove this it will just say new game which is expected right I will say edit again two and now it says edit Final Fantasy 14 and it's all loading right there so this is working great and then of course what we want to do now is to make the changes required in this page in the home page so that we can actually click on one of these rows and go into the edit experience for that one item now doing this is actually very straightforward and so let me show you what we have to do for this it's exactly not very complicated so let's stop the server there and let's go back into index.tracer over here and first what we're going to do is to create a brand new function over here so here we have on initialize it we have great game let's add a new function that's going to be called edit game private void edit game okay and so this is going to receive the ID and all we're going to do here is actually the same thing that we do for create game so just copy that over here but we're going to append the ID of the current game the one that has been selected in the respective row so again we're going to be using string interpolation so we can combine things in this string between actual just text like that and then we can insert we'll say game slash and then ID where we're going to be using this well that's going to happen if we go up over here in our table remember that we left just one DH here and one DD here so that's going to be the place we're going to be placing a couple of buttons one for editing and one for deletion so let's go for the edit case now what we want to add here is just a well one more button like I said so this is going to be a button where the class is going to be uh button put on primary and then as we know we have to say that on click event we want to go ahead and execute some c-sharp function and what we want to do here is to specify the function like I said that is going to do the editing which is edit game and the way to specify that in this case is going to be by specifying this expression like parenthesis and then we do kind of a number function like this and then we can say edit game with the game.id parameter okay remember that here we're cycling across games right so for each game we go and render this so each row has knowledge of the specific game so what we do here if we say okay so in this portion here in the on click we will be using that game for that row and pass in the ID into the edit game function all that we're missing here is well some text some actual text for the building but we can do that but what we can do here is instead of just putting text where we can we can be a little bit more graphical here as we saw at the beginning we do have the ability to use something else here in WWE root if you go to CSS you will notice that the open iconic set of a fonts have been actually made available for us over here and so open iconic includes multiple phones that you can use right away in your code here and if you want to know more about open recording what you can do is just go to this page over here in icon sets iconify.design slash oi for open iconic you're going to find that this gives you a list of all the available icons that you can use in your page which are like fonts but they just render as icons like that so this is a nice way to introduce a little bit of a graphics into your page for instance in this case what I'd like to do is to use kind of a pencil as the icon for editing so what I'm going to do is just type here pencil and you can see there's a pencil in there I'll click on that and then they will give us an idea of how to show this inner page now it will not tell you exactly what is the syntax I don't know why or maybe I'm not doing something right here but this will give you the hint of how to use it it says oi and then column pencil so let me copy that and now let's go back over here let me collapse this so what you want to do in order to use that opening only is the following so we will introduce an i11 here and then for the class we're going to be using oi and then I'm going to paste what I just copied but it is not column that you want to use here it is actually a dash so that's the syntax that that you need to use here okay and maybe I'll send this to the next line hopefully that will render well okay okay for the button and the TD okay so that's how things should look like Dutch will allow us to show a Buddha Buddha with a nice graph over there and with that in place we should be able to see our building reaction so let's do Dot and run and let's go back into our page once again over here let's refresh it and as you can see now we have our pencil is showing up right there okay and so it's a nice way to to display graphs like I said and if you click on one of those it should takes us yeah as you can see it takes us directly into the page to edit that specific game so for instance like I said Street Fighter now it's going to be even cheaper it's going to be just 9.99 I'll hit save and as you can see yeah that that price was updated let's say that FIFA 23 let's go over there and uh let's actually let's change the release date because we made a mistake it was not September 27 let's say it was September the 1st and the price is also on sale so it's going to go 4 29.99 a great deal so hit save and as you can see that was updated right both the date and the price so yeah things are working great and so now we have a fully implemented edit capability in our Blazer application next in the list is our daily experience and there's a few ways to implement this but the experience I like most is the one where you have a button in the row for the item to delete then you click the button it opens up a dialog and then in that dialogue you have buttons for either configuring the deletion or canceling the deletion and if you confirm it the dialogue just goes away and then the item disappears from the list and so let's see what we have to do to enable that the first thing is going to be let's go back to vs code Ctrl C over here hey let's go back into our game client and by the way let me just close this game here we're not going to be using that and as you would expect we just need one more method here that's going to be able to perform the deletion so to do that let's add here and let me scroll down so we can see better there or like static void Elite game and then what we're going to receive here is just the ID of the game to delete yeah we just have to do two things here first let's find that that game so we'll say game game equals get game that's our other function where we can retrieve again and then we can say games dot remove the remove function of the games list and then we pass in the game that we want to remove that's pretty much it we find the game and then we just go ahead and remove the game so that's the easy part now what we want to do is to Define some sort of UI for that delete game dialog but before we can add that UI one thing that we are missing here is a small JavaScript library which is actually part of bootstrap so this is the bootstrap JavaScript library now for some reason is not included right now in our index page so index.html over here you see that we include the CSS right there so that's great and we do include the JavaScript 4 Blazer webassembly but we are not including JavaScript for bootstrap for some reason and so what we have to do is just include that here because otherwise we are not able to trigger the effect to show the dialogues and so what JavaScript we have include here and don't worry we're not going to be writing any JavaScript we do need to include that JavaScript here so let me go back into the bootstrap page remember this is the page what I showed you where there's all information about bootstrap and so what you want to do here is just go back into getting started introduction right so this is the start of the page and this will explain how to add bootstrap into your application if you didn't have it at all to start with and what you want to do is just copy this section here you see it says bundle and it has a script right here what we want to do is just copy that so I'll click on the copy button over here so copy and then minimize this and then we will just add it as a next line just after the Blazer Wheels mbjs we'll paste that and that will make sure that all of the JavaScript of bootstrap is included now in our application which is great the next thing that we want to do is to of course add our brand new component and we will do that in a very similar way as we did with our edit game page so let me collapse all of these things you know we have edit game and index so what we want to do is just open our terminal okay let me clean this and perhaps let me expand this a bit just like we did before we will say net new racer component the name is going to be delete game and again we want to Output that into our Pages directory right so I'll hit enter and as you can see we do have a delete game component over there now so close that and let's go into delete game so here we are in delete game now the shape that we want to specify for this component like I said is a dialog right and so defining a dialog with bootstrap requires a bunch of styles that we luckily we don't have to actually do this from scratch we can actually go from an existing example that the documentation offers so if you just go back into the page over here we're going to be looking into the section four components and then let's look for model yep model right here and so this is going to give you all the information about how to define model dialogues like the one that we need over here so let me scroll down a bit uh scroll down let's look at this live demo over here this will show us kind of an example of what we need so what I'm going to do is just to grab this this div over here okay from the light model and then we'll just go from there right so copy this and we're just going to paste it right at the very top there okay we're writing that that H3 that was right there so let's go ahead and change a few things here so first this one says example model for the ID so perhaps I'll do a Ctrl H and let's replace this with delete Model okay so let's replace all instances with delete Model and then as you can see so there's a div for the dialog another div for the content then we have a header and a body over here and then even a footer then in the header we do have a title that we're going to change very soon and then we do have a button to close this model on the the top right there's going to be an X to close the model and then there are a couple of photos here a one 4K just closing well like canceling and then there's another button for actually in this case saving changes or execute the actual action which in our case is going to be the delete action so we're going to go ahead and just change these buttons so that the first one says instead of close it's going to be cancel and then the other one is going to be delete now we need to write a little bit of c-sharp code to bring this component to life right so we're going to have to do a few things here so let's go down into the code section now okay the code section at the bottom and the first thing we're going to do is work a little bit on the title so we need to display a proper title so that the user knows what exactly that we're going to be deleting but in order to do that we're going to be needing one important thing which is the game a game object so that we know what what is that we're going to be deleting so we're going to Define here a property so prop game uh which is going to be again nullable and then we'll just name it game okay and of course we need to add the corresponding name space so I'll do Ctrl dot here we will say using models and this has to be a parameter this is going to come from the index page in this case so for that we're going to be defining this as parameter you can send not just scalar values but you can say send an entire in this case an entire game object if you wanted to into this page and with this we also want to specify another variable here which is going to be the title so it's going to be just a private variable here private string title and we will initialize this with stream.nt now we're going to Define our own parameters set method remember that we used that before so we will say protected override void on parameter set like I said this is a method that executes when the parameters arrive and we're going to do the following we will say that the title is going to be again an expression like this it's going to say delete and then we interpolate the value of game okay dot name and we will say question mark there we're acting equation I mean do you want to delete this game and in this case again it is warning us about the possibility of a null reference in this case what we can do is just use a question mark here to say Hey try to get a value from game dot name but if it happens to be that a game is no well you will not be able to return anything it's just going to have an empty string here now now this should never really happen because we are supposed to get the game as a parameter into this dialog so we should always have it available and so it should be fine right but with this we avoid that warning the next thing is going to be of course oh we have to now make use of this title right so now let's go back into into the into the model itself and let's add the proper title which is going to be here remember here's where we have the model title now we can set say add title right so now we have a dynamic title it should always display the name of the game to delete and next what we want to do is to provide some behavior for the these two Buddhas that we have here and so perhaps we can read better let me just send this to the next line so let's do it like this otherwise it's just too much going on here okay so that is one button and then we have the other button over here what we're going to do for the first button we are going to for the cancel button we are going to invoke a cancel method and in fact let's let's actually write that cancel method first so let me go down here and after on parameter set what we're going to do is Define two methods one of those methods is going to be our private void confirm method this is a method that we're going to be using to specify that the user actually confirmed the deletion right now interestingly we are not going to be doing the deletion of the game in this dialogue this dialogue is just going to capture that is the intent of the user but the deletion is going to happen back in the index page okay so how are we going to communicate from this component back into the other component well here's where we can use another type of parameter uh that is that is called a callback right and so how does that work so what we're going to do is just to Define here a variable here is going to be again a kind of a property but this is going to be of type event callback of type Bull in this case all right and we're going to be naming this one yes on close okay and again this is defined as a parameter and so our index page is going to refer or it's going to be able to have access to this on close a callback in such a way that we can invoke the Callback from this component and the other component the index page is going to be able to do something about it whenever they win both the Callback now since this callback is if of Boolean type we have the ability to send either a true or a false when we invoke it and that's what we're going to do right here when we go into the configure method down here we're going to do the following so let me scroll down a bit we're going to say that since user is confirming the deletion we will say just on close and then we say invoke async and then we will say true okay that's going to trigger a signal back into the index page saying that yes the user wants to delete the game and just like this we're going to and actually going to copy this I'm going to add another function down here that is going to be named cancel and then as you would expect this is going to send false and so these are the two functions that we're going to be referencing from our bullets so if we go back down here where we have the and let's take these things down so we can build better see down here okay so we have canceled and then we have the primary and so for the cancel case we're going to be invoking on click method and that is just going to invoke the cancel method that we just defined right so on click for the cancel inbox cancel and then for the delete or delete button we'll do the same thing but in this case it's going to invoke confirm and I think that's pretty much what we have to do to implement this one delete and dialog but of course it will not make much sense to Define this guy without defining the corresponding logic in the index page so that it can invoke this so we cannot really see much about this dialog until we Define the logic in the index page let's go back into index address and let's go down into our code section here where we're going to be defining a couple of things and so the first thing is going to be a variable that's going to keep track of what is the current game so the game that the the user selected for deletion so this is going to be just private game and so this is a nullable current game double keep track of the current game we'll see how in a moment but before doing that let's actually go down here and let's define what is going to be the function that is going to be performing the actual deletion of the game so here we're going to be saying private void on delete Model close okay and we'll accept it so the intention is that this accepted variable is going to have either true or false depending on if the user confirm it or not if accepted if accepted then what we want to do is something as simple as game client dot delete game and then we will pass in the current game and then dot ID okay of course this is going to complain once again because current game is a new level but via the logic that we're going to be defining in a moment we will know that this will have a value so I'm going to using the null not for giving operator right there and so that way we don't get that warning anymore just so that things have become fresh in the page in the index page just after deleting the the element what we're going to do is just say games equals client dot get gank line Dot getgames okay so double go ahead and give us the fresh list of games so that we can render that in our table now let's see how to make use of this method here and the variable that we just defined so for that let's go up into our HTML section over here what we're going to do is just just on top of the table we're going to be defining that razor component for the dialog right because we created a component but we have not referenced it anywhere just yet so that we're going to do right here on top of a table delete game okay so this is our delete game component the one that we create over there and then we're going to be defining a few things here first thing is that as you remember there is a parameter that we have to specify for this one which is the game right the parameter game how do we find that parameter well if we go to index address what we can do is just say game equals Korean game so that's going to be our way to pass the value of the current game into our delete dial and then the next thing is going to be the on close remember that we also have this parameter on close right here this parameter close we're going to be defining that as on close we're going to Define our on delete Model closemate right the method that we just defined it down here on delete Model Clause maybe perhaps I'll just copy that and just type paste it there to avoid typos writer and so that is how we can Define our delete game component now don't worry because this component since it is a model it is not going to just show on top of the table right away when we load the page we do need to execute some action via bootstrap so that the dialog actually shows up and that's what we're going to do now via the brand new button that we're going to introduce so remember that we do have a button right here for the editing right so we're going to be following a similar idea for the for the deletion so I'm going to actually just copy this button I'll copy that and I'm going to be adding perhaps let's move this to the next line so it reads better and I'll do that over there so now we have a second building over here so let's let's do the right thing for this button so that it becomes our delivery first thing that is going to be of type a button button danger another style available via bootstrap the next thing is that on click we are not going to be invoking edit game but instead we're just going to be adding a little bit of c-sharp code right here which is called all it's going to say is that good and game equals okay okay remember that we have this current gain variable available what we want to do is just keep track of what is the game that the user click it on so that later on we know which game to delete right so and that this is one way how you can do that right remember that this is the row the row has a reference to the game and that's how we can keep track of it the next thing is going to be that of course we don't want to be using the pencil also here open iconic also provides other styles and so and you can look at all those Styles in the page that I showed a moment ago but the style we're going to be using here is just the x or the font I guess that we'll do using he's just ex like that and so this is going to show as an X volume there for the leash so that's all good however we do have to do one more thing here because the opening and closing well actually the opening of the dialog happens by using a few of the other attributes that we have to put into they are our little button over here which I provided Again by bootstrap right and you can get all the information on the bootstrap page but what we have to do here is the following we're going to say data BS toggle is going to say model okay and perhaps I'll just send this to the next slide so we can see better okay so just like that and like this okay so that's one and then the next one is called data PS Target equals and then here you're expected to specify a selector for the the identifier of your model so if you go back into our delete game component over here and if we scroll up remember that that the ID of our component or of our model is just delete Model so what you want to do there is just copy this name delete Model go back into index and specify that for data vs a Target you want to do pound delete Model okay that means that when we click this button it is going to go ahead and toggle the model that's represented by delete Model over here and that's going to that's what's going to actually trigger the opening of the model itself right there's nothing else that's going to trigger that opening and so if we have done everything Wells and hopefully with it uh this should be good enough for us to do the delete experience so let's go back into our page so I'm just going to uh Ctrl CDs I'll do net run once again and let's go back into our page over here let's do a refresh and as you can see now we have our delete button available right there right is the pencil with the I mean it's the open iconic font for with the X and then if we click it as you can see we do get the dialog for in this case deleting the Street Fighter game and as you can see the title is is correct and we have our two buttons over here but one thing that I forgot exactly that we don't actually have a body for this model so let's fix that quickly let me just close this we can fix that that very quickly so I'll do Ctrl C here all we have to do is just go to delete game.racer in our model remember we have this model body over here that we're not going to be using because it's a very simple confirmation dialog so we don't want to use it so we just have a header and a footer so I'll save that and then we are going to go ahead and Dot net run once again and then let's go back into our page it and then we're going to say okay so click on lit so do you want to delete Street Fighter 2 Okay so let's say let's see what happens if we just cancel this I'll say cancel and well nothing happens so that's good now let's say that we do want to delete it so I'll click on that and then I'll click on delete and that indeed deleted the item as you can see down here there is no item but the model was not removed and that was I guess because of a small other mistake that I made so let me just go back here quickly and I think I know what's missing here so in delete game if we see our model one thing that we're missing is that in the case of cancel we are doing the database dismiss attribute as right there but we're not using that attribute for the primary building over here for delete we should be using that so I'm just pasting it right here as you can see and that should take care of that one issue so let's run it once again and let's try this one more time so refresh this and so let's say we want to delete Street Fighter click on here delete refiner 2 yes let's go ahead and delete it and there you go the game has been deleted right it does not exist anymore into the collection of games you want to delete one more FIFA 23 click on delete and it is gone so as you can see at this point we have a fully functional Blazer UI with operation for listing games creating games editing editing games and even deleting games congratulations you made it till the end I really hope the course make your expectations and help you get started with blazer webassembly however that's just a deep of the iceberg if you'd like to go beyond what you learn here and become a full stack developer you'll need to dive into a few other topics like how to create the server side or backend component of your app in the form of a web API server how to integrate the client and server to see the application working end to end how to use Entity framework core and SQL Server database to be able to persist the data use across application and perhaps how to implement a search feature across both the backend and front end to cover all these topics I created my API net core for beginners course which expands what you saw in this course with dozens of additional lessons that will teach you step by step how to add all the essential components of a complete SPN net core full stack application if you're interested please check out the links below this video to get all the details I hope this was useful and please let me know in the comments how you feel about laser and if you think it's a good option for your coming projects consider liking this video if you find it useful and don't forget to subscribe to the channel so that you are the first to know whenever I publish new videos thanks for watching and I'll see you next time

Channel: Julio Casal

Views: 22,253

Keywords:

Id: WfMHUp8tOVE

Length: 146min 30sec (8790 seconds)

Published: Tue Feb 07 2023