Make a Browser Game with Blazor WebAssembly, Entity Framework & SQL Server in .NET 5

welcome and thank you very much for joining the blazer webassembly full stack boot camp after the next couple of hours you will have what it takes to build a modern web application from start to finish with blazer webassembly web api and entity framework so that you can really call yourself a full stack blazer and net developer we will start with the client application where we utilize blazer webassembly you will learn how data binding and event handling works with blazer what razer components are and how they communicate there are several ways of communication between components like parameters events and services you will see how to implement them all additionally we will build forms with all the controls blazer web assembly provides like input text fields check boxes select fields radio buttons and so on and we will also see how validation in these forms works authentication is also very important of course so we will implement a custom authentication state provider and use the authorized view component to control access of authorized and unauthorized users don't worry you will learn what all these things are along the way in this course to authorize a user we will use json web tokens and actually create that token later with a web service we will call this service using an instance of the http client class as already mentioned we will also build the back end of this application with a web api and entity framework the web api provides all the controllers these are the web servers in essence which is called from the blazer web assembly client application entity framework is used to create a sql server database with all the necessary tables using code first migration so all your data will be stored persistently but the back end will be covered later in this course we will focus on the client first so let's move on with some preparations and then start building the application the only tools you need in the beginning are the the.net sdk and visual studio now depending on when you're watching this course you can choose to download the dotnet 5 sdk or the preview or release candidate of dot net six or dotnet six has already been released then you're safe to choose this sdk this course will use dot net five because by the time of recording these lectures this version has been the latest saber release so to be absolutely safe please choose this version as well but there shouldn't be many differences between dotnet 5 and net 6 if any so please download the dotnet sdk for your operating system regarding visual studio you can use the com unity edition of visual studio 2019. it is totally free and it provides all the functions we need if you decide to use a preview version of a.net sdk you probably also need a preview of visual studio though just keep that in mind otherwise the latest released version of visual studio is perfect if you already want to get the necessary tools for the backend you can download and install postman you just have to scroll way down and then you find the link download app we will use postman to test our web service calls later on sometimes it's just nice to test the call to the web api before you build the corresponding front end additionally you could already download the sql server x press and the sql server management studio which enables you to have a look at the sql server database but again these tools are used later in this course for now please download and install the.net sdk of your choice and visual studio 2019 community edition one last thing before we start with creating our blazer web assembly project you can get the complete code you'll see during this course on github and here is the link to the repository as you can see in the commits these commits match the structure of this lecture some commits are done after a single lecture and some are packed with a bit more code so if you're struggling with your code please have a look at this repository i hope it helps to find a solution or just grab the code and build your own browser game with it whatever you like anyways if you still have any problems with the code you can also reach out to me of course and now let's create the project alright so when you start visual studio choose create a new project first and then from the templates we choose blazer web assembly app if you don't find it of course you can enter it here in the search bar filter by blazer and then we choose blazer web assembly app and if you don't know the difference between a blazer server app and the blazer web assembly app just real quick a blazer server app runs completely on the server there are no actual web service calls like you might be used to with the typical web application the description also says that user interactions are handled over a signal r connection meaning over web sockets so the user doesn't really download the client app to the browser which is great but the big disadvantage is that the server has to handle everything so if your app has a lot of users for instance the server has to manage all the interactions of every user all current states and so on now with a blazer web assembly application the server has a lot less to do because the client handles the interactions which might be faster for the user speaking of user experience and offline functionality for instance and which is the typical structure of a modern web application maybe you already built a web application with a net backend and a javascript framework like angular react of ujs for the front end these frameworks handle user interactions as well and make web service calls to the backend with blazer webassembly it is the same thing but you don't have to write javascript you can keep writing c sharp code and even use the same classes for the client and this server i just love that fact okay so long story short we choose blazer web assembly app and click next and then let's give this thing a suitable name like blazer battles for instance and then we click next again and then we choose the framework as you can see here the current framework here is now.net five before it was dotnet core 3.1 but we want to use dotnet 5 here and then configure for https is correct we don't need authentication for now we will do this by ourself with json web tokens and then we also say asp.net core hosted it's important to check this box here because this provides a solution where we can already make use of a web api so a full stack web application in one solution with c-sharp and net only and that's it let's click create and there is our new solution perfect let's have a look at the solution explorer on the right and then see what has been created for us in the next lecture so in the solution explorer of visual studio you see three project we've got the client project server and also the shared project now the client project represents the front end here's where all the blazer web assembly magic will happen the server project will be the home of the web api and entity framework and the shared project will be used to share classes between the client and server projects this means building a model once and using it for both the client and the server you can already see the weather forecast model here for instance but we'll talk about the example application in the next lecture let's have a look at the client project first the program cs file with the main function here is the starting point we will mainly use this method to register new services we write by ourselves or services that will be added by new packages you can already see that something is happening here with the http client class and above that line a root component is added which would be the app component we can find in the app razor file a component in blazer is a razer file that's why it's also called eraser component so the app component is the root component where you actually see the use of further components like the router for instance the found and the not found components and the route view for instance now the router component that wraps the other ones in this case decides if a route that has been entered in the address bar of the browser is correct or not if it is correct the found component will be used to display the content of the entered route if not the not found component will be used both components in turn use further components a route view and a layout view and these two make use of the main layout but let's stick to the layout view first it uses the main layout but the content can already be seen here it's simply text wrapped by a standard html paragraph tag the route view though uses the main layout but with the content of the actual page the user wants to see by entering a particular route and this page can be found in the pages folder we'll get to that in a second let's have a quick look at the imports razer file it's quite simple you will find global using directives here and that's it if you don't want to add a reference in a single component or use the complete namespace then simply edit here instead okay next let's have a look at the main layout in the shared folder looks like standard html at first glance right well the only difference is that it inherits from the layout component base class and when you have a look at this class you can see that it has a property called body the type of this property is render fragment which is used in the main layout with add body we have a look again here there's the add body and that's where the pages will be rendered additionally you can see another used component the nav menu up here but we'll get to that soon now do you already see how these things work together a component can be used by adding a tag with its exact name and any page will be rendered in the add body part of a layout you could build a custom layout if you like and use that one instead of the main layout in the appraiser component that's totally up to you you would simply use this new layout here instead of the main layout for instance anyways let's have a look at the pages for instance the index razer the crucial part is the add page directive on top with a string which already is the route for that page you don't have to specify that route anywhere else there's not another file where you have to enter every single route you just put it up here in a single page so just create a component add that at page directive and you're done it's the same with the fetch data and the counter pages you can see here at page fetch data this is the route and here the same for the counter but before we have a deeper look at the code a quick word about the other projects this server project consists of a program cs and a startup cs file and in the startup cs we can find the configure services and the configure methods the configure services method configures the apps services meaning a reusable component that provides app functionality we will register services in the future in this method so they can be consumed in our web service via dependency injection for instance similar to the program cs of the client projects now please don't mind all these buzzwords right now we will get to them throughout this course now the configure method creates the server apps request processing pipeline meaning the method is used to specify how the app responds to http requests as you can see we're using https redirection routing and so on with all these use extension methods so use and then anything else we are adding middleware components to the request pipeline for instance use https redirection at middleware for redirecting http requests to https now the startup class is specified when the app's host is built and we can see that in the program cs class in the create host builder method here the startup class is specified by calling use startup regarding the app settings json we only need to know that we can add and modify some configurations here more interesting and often used throughout the backend part of this course is the controllers folder the first controller you see here is the generated weather forecast controller the demo controller if you want we'll get to the details of controllers later but for now it's only important to know that you can already call this get method down here and i would say we do exactly that next let's run the application first and then talk about some files we haven't talked about yet the great thing about visual studio and the dotnet core hosted blazer web assembly application is that you can simply start this whole package with that little play button on top let's do exactly that we click that button the actual starting project is the server project and visual studio will fire up iis express with a browser of your choice to start the app if you get an ssl warning just accept the self-signed certificate and you're good to go when you have a close look you see the text loading let me refresh this page you have seen loading there now you might ask where does this come from well the client project has got a folder called www root let's have a quick look again at the solution explorer and this folder here is the root of the actual website and here next to some cascading style sheets and the theft icon you can find the index.html and here you can see the actual loading text now any resources you want to add like icons images and so on have to be added to this www root folder style sheets however can also be added next to the corresponding component but we will get to that later the crazy thing now is that you can actually debug the client and the server at the same time back to chrome and let's have a look at the counter page now you can see when i click the button here the counter simply increases and now let's have a look at the code so back to visual studio we open the counter razer file and in here it seems like there's not much to see but actually there's already happening a lot you already know the page directive here on top and then you can see the current count variable for instance and this integer variable can also be found in the add code block here this variable so in this add code block you're free to write c sharp code and use that code above within your html codes with the current code variable you already see how data binding is done in blazer webassembly and in the button you can already see event handling the on click event marked with an add calls the increment count method simple as that if you don't like having your c sharp code together with html you can create a code behind file for your c sharp code instead let's do that real quick we stop the application and then we create a new class so here right click new class and we call this file counter or razer cs the name is important because then visual studio knows that this class belongs to the counter razor file and then this thing should be a partial class and it derives from component base and for that we have to add a using directive we can either use the quick fix menu here or we enter control and period on the keyboard and then we have to add the using directive with microsoft asp.net core components now this class provides some functions you might want to use later like let's have a quick look like here the uninitialized or state has changed methods we will use them later in this course all right and when this is done we can actually move the code from the code block here to this file remove the code block save everything and we're done now let's start the app again there it is here's the counter page we can click the button and it still works and now let's add a break point in this method here there we are and let's click the button again and there is our break point it was hit crazy now what's up with this service let's have a look at the fetch data page we continue here go to fetch data and this page actually makes a call to the web api of the server project we can see that in the network tab of the console so let's open the console with f12 and then we go to the network tab and when we filter by xhr which stands for xml http requests we refresh the page and here we can see the actual call this is the call here the url and then in the preview we see the actual data let me make this a little bit bigger and this is exactly the same thing we see here on the page now let's go back to visual studio and have a look at the code in the solution explorer now in the fetch data razer file we see lots of new stuff we've got the page directive we know that already but then we are adding or we see a using directive with the blazer battled shared project referenced and after that we inject the http client class so we're referencing the shared project because we're using the weather forecast class down here actually and then we inject the http client which enables us to make web service calls now inside the table we see for each loop this one uses the forecasts received from the service we do all this later by ourselves so please don't mind my pacing for now if it's a bit too fast now in the code block we see a new method called uninitialized async maybe you remember a few seconds ago we had a look at the component base class and there you also saw this method this thing is part of the component life cycle and is called as the name may imply on initialization of the component and in this method we're using the injected http client to make a get call to the weather forecast route which would be the weather forecast controller of the server project which is by the way also using the same weather forecast class of this shared project so when we have a look here where the forecast this is the get method i was talking about a few minutes ago and this is also the exact same class the client uses now in this controller let's add another breakpoint as i said we are here in the server project so let's reload the page again and then have a look go back to chrome reload as you can see the debugger has been stopped and now we are here in our get method of the server project fantastic we can step through we see that there's a count of five for the returned value so let's continue and then we see chrome again with the actual result now although being able to debug client and server at the same time is great i like to run the application in another way because with the way i just showed you you have to stop and run the project by yourself every single time you made some changes to your code this slows down development as you can see maybe i want to return seven values here we would have to reload the whole application or restart it to see the results you can see here the breakpoint now would not be hit so we have to stop our application first and but there's another solution of course instead of using the play button i like to use the package manager console with the dotnet watch run command which rebuilds the project when any code change has been recognized so no matter if you change razer component or controller class for instance as soon as you save the modified file the app will be rebuilt and reloaded and you can directly see the result in the browser i have to say in theory sometimes it still doesn't work even with a.net 5 you change a razer component for instance and the application does not rebuild itself but the solution mostly is to just save for instance a server file again a cs file or something like that you will see that in the in the course but in essence you don't have to stop and restart the application by yourself every single time you make a change but let's do this together now i have the package manager console open here but we will find it also under view and then other windows and then package manager console all right now to start the app we first have to go to the server directory so if you have a look here we are now in the root directory so first we move to blazer battles then server and then we enter dotnet watch run and again the watch command is there so that the app recognizes any modification in the codes and now when we go back and reload the page here just to make sure and go to fetch data we see that we've actually got seven results let's have a look at the counter you see the breakpoint has not been hit now but when i make a change in the code in the code behind file now let's increase the counter by two for instance instead of one i save this and you can already see that here it recognizes that this file has been changed i can go back to chrome click me and the counter is now increased by two and the same for the server stuff so i can go to the weather forecast controller change that back to five for instance save it again the app is rebuilding you can also see that in chrome actually so maybe it's let's let's change that to six and here's this cute little icon which says hey something has been changed and let me reload the application as you can see now we've got six results you see this makes developing your blazer web assembly app a lot faster one thing we haven't talked about yet is the nav menu but by now you may already know how this component works let's go back to visual studio and open the nav menu razer in here you actually see some data binding and event handling with the toggle nav menu function for instance and also the variable nav menu css class new though is the nav link component here this is a built-in component for navigation links the description already says it all a component that renders an anchor tag automatically toggling its active class based on whether its href matches the current uri and the href would be the string that is used with the add page directives of your pages so here's empty but here you can see counter and fetch data for instance one last thing i want to show you in this example application is the first way of communication between components when we switch to the index razer again you see the use of the survey prompt component with a title this title is actually a parameter so the parent component index can tell the child component survey prompt anything with the help of parameters and now looking at the survey prompt component you see the title property in the code block marked by a parameter attribute and then this title provided by the parent is used in the html above right here all right that should be it for the example application already a lot of input i guess now we can stop the application with this little stop icon here in the package manager console and now let's make a new git repository out of all this and then start building our browser game with blazer there are several ways to create a git repository we can use the git changes tab for instance here or we use the menu gets and then say create git repository so let's use this one and then we can choose to create a repository on github so that our code is already stored on the cloud we can use an existing remote repository or create a local only repo this is totally up to you of course for me i'd like to push my code to github so let's do that you can see the local path here development blazer battles there's my account i'm the owner and then i can choose a repository name blazer battles already exists because i created a repository with net core 3.1 so we would have to change this maybe to blazer battles and then net five you can choose to make this repository private or public i choose private for now but when i finished all the recordings of course i will make this public so you will have access to this repository and you can already see here the url and after all this configuration we just click create and push and now you can find this exact repository on github as you can see here in the git changes tab as soon as we make any change for example i add another character here we can have a look and see the change let me save this and then we also see the differences in the changes so that's pretty neat and every single time we want to commit something we enter a message say commit all or even push it directly or you can first just commit this and then we will see here that there are changes that can be pushed to the repository and if you want to undo the changes we just right click and undo them like that now if you have any trouble or just want to play around with the project feel free to access this project in github clone the repository fork it start it and so on alright i would say that's it for this section let's make a game now you have already seen lots of code now it's time to write some by yourself welcome to blazer battles where you will learn how to build your online browser game with blazer web assembly web api and entity framework in the beginning of making this game we will focus on the client part there might be some situations where web service call would make sense but we simulate that call by using local variables or methods first later everything will come together when we add the web api and entity framework with a sql server database but let's talk about the actual game now the very first thing we need in a browser game are resources to make things easier for us and the players there should only be one resource and this one and only resource shall be the banana with bananas a user is able to build units the units that will be available are knights archers and mages they have different strengths and weaknesses and consume different amounts of bananas with these units a player creates an army and with that army a player is able to fight battles against other players hopefully win them and eventually get to the top of the leaderboard of blazer battles by building this game you will learn lots of stuff regarding blazer web assembly web api and entity framework we will start with the new razer component use data binding and event handling and then move on to communication between components i think i've said enough let's create that new razer component next since bananas are pretty important to our game let's create a component that shows the current count of bananas please note that everything we are going to build in the upcoming lectures assumes that we are working with an authorized player implementations regarding authentication will come later doing it that way is a lot more fun in my opinion anyways the component we're going to build should be seen by the user all the time so that he or she always knows how many bananas are available so let's build a top menu for that so in our client project and then in the shared folder we right click and then add razer component and we call this one top menu and there it is and in the code block we can already add the bananas property and give it a default value so in here we say republicans bananas and this is a property and we set this to a hundred for instance and now to display this value we use the data binding of blazer by typing at and the name of the property or variable so let's remove the header here and then simply say at and then bananas simple as that and now we have to add this component so that we actually see it so we can go to the main layout for that and instead of the about link let's use the top menu component so we remove this and simply say top menu close this and that's it let's see how this looks we go to the package manager console i am already in the correct directory meaning in the server directory and i can simply type net watch run to start the application alright and far to the right top right we see the number 100 okay now i'm not a designer but still let's make this a little bit prettier first i'd like to add some icons you can get them from the resources of this lecture or the github repository and we will only use the banana icon now but later we make use of the others as well and to be able to use these icons we create a new folder in our www root folder and paste them there so first add a new folder we call this one icons and then let me paste the icons there i've got them here blazer battles icons but again just use them from the repository or the resources folder of this lecture and then just drag and drop them and that's it okay and after that we can use the banana icon in the top menu component so let's write a little html to display the icon let's go back to the top menu and here we say we first add a new div and then image and the image source is icons and then the banana icon close this and in the end show the banana count and we have to remove this character here because otherwise this does not work so i saved this and now let's have a look again sweet we now see a banana there's one little thing i'd like to add and that would be a little css or cascading style sheet so let's add the class top menu to the div simply saying class and then top menu and then we could change the app css down here or we make use of the so called css isolation the documentation of css isolation says it simplifies an app's css footprint by preventing dependencies on global styles and helps to avoid styling conflicts among components and libraries to define component specific styles create a razer css file matching the name of the razer file for the component in the same folder the razer css file is a scoped css file so let's do exactly that this means again we do not need to change the app css we can add another css file and we see an example of that already here in the main layout razer there is a main layout razor css file and when we go there there's a lot of css just for the main layout and the same for the nav menu for instance and we do the same now by ourselves for the top menu so we right click again the shared folder hit add and then new item and this time this will be a css file so a style sheet and we call this and that's important it has to have the same name as the component so top menu dot razer dot css and now you can see that this file now is below the top menu razer file and in here now we can add the class top menu and what we can do is we center the content so we say justify content center [Music] the display would be set to flex and the last one the width is a hundred percent something like that and as you can see the watcher does not recognize this change but maybe it works when we yeah just save the top menu razer file css does not work all the time but still just hit ctrl s for the razer component and then we can have a look again and here we see that the banana is now centered beautiful one last thing to see the bananas also when the responsiveness of the app kicks in we have to change the style sheet of the main layout component just to show you real quick with f12 i open the console and then i click this icon here for instance to see a view of our application or web application on a smartphone or on a tablet for instance here the ipad iphone pixel phone and so on and as you can see we do not see the top menu so what we can do to change that is go back to visual studio and have a look at the razer css and there is a class yep there it is in line 34 we see that at this width the display is set to none and we can simply comment this out or remove it i'll leave that up to you save it again maybe save the eraser component again and you have seen it already it recognized the change and now even on the smartphone we will see how many bananas we have and now we can change the view back to the desktop view great you've got your first component and now let's commit this and then move on to the next lecture when you're creating a blazer application you'll get to a point where you want components to communicate with each other rather quickly the easiest way to communicate values from a parent component to a child component is via parameters you have already seen this in the example codes now we want the main layout which is the parent component to tell the top menu which would be the child how many bananas the current user has and we do that with a parameter so in the top menu component it's already open we add the parameter attribute to the property and this is simply done that way in brackets we add parameter by the way that's why we're using a property here instead of a private variable a private variable cannot be a parameter that's one thing to keep in mind when you're designing your application now with that change we are now able to set the bananas value in the main layout so we go here and now there is the bananas parameter available and we can say for instance now we want to see 200 bananas when everything is saved and the application has been rebuilt let's have a quick look there we already see 200 bananas great now let's see how communication works the other way around now communicating from child to parent in our case would mean that the component that has been added to the top menu would tell the top menu to change the value of the bananas for instance so let's create a new component in our shared folder a new razer component and we will call this add bananas which will simply be a button that increases the value of the bananas i know the player shouldn't be able to just add new resources whenever he or she wants to but let's ignore that fact for now and try to continue learning so we've got our new component and first let's add a simple button up here we can remove the header and then say button and then we can use the bootstrap css classes as well as the open iconic icons to make this a little bit prettier so let's say our button gets the class button and button info and then we add a span for an icon again we use the open iconic icons here and i think a plus i can makes a lot of sense now all right and now let's add this a new button here in the top menu simply add the add bananas component save this and then let's have a quick look in chrome there it is we have a button great really quick let's add a span tag to the top menu so that the banana value looks a little bit better you can do it like that span move the closing tag here and again we lose a we use a bootstrap class which would be pop over header save this we restart the application yeah much better i think and now the next thing is we want that new button to change the value of the banana so how would we do that we cannot simply access the bananas property of the top menu instead we have to raise an event and when this event is fired the top menu itself decides what to do but let's build this thing one step after another first we go to the add bananas eraser component and in here we add a new property which is an event callback this thing is also a parameter so we add the parameter attribute and then we say event callback with an integer because this is the amount of bananas that we want to add and we call this event bananas edits like that now we have to invoke this event and to do that we add a new method and this method calls the function invoke async so let's make this an asynchronous method and this works like that public async task as return type we call this increase banana count and then we say wait bananas edits invoke async and we add a value here for now this would simply be our default value we want to add 10 bananas and now we need something that calls this new method what about our button so in our button here we use the on click event we bind this event to our increase banana count method so now when the button is clicked this method will be called and this method will invoke this event here with the value 10. so we're almost done now on the top menu component we also add a new method which will change the value of the bananas property so in here we add a new method this time public avoid add bananas with an integer value and here we simply say that our current bananas will be increased with plus equal the value and then the last thing we have to do is in our add bananas component we set the bananas edit parameter to the add bananas method let's recap real quick the add bananas component gets an event callback property here which is also a parameter and when the button is clicked here with the on click event this event callback is invoked with the help of our increased banana count method and then the top menu component also needs a new function which is called when the event is fired and we set this up by using the parameter of the add bananas component all right let's see that in action now there's our button we click plus and we get more bananas great this works just fine now before we have a look at the third way of communication between components let's create a new page first because that way we can change the banana count of the user although we're not a parent or a child of the top menu component in this game we want to build an army of units like knights or mages now to build these units you need bananas the thing is we don't want to build our units in the top menu we want to build them with a separate page so let's create this new build page first which is another razer component in essence so in our pages folder now we right click add razor component and then simply call this thing build and right on top we add the page directive with the routes which is simply forward slash and then build great now let's add a link to that page in the nav menu so here is the nav menu razer and in essence we can copy this list item here and then for the href we say build we can also change the icon of course for instance let's use a wrench because we want to build something here and also change the text of course to build let's see if this already works there's our page it has been reloaded already and you can see the build nav menu entry we click link and here's our build page nice now let's clean up the menu while we already edit we don't need the counter and the fetch data links for instance so let's remove them and we can change the title as well i would say for instance let's add a space here and in the index.html we can also change the title here and the last thing i would like to do is in the index razor file remove this survey prompt component remove the text here and instead of hello world let's say welcome to blazer battles we save everything and then let's have a look again okay go to home we see the title has changed in our tab and also here in the menu and we see the text welcome to blazer battles okay back to the build page there it is the plan is to have a drop down where we can choose a unit we want to build and a button that finally builds that unit let's focus on that button first we can already add it and call a dummy method when the button is clicked so first let's add a new method here private void and we call this method eat bananas because we will eat or consume bananas when we want to build a unit and let's also lock this into the console and we do this with console right line and then we say so and so so the amount of bananas have been eaten and then regarding the button we say again class button and this time maybe button primary and we call the text or we say we give this button the text eat bananas and then we want to call the method eat bananas so on click and then eat bananas by itself would not work this way we cannot give this method a value so what we have to do here is we have to use a lambda expression and then say eat bananas and then we can give this method a value so we got our method and also we got the on click event here with the button and we call the eat bananas method with the amount 10. all right let's test that again the only thing we expect here now is that we see this in the console so back to chrome we open the console with f12 for instance we go to the build page and there is our button we click it and we see 10 bananas eaten let's make this a little bit bigger maybe like that and the bananas are eaten this works fine but the problem now is as already mentioned that we cannot change the value of the bananas in the top menu component and the solution is a service so let's create a service next when we are creating a service any component can inject this service and access its methods and properties so the build page for instance could call the method of the service to decrease the amount of available bananas and the top menu component could access the current amount of bananas which is provided by that service the crucial part is notifying the top menu component that the number of available bananas has been changed to realize that the top menu component has to subscribe to an event of the service but let's implement the service first for that in our client project we create a new folder so add new folder and we call this services and in this services folder now we first add a new item and this shall be an interface and we call this interface i banana service let's make this public already and we can actually already add the bananas so we've got int bananas as a property and the method eat bananas so boyd eat bananas and a bunch or number of bananas whatever you like this is our interface and now we also create the implementation class so add a new class banana service which is already public and we implement the i banana service and now with control and period we use the quick fix menu and say implement interface we can remove the exception here as well as here for the setter like that and the method eat bananas is actually pretty simple we just say bananas minus equals amount and let's also initialize our bananas here this time maybe with a thousand okay that's nice but we have to add an event of type action as well and also a method that invokes that event when bananas have been eaten so let's do that back to the interface on top we now add event action on change and now here we also add this event public event action on change like that and then we can do one thing we could say on change invoke in the bananas method but i got a feeling that we need this more often so what we can also do is simply add another method here call it bananas changed and use the arrow operator to then call on change invoke and then in the eat bananas method we simply call bananas changed so again with bananas changed the on change event will be invoked and this is exactly what we want to do when we eat bananas and to be able to inject this service now we first have to register this service in the program cs and add the corresponding using directive again we want to inject the service so we can access the bananas value and the each bananas method so let's go to the program cs first and here we say builder services add scopes and then we say for the i banana service we want to use the banana service implementation class and again with control period we add the using directive with the reference blazer battles client services and of course never forget the semicolon what we can also do is add this reference to the imports razer file here so that we don't have to use the whole namespace when we want to inject the service so simply add using play the battles client services and now we can actually go to the build page inject the service and call the eat bananas method so here in our build razor component up here now we say inject i banana service again if you wouldn't add the reference to the imports eraser we would have to add blazer battles client services and so on so now we are able to just use ibanana service and then say banana service we call it like that and here now instead of the console right line we say banana service eat bananas with the given amount alright now the last step would be the top menu component which now should display the bananas of the banana service again we have to subscribe to the on change event of the banana service to do that and we do this on initialization of the component and we also have to inject the banana service so to the top menu razor file on top we inject again the i banana service call it banana service and then on initialization so we use a life cycle method here a component lifecycle method which means that this method is available for every eraser component so protected override void on initialize there it is already and here now we say banana service on change so for that event we subscribe to that event with mentioning the event and then plus equals and then we use this thing here state has changed and as you can see it says stat has changed notifies the component that its state has changed when applicable this will cause the component to be re-rendered and this is exactly what we want to do here because this means that when the onchange event is invoked then we want this component to be re-rendered because then it means that probably the bananas count has been changed and we want to get the value from the service and show the correct value from the service now to use the value from the service of course we have to change this thing here instead of just using the bananas of this component we say banana service bananas simple as that now this is great for initialization but we also want to unsubscribe to the event when the component is destroyed this means we have to implement the i disposable interface and unsubscribe in the dispose method so implements i disposable and then there's this method public void dispose and in here now we can actually copy this and instead of plus equals we say minus equals and this is how we unsubscribe from that event and maybe let's move the method down here so this looks a bit better and then we are done i would say let's have a look back to chrome we are already at the build page let's reload the app again let's click eat bananas and we can see that the value changes but what about adding bananas well this doesn't work anymore and i would say we fix that in the next lecture apart from adding bananas you might have already seen that the parameter in the top menu component is also obsolete so let's clean this up we can remove this parameter here we can actually also remove this method here and then we've got the bananas edit parameter this is also not necessary anymore and in the main layout there it is we can also remove the bananas parameter and then in the add bananas razer we can remove the event and also invoking the event of course now since the event doesn't exist anymore we have to implement something else for the increased banana counts method you might have already guessed it we need a new method in the banana service and use this method here in the add bananas component so in our i banana service interface we add void add bananas again with an amount and then in our implementation class we implement the interface there it is and now we have to write something here and this is straightforward actually we can again copy some code and simply paste it here and instead of reducing the amounts we just use plus equals to increase the number of bananas now to be able to use this new method in our ad bananas eraser component again we have to inject the ibanana service and then use the new service method in the increased banana count function please note that it doesn't have to be an asynchronous method anymore so let's change the return type to avoid here first like that and then we inject our service with at inject i banana service banana service and down here we can now say banana service and then add bananas and let's use the 10 as a value again and this should be it let's test this in chrome we reload the application just to be sure and we can add some bananas we can eat them perfect so now we can add and remove bananas from any place we want and we always see the current amount in the top menu the next step is to actually build some units instead of just eating bananas with no result for that we need new models or classes in other words you have already seen the weather forecast class or model here of the example implementations we can use these models in both the server and the client project to do anything we want to do with them to build units we first need a unit model the idea is that with the unit model we define the different kinds of units we want to make available in the game like a knight or mage for instance so let's create that model now in the shared project and give it some properties you right click the shared project add class and we call this unit let's make this thing public and then we add some properties the very first thing should be an id then we give this thing title next thing i would like to add is a value for its attack and also the opposite the defense and then every character should have an amount of hit points of course this is our health and maybe we can already initialize that with a hundred and the last thing is also an integer and this should be the banana costs so we need a costs or a price to build that unit so this is the definition of a unit now when a player or a user builds a new unit there should be a representation of that particularly built unit for that user so we need some kind of mapping model to store the complete list of units the user has built let's add a user unit model next we right click the shared project again add another class call this user unit make this public again and this model now gets an integer for the user id this might not make sense now but it definitely will later when we add the database and so on then we add the unit id you've seen that a second ago of course and let's also add the hit points here because later when we let units fight against each other these hit points will definitely change okay great these are all the models we need so far let's implement the unit service where the building magic happens next we start with the unit service interface so again in our services folder of the client we add a new item an interface and we call this i unit service make this public and this thing now will have a property that defines what kinds of units are available to build another property which is the list of all the units the current user owns and a method to add units to that list so again first a list of units we call this units get set and of course we add a using directive here for blazer battles shared then the list the current user owns so a list of user units and we call this simply my units with together and the setter and the last thing the method add unit with the specific unit id okay now let's create the implementation class add class unit service implement the i unit service and we can also say implement interface let's also remove these thingies here we don't want to throw an exception and this one here all right let's start with the units that will be available let's add a knight an archer and a mage and all of them will have different values for their attack defense and the banana costs so for these units here the available units we initialize a new list and already add some units now the very first one shall be a knight with id one it's a knight so we also set the title tonight the knight has an attack value of 10. defense is also 10 [Music] and the banana cost is a hundred like that let's copy this and add two more of course the ids are then two and three then the title of the second one shall be archer with an attack of 15 but the defense is only 5 banana cost 150 maybe and the last one is the mage with an attack of 20 but only one defense banana cost 2 100 like that one little thing we have to change here is in the interface now since we initialized them and we don't want to change them for now we remove the setup for the units and then this arrow here is gone all right now the my units list can also be initialized with just a new empty list of user units like that and last but not least the add unit method which will get the id of the unit and then add a new user unit to the my units list so first we say bar unit is from our unit list the first one where the units id equals the given unit id and then our my units array or list gets a new unit a new user unit with the unit id from the actual units and we set the hit points to unit hit points like that so we've got our available list of units the knight the archer and the mage the user unit is empty at first and then we've got this method add unit that takes a unit id so one two three for instance and then we look for the specific unit here and add this new unit to our my units list please note that this might not be the best design decision we are not adding a new unit to the unit's collection we are creating a new user unit and add it to a user unit list so maybe we should use some kind of user unit or army service because these objects will be the army of the user in essence however to keep things simple i'm fine with this conceptual flaw for now but we will change that later when we implement the back end with entity framework sql server and so on all right now the last thing we have to do is register the service so again we go to the program cs can actually copy the line here and then say i a unit service and the implementation class is the unit service all right now it's time for the last piece of the puzzle we've got the models and the service and now we can use both in the build component so let's do that next so in our build component the very first thing of course is injecting the unit service so we inject the i unit service and also call this unit service then we move to the code block we can actually remove the eat bananas method first regarding the html part i want to use a select box to choose the unit that should be built the selected value of that drop down will be the unit id we need a variable we can bind this unit id too so let's add a new variable and call it selected unit id it's an integer selected unit id and maybe give it one as default value first and now let's add a new method and call it build unit so public void build units okay here we first grab the complete unit with all its values with the help of the unit id so we say bar selected units is the unit service units and then first or default where the unit id again equals the selected unit i d and with that we've got all the information of that unit and can use the banana cost to decrease the current banana amount of the user by calling the eat bananas method of the banana service so banana service eat bananas and then selected unit banana cost and then we add this new unit to the user units so unit service add unit and then selected unit id great so far the code block and now we add some html now the button calls the build unit method and we can change the text of the button as well so first build unit and instead of only eating bananas we actually built a unit now and now to the select box as mentioned it will bind the selected unit id and with the for each we will display all available units so first let's add a diff up here and we already give this thing a class like form group to make it a little bit prettier and then we use a select typical html select element later we will also make use of the input select so the built-in component of blazer webassembly but first let's use this select here we bind the selected unit id and we can also give this a class like form control and then we make use of the for each here we can hit type twice and then we can set the variables so we want the current entry to call unit and the collection is the unit service units and in here now we add an option the value of the option is the current unit id and we want to display the unit title and also maybe the banana cost with the bananas text here all right now to see a result so far let's add a little output to the console in the add unit method of the unit service so with ctrl p we can go to the unit service and now here in our add unit method we say console rightline and then something like unit title was built and also console.writeline and then your army size my units count like that maybe let's test that here's our build page already with our select drop down we want to build a knight built a knight was built our army size is one let me fix this here real quick and the episode rebuilding again we built the knights we built an archer and we built a mage with another one and another one and another one and our bananas are now below zero so this works like a charm actually we we're able to build our army but as you can see there's still some work to do we have to add an error message and block the building of units if there are not enough bananas available and it would be nice to see your army on a separate page instead of the console let's create that page next let's create the new army component which is also a page first in our pages folder we add a new razer component and we call this army we can already add the page directive and add the army route and since our units are stored in the unit service we also inject the unit service with add inject i unit service unit service and now we write a mix of html and c-sharp again we display all our units in a table and wouldn't it be nice to show a matching icon for every unit and also show the current hit points let's do that first let's add my army here and now the html we use a table with the class table and then we use a for each again our current item is the user unit in the collection unit service my units and then we add a table row and a column and in that column now for the correct icon we use a switch case where we have a look at the user unit unit id and in here now we have three cases of course the first thing or the first image is the icons night png close this and add the break here and now let's copy this paste it two more times we have to remove this here otherwise it doesn't work and for the cases two and three we've got the archer and also the mage so with that we should see the corresponding images then let's add another column for the actual title so we say add unit service units and then the one where the unit id equals the user unit unit id we do that to get the title of the unit and the last column then to display the hit point so user unit it points hp maybe something like that now the code block can actually be left empty this time and next we have to be able to open that page of course so let's add a new nav link in the nf menu component so right here we add another list item call this thing now or change the href to army we can change the icon of course maybe use the people icon this time and here we say my army great now the last step would be to remove the output in the console of the unit service so let's just remove this here and that should be it let's have a look go to chrome we currently see no army of course because the app has been rebuilt but let's add a knight build this one go to army and there is our knight let's add an archer also a mage then maybe a knight again and this is our beautiful army now we've already seen that the amount of bananas doesn't really stop building new units when the amount is below the cost of the unit we can still build it you should definitely change that and tell the user that there are not enough bananas available additionally when we currently build a unit we don't get any feedback maybe some kind of pop-up notification a message or a so-called toast would be nice so let's add that next the easy way to display an error message would be a little diff that is shown if a certain condition is hit let's try that first in the build razer component we add an if condition below the button and if the condition is true we show the little hint that we've got not enough bananas we will add the variable in a second first the if so at if and then maybe we call this neat more bananas and again if this is true then we say div class validation message and then simply not enough bananas and the sad smiley now we switch to the code block we add the boolean variable bool need more bananas and we set this to false first and now down here we make the actual check so if banana service bananas is below the selected a unit banana costs we say need more bananas is true and then we return and otherwise we reset the meet more bananas flag to false all right let's test that already we go back to our application [Music] go to builds let's use the mage we build it okay one more time and now not enough bananas and we were able to build five mages alright if i want to build a knight now it's not possible now we can add bananas again of course test that again works then we get the error message and when we have enough bananas again the error message disappears sweet so this already works like a charm but i promise to add a toast message to the game so let's do this next there is this beautiful library by chris saint-e called blazered toast we can use it to display our toast messages we simply manage the nuget packages of the client project and search for blazer toast but remember first we have to stop the application so now we are able to right click the client project and then manage and you get packages and here in the browse tab we can enter blazer toast hit return and there it is blazer toast by chris santi and of course we want to install the package we say okay and that's it if any errors or warnings occur after installation it might help to rebuild the whole solution after that we have to make some configurations first in the program cs we register the new toast service and add the corresponding using directive so first here we say using blazard toast and here we can say builder services at blazered toast and then we have to go to the index.html and in here we add another style sheet so here link href and this thing gets the href underscore content and then blai serge toast and then blazert dash toast min for the minified css like that and we say rel equals stylesheet then we add a necessary using directive to the imports eraser file so there it is we add using blazard toast and also another one blazered toast services because we use the service to display the toast message and finally we have to add the toasts to the main layout so in the main layout here on the bottom that's important we add blazard toasts with the s in the end not only blazer toast it is blazer toasts and we close this we save everything and now we can use the toaster everywhere we want and it'll always be displayed on top we had an issue in the q a actually where we put the blazer toast component up here so on top of the div and in this case the there was a problem with the z index in the css so the toast notification was not on top but if you put the component at the bottom here then it will be on top of everything else and i would say we start with the build component next to will show our toes notification so again build razor and in here now first we inject the toast service with add injects and then i toast service toast service like that and then we use it in case of too few bananas so in the code block we already have this if condition here and additionally to the flag we can now say toast service show and we give this a text not enough bananas for instance and we can give this also a title and i think the set smiley fits here really well and that's already it we can test this now first we have to start the app again with dotnet watch run for instance and then here in chrome we go to the build page let's build a mage and now we get this beautiful toast notification that we've got not enough bananas so works like a charm we can also change the position of the toast and to be able to do that we add the reference blazer toast configuration to the main layout so let's go to the main layout first and up here now we say using [Music] blazered toast and then configuration and then for the components now you know how parameters work we can say position is toast position and then for instance bottom right we save this and then let's have a quick look again application has been rebuilt you build the knights and now we get the toast notification on the bottom right nice there are even more configuration options available feel free to have a look at the corresponding github repository which would be here github com blazer toast and when you scroll a little bit down then you see configure toast component and then you can set the timeout the icon type and many many more things but for now i would say this works and in the next lecture we will also add a success message adding a success message looks a little bit different in the case of building a new unit now why is that you might ask well the error message was created in a razer component but adding a new unit happens in a service hence the success message should be created in that service as well so we have to inject the toast service in the unit service so here in the unit service to be able to do that we need a constructor first so up here we now say ctor hit tab twice so this is our constructor now and here we say i toast service and call this thing [Music] toast service we have to add a using directive for using blazer to toast services and then what we can also do is ctrl period and then say create and assign fields toast service with that we get this private read-only toaster this variable i like to add an underscore here and i'll also change it here so now we've got our toast service and can use it in the same way we used it we used it in the razer component so for instance in the add unit method now down here we can say toast service show success this time and regarding the texts we can now say your unit and let's use the title so unit title has been built and for the toast notification title we say unit builds and that's it again we can test this already there's our app we built the night and we get our toast notification that a nice knight has been built we can build an archer and also a mage of course and when we have a look at our army there they are perfect now you know how to use any kind of toast messages anywhere you want congratulations you learned a lot in this section you have made your very first steps with blazer web assembly we started with an overview of the whole solution with its client server and shared projects directly after that you created your first razer component by yourself and learned all kinds of ways how components are able to communicate with each other and how to use data binding and event handling in razer components after that we created new modeled to build units like knights ultras and mages to do that we also created new services and utilized a drop down list and a for each loop to choose the unit the user wants to build then we created a new page to display all the units of the user and also edit toast notifications to give the user feedback of the building process you are now able to display error and success messages to the user next up we will cover forms and authentication in blazer webassembly welcome to the forms and authentication section in this section you will learn all the parts that are necessary to register and authenticate a user first we will start with edit forms built-in forms components and validation with that we will create new models and use these models with these forms after that we will dive into the authentication how does our web application know that a user has been authenticated and that this user is authorized to view a certain page for instance by answering this question you will use the authentication state provider the authorized view the authorized route view and so on additionally we will utilize the local storage of the browser and in the end clean up the navigation so that our browser game looks different depending on the current state of the user let's start we start with creating a simple login form in this section we will kind of simulate the authentication of a user because there will be no web service call we will add one later when we implement the web api with entity framework of course but for now let's build a login form and simply authenticate the user with any credentials to add a form we use the edit form component an edit form needs a model to map its form components like input fields for example with the corresponding properties of that model so let's create a simple user login model in the shared project first so right click the share project and we add a new class and we call this one user login let's make this public and this thing only gets two properties the first one is a string which is the user name and the second one also a string for the password now we can already make use of the built-in validation feature here we just add the attribute required on top of every property and we'll see in a minute what effect this attribute has so in brackets we say the username is required and we also say that the password is required of course and to be able to use this we we add the reference system component model data annotations great all right now let's create a new page the login page so in the client project this time right click pages add razer component and we call this one login we can already add the page directive page and the route login and now here we can use the edit form component and to make use of this component we have to add two arguments the first one is the model we will add the corresponding model in the code block in a second and also a function for the event on valid submits there are also other events like on invalid submit for instance and on submits if you want to run a validation by yourself but let's keep things simple at the beginning so we can add a model variable and a submit function in the code block and use them in the form and let's also add a reference to the shared project to the imports razer real quick so that we don't have to use the complete namespace for the user login class so here simply using blazer battles and then shared and then we go back and now in the code block let's add our user login variable so private user login user which is a new user login and now we can use this variable here simply add user and for the on valid submit submit event we add a private void and a login method like that and then we can add this method here and now we can use the built-in forms component input text to create our input fields for the username and the password there are more forms component of course and we will use them in the registration lecture but for now we use the input text and apart from just using these components let's also try to make this from a bit prettier so we will also use divs with certain classes and so on so let's start with the diff and the class form group you know in this div we add a label for the username we give it the text username and then finally the input text component of a blazer the id here now is the username and we bind a value like that this is again how to do a data binding with a blazer and the value here is the username of our user model and we also give this a class which is form control like that and then we can actually copy this complete div for the password it's also a form group class or we use the phone group class and now this label is for the password we also give it the password label here id is password and the value we want to bind here of course is also the password of the user now and what we can also add is the type password so we do not see the text actually and the last thing we can add is a button of type submits give it also a class button and button primary and add the text login alright and maybe the handle login method here can be used to display the username and the password in the console so let's say console.writeline then we add the user username and also the user password all right i would say we test this already everything is saved make sure to start your application with net watch run maybe and then go back to chrome we do not have enough menu entry for the login but the route is a login so simply add login to the address bar and there is our forum we open the console so that we see what we have entered we can add a name like patrick for instance and the top secret password here hit login and this is our results perfect we see a form we see the output in the console on submits but what about the validation now and what about actually authenticating the user now to use the validation we have to add the data annotations validator component so let's go back to visual studio and right on top of the edit form we add data annotations validator there it is already and we save this and then go back to chrome and when we now try to log in with an invalid form the invalid control gets a red border we can also display an explanatory text to do that we go back to visual studio and then add the validation summary component so for example below the button we add validation summary close it save this and now when we hit login sweet we get the text here that says the username field and the password field is required of course we can also enter a custom error message to do that we go back to the user login model so in here additionally to the required attribute we can say error message and then something like please enter a user name save this again and now we see our custom error message but what about actually logging the user in well actually you would use the authentication state provider for that but we're not ready for that yet let's simply use a variable that stores an authenticated state and change the content on the login page accordingly so back to our login razer component we add a variable bool is authenticated which is false in the beginning and when we click the login button we simply say is authenticated is true and now let's simply add an if condition and if the user is authenticated we display something else instead of the login form so if it's authenticated and here in the else case we put our login form and here we simply say in a header welcome and then user username like that alright so now let's add a username again and a password we click login and we see welcome patrick well you see this kind of works but it doesn't really feel right we are still on the login page and the whole time the top menu did not change so there's definitely a better way to handle this but before we get to that let's have a deeper look at the built-in forms components with the registration page next the edit form of blazer webassembly provides the following built-in form components you can see here on that page so we got the input text we have already used but we've also got the input checkbox input date input file and so on lots of stuff and we will utilize most of them for the user registration but before we can do that we need a model again and with that new model we will also use more validation features so let's go back to visual studio and let's create a user register model here in the shared project we hit add class and then user red gesture make this public again and with that model again we will use new validation attributes i will explain them along the way the final user model will be created later when we use the web api and entity framework so let's start with the properties only and then i will add the validation attributes first what we can do is use an email for the registration of course after that again i would like to use a user name then we will use bio that's because we can use the text area then and then we will use a password again and after that i want the user to confirm the password simply because with that i can show you a way to compare the password and the confirm password string and if the passwords do not match we can display an error message after that what i want to do is i want to enable the user to choose a unit at the beginning or upon registration so we will add a start unit id and for that we will use the input select and we can already initialize that with the value one then for the input number component we simply add some bananas and yeah up in registration the user can decide how many bananas he or she wants then for the date component we can choose something like the dates of birth and we initialize that with datetime now maybe and then for now the last one is the checkbox so a bool for is confirmed and we will use a validation to say that the user is confirmed we could also choose something like i accept the terms and agreements and so on you get the idea so these are our properties the email for the input text the username for the input text then the bio for the input text area a password and confirm password also for the input text but i will show you a validation feature here then we will use the input select for the start unit id the input number for the bananas the input date for date of birth and then the input checkbox for is confirmed all right these are the properties and now validation again we can choose required here and again add the reference system component model data annotations and also for email we can validate the correct form of the email address that's it for the email the username we can say we want to have a specific length for the string or a maximum value for the string and this then would be the string length we can say i want a maximum length of 16 and also give this a custom error message like your user name is too long 16 characters max something like that and of course close this all right now the bio does not really need validation but the password would be interesting first we say the password is required and also let's give this a string a length also with a minimum length this time so let's say the maximum length is a hundred and then we say the minimum length you can set it like that is six so you have to enter a password with at least six characters and then confirm password as i said we can compare this with the password property this is the other property as you can see and also add an error message like the passwords do not match okay then regarding the bananas start unit doesn't need validation but the bananas for instance we can say we want a specific range so the user can set bananas and let's say they can choose the difficulty for the beginning of the game by themselves so we can start with 0 and a maximum value of a thousand and again add an error message that says please choose a number between zero and a thousand like that and then i think the last thing we can add here is a validation for is confirmed because we only want to accept users that are confirmed in essence so for that we have to use the range attribute again but say type off now is bool and the range we want to accept we have a minimum and the maximum value feels kind of strange but we have to add true for both so this means this is only valid when the checkbox is active and for that again an error message only confirmed users can play like that of course in every case scenario you would send an email so that the user has to confirm the registration but instead of is confirmed you could again also use the checkbooks for i accept all the terms and whatever again i think you get the idea but this is i think enough for the user register model we've got lots of properties and also validation and in the next lecture we built the form for that all right so let's create a new page here we add a new razer component and we call this register and this is our register page so let's add the page directive and the route is simply register and we can start with the code block actually i would like to add a user register model for our edit form so new user register and also a method avoid handle registration [Music] and here now we just say console writeline and then we want to store this new user in the database but we will do that later of course okay great now the edit form with all the user register model properties this time instead of the validation summary we will use the validation message below the corresponding form control maybe it's more convenient for the user maybe it's not i leave this up to you alright we have by the way to also inject the unit service because we will give the user the option to choose a starting unit so for that we need all the available units so we inject the unit service like that and then the form so first the edit form component we have a model of course this is our user and then on valid submits we call handle registration and now similar to the login form we start with a diff give this thing a class form group and in the div we add a label this time for the email give this thing the name email and then the first one is the input text again with id email we bind the value user email the class is the form control and that's it for the input text but now as i said i want to use the validation message attribute here or component sorry and to use this we have to give this or to set the parameter for and here we have to enter a function actually with a lambda expression that says this is the validation message for the user email like that so this is the very first one now we can actually copy this for all the others so we've got the email we've got the username we've got the password we've got the confirm password the bio the start unit id the bananas date of birth and is confirmed and now of course we have to make some changes so the username is pretty easy i guess simply change email replace email with username then here also username [Music] so this should be it for the username and then the password which is a bit different text is simply password as well as the id but now the label is the password we want to bind to the password and also the validation message and again give this a different type so that we don't see the text and now for the confirm password it's in essence the same we say confirm password add it here change the text here as well confirm password same here and here and also add the corresponding type okay so we got the email username password and confirm password now for the bio this is not an input text this time this is an input text area so like that you see it changed automatically and we bind this to the bio and also change this here of course this is the bio here and here and of course here for the validation message although we can actually leave that because we do not have a validation attribute added to the bio so just remove it the same actually for the next one the start unit id but this looks a bit different anyways we've got the text area now for the input select first the label is for the start unit and we also say the text here is start unit but now this is an input select and here we remove the validation message id again start units we bind this to the start unit i d and now inside that component we add a for each and this is again why we need the unit service we say for every unit in the unit service units we add an option with the value unit i d and we display the unit title like that and after that we can move on to the bananas which is an input number component so first this is for the bananas like that and then here we say bananas as well as here and also here but this now is an input number component that's it for the bananas and now we've got only two left i hope you're still with me first the date so we've got a label for the date let's call it what it is date of birth here and here we can remove the validation call it date of birth and the same here and again this is an input date now okay this should be it for the input date and now finally the last one is the input checkbox this looks a bit different we have the validation message first for is confirmed the label let's call it confirmed here and there we give it the text confirmed but to make this look a bit better we say this gets the class form check label and also the div now gets form check here change the property and then also change this class here not form control it's form check input and finally say input check box and remove this on top i hope that's it and the very last thing is add a button of course with the type submit and the class button button primary and call this register all right take a deep breath this was a lot so let's save this and then have a look so back to chrome we manually enter the url register now we've got our form that's already nice and now let's have a look and test all the validations so first hit the register button and nothing is happening the button works we see something here in the console but of course we have to add the data annotations validator so on top let's say data annotations a validator save this and then have a look again we hit register and now we see okay the email field is required and the password field is required okay this works fine already now what about the username let's say this is my big username hit enter and we see your username is too long 16 characters max this works what about the bananas we have a hundred but let's say we want ten thousand bananas you register it says please choose a number between zero and a thousand we can uncheck the form and we already see only confirmed users can play and then what about the password we say one two three for instance it already says the field password must be a string with the minimum length of six and a maximum length of a hundred that's nice so let's add six characters register then it says the passwords do not match so i think this already works so let's try to register a user now with an email address mail at patrickguard.com this is my username my top secret password this is a wonderful bio let's fix this i want to start unit yeah let's say night night is great a wonderful bio i want a thousand bananas date of birth yeah that's okay and then we say uh this is confirmed you register and we see stored this new user in the database great this works just fine now there are some things we can change of course before we move on the very first thing i want to show you is how to add an asterisk for the fields that are actually required and we can we can do that real quick with css so let's do that in the next lecture all right so we see in the user register model that the email is required the username isn't but the password is required as well and i want to see a specific character for that now to make this possible we add some css and we can also use css isolation for that so this means we've got our pages folder here and the register razer component now again we can use css isolation so just enable that for this component this css the style sheet in essence or we can add it to the css that's totally up to you but let's add a css file here we say in the pages folder add and then new item [Music] this is a style sheet and this has to be called register razer css you can see it's now under the register razer component and i want to use a class called required and now with colon colon and then after we can add our character to say that this is required this is the one we can also say the font should be bold and also set the color to red and then back here we say for the label class required and the same for the password save this and then have a quick look in chrome app has been rebuilt already and you can already see now we've got this asterisk for the email and the password because these two are required great now there's another thing i want to show you and this is how to lock objects to the console in our case the complete user object because saying let's turn the user in the database is not really enough for me i want to lock the complete object and this does not work with console.writeline we have to do something else for that so let's do that next so although the promise is that with blazer web assembly we do not need javascript anymore this statement is not really true as you can see here console.writeline says only store this new user in the database but we've got a model we've got the actual user and what happens now if i want to see this user i can save this and then have a quick look in chrome again i enter an email address test at example.com for instance a password and then i say register and then i get something like that okay i see that my model is of type user register but i actually want to see all the properties of course now in javascript this would work with console log for instance and then the user but don't have do not have a user here in this context so what can we do now the easiest way is to actually inject the javascript runtime to do that we say add injects and then i js runtime call this jsruntime and with that now we can use any javascript method we want so for instance we can say js runtime and then invoke async or invoke void async and then we say console log this is the actual method we want to call and then user like that so let's save this as you can see here this method invokes the specified javascript function asynchronously now we do not actually need to call this asynchronously but there is no other method available so let's just keep it like that we save this and then have a quick look again in chrome here we are again add an email test at example.com for instance the username a password this is the bio we've got the start unit the bananas the date we hit register and now as you can see this is the thing we actually want we want to see the complete object and this goes a lot further of course we could add another parameter here because as you can see it's an array of objects we can add or an array of arguments let's say this is the great new user save this and have a quick look again we add an email beautiful username password hit register and now we see the text and then the objects great again this works with any kind of javascript method here we could lock the time with console time and so on so feel free to play around with that i love this because that way i can actually lock the complete object in the console and this really really makes development a lot faster in some situations as a little bonus i want to show you how you can use radio buttons instead of the input select here because with net 5 microsoft introduced input radio button or radio group component to blazer webassembly again when we have a quick look here this is the registration page and here we have an input select to choose the start unit now instead of this input select we can choose radio buttons to do that we go back to visual studio and this is done actually real quick the very first thing is instead of input select we choose the component input radio group first because this is a group of radio buttons and then here instead of the options in the for each we use the input radio component of blazer we have to set the value parameter so with the capital v and then we can actually close this right here and give it the text after the input radio attack and actually that's already it let's also add a break here and maybe also here because this looks a little bit different and now let's have a quick look at chrome again there you can already see the change but i think well there's some css work we can do here the very first thing i would add is a space between the actual radio button and the text so back to visual studio just entering some spaces does not work so what we can do is add a span for instance put the title into the span and add a style i know inline styles not the best practice way but just for that quick example we can say padding left 5 pixels for instance save this again and now you can see this looks a bit better now we can add an email address username password and then let's say we want the mage register and here now we can see we get the start unit id 3. so already works like a charm i leave this up to you if you want to use the select box or the input select or the input radio with radio buttons and now i would say we finish up the registration process there may be times in a web application where you want to navigate a user to a certain page for instance after the registration process you may want to navigate the user to the login page so he or she can start with the game with blazer you can use the navigation manager for that so here in our register component we first inject the navigation manager at inject and then simply navigation manager and we call it navigation manager and then in the handle registration method we can use the navigation manager with the method navigate to so navigation manager and then navigate to and here we can simply add the login routes like that and save this and that's already it let's test that real quick again we enter an email address a password and hit register and as you can see this already works great and now i would say it is finally time for authentication now if you made it this far you are definitely ready for the complete blazer web assembly full stack boot camp you have what it takes to build a full stack web application with blazer web assembly web api and entity framework completely by yourself from start to finish in the next lectures of this course you will add authentication to the client with the help of the authentication state provider and the authorized view then in the following sections we will dive deep with a web api entity framework and sql server so you will build the web service that will be called by the blazer webassembly client and you learn how to store the data in a database additionally we will implement token authentication with json web tokens and after that we will enable users to store their units on the server fight battles against other users climb the leaderboard to become the best warrior and watch the history of their battles you see there is still a lot to learn with blazer webassembly as a thank you and reward for completing this part of the course i want to give you a pretty sweet discount make sure to use the link in the video description below i'm looking forward to seeing you again in the complete course [Music] you

Channel: Patrick God

Views: 13,332

Keywords: blazor, dotnet, blazor webassembly, dotnet core, .NET, .NET 5, entity framework, web api, sql server, sql server express

Id: In7YSYisMh4

Length: 141min 33sec (8493 seconds)

Published: Mon Jun 07 2021