🔥 Blazor WebAssembly Full Stack Bootcamp

blazer webassembly is turning the web development world upside down with blazer you can keep coding every part of your web application meaning front end and back end with the programming language and the framework you love c-sharp and net no need for javascript anymore and you can even use the same classes and methods you write for the server as well as for the client we will dive right into the code by first having a look at the standard example project of blazer webassembly and then we already built the main project of this course which is a classic online browser game where users can create an army of fighters and send them into battle against other users with some customization options and climbing the leaderboard this application will teach you how to use blazer web assembly with razer components in a playful way we will have a look at data and event binding communication between components forms with their built-in components and validation options how to use views only authorized users can see how to make calls to web service and much more additionally you will learn how to build the backend of the browser game with a web api and entity framework to store all the data in a sql lite database so by the end of this course you will have what it takes to call yourself a full stack blazer web developer with your new skills you are ready to conquer any upcoming.net web development project you want to build yourself or any project that is requested by a recruiter the only tools you need are visual studio postman sqlite and a browser like chrome or firefox everything is available for free and also cross-platform so you can follow this course on windows and mac os my name is patrick and i will be your instructor in this course i am a web developer for over a decade now i have worked for big corporations and small teams as an employee and a contractor and i just love to see the way microsoft is going with net and blazer and how important these technologies get day by day to this date i was able to run seven courses on web development on udemy about net core single page applications angular and devops with a total of over 50 000 unique students and more than 5 000 reviews so you could say my courses are booked by a full aloha stadium in hawaii are you ready to make the next step in web development i'm looking forward to seeing you in this course welcome and thank you very much for joining the blazer web assembly 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 dot net developer we will start with the client application where we utilize blazer webassembly you will learn how data and event binding works with blazer what razer components are and how they communicate there are several ways of communication between components like parameters events and services and you will see how to implement them all additionally we will build forms with all the controls blazer webassembly provides like input text fields checkboxes select fields and so on and we will also see how validation in these forms work 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 service in essence which is called from the blazer webassembly client application entity framework is used to create a sql lite database with all the necessary tables using code first migration so all your data will be stored persistently but the backend 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.net sdk and visual studio depending on when you're watching this course you can choose to download the.net core 3.1 sdk the preview of net5 which will combine.net core with the older.net framework or net 5 has already been released then you're safe to choose this sdk this course will use.net core 3.1 because by the time of recording these lectures this version has been the latest stable release so to be absolutely safe please choose this version as well regarding visual studio you can use the community edition of visual studio 2019 it's totally free and 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 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 which we will use 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 db browser for sql lite which enables you to well browse through a sql lite 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 here's the link to the repository as you can see the commits in this repository match the structure of this course 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 now let's create the project alright when you start visual studio choose create a new project first and now we see a bunch of templates here and we want to create a blazer application so we are selecting blazer app and if you don't see it here in the templates we can always just search for this and don't worry later or in a second we will choose if you want to create a blazer web assembly or a blazer server app so first just select blazer app and then we give this thing a name for instance laser battles because this will be a game where we can fight some battles okay the location is up to you of course solution name will also be blazer battles in this case and then we click create okay and now it's getting interesting we have a bunch of options available here first the dot net sdk version as already mentioned i'd like to use the net core 3.1 sdk and then we can choose between a blazer server app and a blazer web assembly app well according to the title of this course we should choose blazer web assembly here if you don't know the difference 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 a typical web application and the description 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 and 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 this is the typical structure of a modern web application maybe you already built a web application with the dotnet backend and the javascript framework like angular react or vue.js for the front end and these frameworks handle user interactions as well and make web service calls to the backend and with blazer webassembly it is the same thing in essence but you don't have to write any javascript codes you can keep writing c sharp code and even use the same classes for the client and the server i just love that fact okay so long story short we choose blazer webassembly regarding authentication we don't need authentication for now we will implement authentication later by ourselves which is a great way to learn now configure for https is fine and then comes an important checkbox which is asp.net core host that and this we will select with that selection we will already get a server project and a shared project additionally to our client project we'll have a look at these projects in the next lecture for now it's just important to know that this checkbox 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 dot net only that's it at the bottom right you can double check the used.net core version and then click create and there's our new solution great now let's open the solution explorer on the right and then you see what has been created for us the shared in the server project as already mentioned and of course the client project but let's have a look at the complete structure in the next lecture so in the solution explorer of visual studio you see three projects we have the client project server and shared 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 this file with the main method 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 you see that root component is added which would be the app component we can find in the app razer file this one right here a component in blazer is a razer file that's why it's called eraser component so the app component is the root component where you actually see the use of further components like the router here the found and not found component and the route view and also the layout view here 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 the found component will be used to display the content of the entered route and 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 layouts but let's stick to the layout view first it uses the main layout but the content can already be seen here it's simple 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 this one here but we'll get to that in a second let's have a quick look at the imports razer file now it's quite simple you will find global using directives here that's it if you don't want to add a reference in a single component add it here instead okay next let's have a look at the main layout in the shared folder well looks like standard html at first right well the only difference is that it inherits from the layout component base class on top right here and and when you look at this class you can see that it has a property called body of the type render fragment which is used in the main layout with add body and that's where the pages will be rendered additionally you can see another use component the nav menu right 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 body part this one here of the layout you could build a custom layout if you like and use that one instead of the main layout in the app razer component it's totally up to you anyways let's have a look at the pages for instance the first one here the index razer now the crucial part is this page directive on top here with a string which is already the route for that page you don't have to specify that route anywhere else just create a component add that at page directive and you're done it's the same with the fetch data and counter pages and we have a look we see the fetch data right here you see the add page using directive with the string fetch data and counter as well in essence it's exactly the same now before we have a deeper look at the code a quick word about the other projects the server project here consists of a program cs and a startup cs file now in the startup class we find the configure services and the configure methods the configure services configures the apps services so 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 project now please don't mind all these buzzwords right now 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 are using http redirection routing and so on with all these use extension methods we are adding middleware components to the request pipeline for instance use http redirection adds middleware for redirecting http requests to https now the startup class is specified when the app's host is built and you see that in the program cs file this is done in the create host builder method here the startup class is specified by calling the use startup methods now regarding the app settings json file 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 of the standard example we'll get to the details of controllers later for now it's only important to know that we can already call the get method down here which is actually done by the fetch data component and i'd say we do that next okay 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 dot net core hosted laser web assembly applications is that you can simply start this whole application with the little play button on top let's do exactly that 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 application and there it already is but let's have a close look again just reload this thing and here you see the loading text and now the question may arise where does this come from well we go back to visual studio for a second and in the solution explorer we see the client project has a folder www root which is well the root of the website and next to some cascading styling sheets we see the index html file and when we open this thing here we see this loading text now any resources you want to add later like icons images other style sheets and so on they have to be added to this www root folder we will use this place later the crazy thing now is that you can actually debug the client and the server at the same time you see back to the page here on the counter page that this button here increases the counter now let's have a look at the code we go back and then in the pages folder we go to the counter component or the counter page now it seems like there's not much to see here but actually that's already happening a lot now you already know the page directive here and then you can use this current count variable which can also be found down here in the add code block this is the add code block and here you see the variable current count and with this adds current count thing here you already see how data binding is done in blazer web assembly so you can use this variable of the code block within your html code above and in the button this button here you can already see event binding the on click event marked with the add sign again calls the increment count method simple as that and the increment count method you know it already increments the current count by the way if you don't like having your c sharp code together with your html in one file you can create a code behind file for your c shop code instead but now let's set a breakpoint inside the increase count method now we go back to the page and when we click this button here we come to the client project and hit the break point crazy huh and here we can see the current count let's remove the break point again and continue the application we see the results and are really crazy is that this also works for the service project so you start this application and you can debug the client and the server at the same time so let's have a look at the fetch data page first back to visual studio here the fetch data component and down here in this method this page makes a call to the web api of the server project we can also see that in the network tab of google chrome so let's just have a quick look we open the console with f12 and now here in the network tab let's make this a bit bigger and filter all the requests now in the fetch data you see that here is a call to the web service and we get this data here you can see also on the page now looking at the code again we can see a lot of new stuff first the using directives we are referencing to the shared project here because we're using the weather forecast class then we inject the http client which enables us to make web service calls now inside the table this table here that you have already seen on the page a second ago there is a for each loop and this for each loop uses the four costs received from the service we'll do all this later by ourselves so please don't mind my pacing for now if it's a bit too fast in the code block now we see a new method called on initialized async and this thing is part of the component life cycle and it's called as the name may imply on initialization of the component and in this method we are using the injected http client to make a get call to the weather forecast routes which would be the weather focus controller of the server project the one we have seen before this one here and this thing by the way you can see it down here is using again the same weather forecast class of the shared project so we see already that the client and the server project use both use this single class here okay now back to the controller let's make a breakpoint let's set a breakpoint here in the in the in the get method okay and now let's see if we hit this breakpoint again by just reloading the page and yes there is something happening the debugger is paused and we can see that we actually hit this breakpoint we can step through everything or just continue this stuff fantastic now although being able to debug client and server at the same time is great i like to run the application in another way actually 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 so instead 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 there's only one problem so far this only works for the server project if you make any changes to the client project they won't be recognized but of course we can fix that now first how do you get to the package manager console i have it open when i stop the application first you can see that it's already open here in in my ide but you can of course open it in another way you can either choose the terminal or other windows and then the package manager console here this is exactly the same thing and the command i just told you is dotnet watch run but first before we run this command we make a little change and to make that we have to go to the project file of the server now you can see a bunch of item groups already two of them and we will add another one item group and then we add watch include and then clients and then we want to watch any razer any razer component or razer file of the client projects that's it already now what is happening here with the netwatch command the application is watching your code so if any file changes if you make any modifications to you to your code the app restarts automatically but this only works for the server project but with this new item group here in the project file of the server project we tell our application to also watch all the razer files of the client project so now if you make a change to the client project the application restarts itself as well okay now let's open the package manager console and as you can see we first have to navigate to another folder this won't work here you can see it when i start to run this application it won't find any app here so first we have to change the directory go to blazer battles and then also to the as you can see here we have three folders so now we change the directory and move to the server folder and now we can run the net watch run command okay now when the app is running you already see the url we have to enter in chrome you see the localhost 5001 for https and port 5000 for http now this url can also be found in the launch settings json file we have a look again in the properties folder we see the launch settings json and down here you see the application url so now let's go back to chrome and enter this url now you might get this warning here because we're using an https url and don't have a valid certificate for that but that's not a problem we just proceed to the url we see the loading again and here is our application now the breakpoints won't be hit but we can make a change to the code and the app will recognize this by itself so let's go to the counter page again it's not open anymore so we go to the counter page and say current count will be increased by two we save this and now we can already see here it recognizes that a file has been changed and starts the application again now we can go back to the browser and now just please note when i now click click me it's the old version without the change so we see one two and so on and now we reload the page we get the change and now we see that the current counter is increased by two so this is the only thing you have to do you have to reload the page by yourself but i think this is this is okay it's better than stopping and restarting the ide or the application within the ide every single time you make a small change okay and now regarding the server project we see that we get five weather forecasts here so let's make a change in the fetch data or in the controller so we are here at the server and instead of five uh forecasts we receive seven we save this thing again a change is recognized the app is restarted and when this is done we can go back to chrome again reload and now we're getting seven you see this makes developing your blazer webassembly 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 so let's have a look here at the nav menu razer file now you see some data and event binding here for instance the toggle nav menu is bound to the click event you can see the method down here and we have a binding to the nav menu css class property for the css class so you can see that you can also bind to a css class you can bind the css class and this property only returns a string so beautiful this works the same way you have already seen it new though is the nav link component this thing right here now this is a built-in component for navigation links the description already says it's 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 this one here that is used with the add page directives of your pages so you see the counter string here and here in the counter page you see the string again now one last thing i want to show you in this example application is the first way of communicating between components when we switch to the index razor again you see the use of the survey prompt component with a title now this title is actually a parameter so the parent component the index raiser can tell the child component the survey prompt anything with the help of parameters now when we have a look at the survey prompt component here in the shared folder you see the title property in the code block and it is marked by a parameter attribute and then this title provided by the parent is used in the html above right here between the strong tags so that's how one way of communication works between a parent and the child component all right now that should be everything regarding the example application i guess this has already been a lot of inputs now let's make a new git repository out of this and then start building our browser game with blazer now to initialize a git repository we see on the bottom right of visual studio add to source control we click that and then we can choose gets and that's it actually now we've got a local repository where we can commit our changes and have a history of them we could also publish this repository to any remote one or use github or azure devops for instance this could also be a private repository so if you want to save your code to the cloud feel free to do so as mentioned earlier you will find the code of this course on github as well so if you have any trouble or just want to play around with the project feel free to access this project on github clone the repository fork it start it and so on all right 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 learn how to build your online browser game with blazer webassembly 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 a 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 sqlite 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 webassembly web api and entity framework we will start with a new razer component use data and event binding and then move on to communication between components i think i've said enough let's create the new razer component next now 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're going to build in the upcoming lectures assumes that we are working with an authorized player actual 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 the user always knows how many bananas are available so let's build a top menu for that so in the shared folder of our client project we go to add and then razer component and we call this thing top menu all right and now in the code block we can already create a property public end bananas get set and by default this is a hundred and now to display this value we have to use the data binding of blazer assembly by typing ads and the name of the property or the variable so here we simply say add bananas and remove the top menu here like that that's it now we have to add this component so that we can actually see it so we go to the main layout and here instead of the about link we simply use our component by typing top menu and we can also already close this and that's it now let's have a look we see in the package manager console my application is still running if this is not the case for you just type net watch run again and then the app will be rebuilt and then you can go to chrome and have a look at your application let's go to the home page and reload this thing and right here far to the right side of the screen we see a hundred well that's nice i'm not a designer but still let's make this a little bit prettier first i would like to add some icons you can get them from the resources of this lecture or the github repository we will only use the banana icon now but later we make use of the others as well to be able to use icons we create a new folder in the root folder and paste them there so back to the ide we add a new folder call it icons and then when you've downloaded them you can just copy and paste them here and now we've got them in our project folder as you can see here okay okay and after that we go back to the top menu component and then we write some html we add a first and then we add an image where the source is icons and then the bananas image and we have to remove this stuff here because it does not work with blazer and then we add the bananas variable okay now how does that look we go back to our page and here's our banana now there's one little thing i'd like to add and that would be a little css so let's add the class top menu to the div [Music] top menu save this and then in the app css we add a little style so again the class top menu and let's say we want to center this thing give it a width of a hundred percent and display is flex okay reload the page again better now one last thing to see the bananas also when the responsiveness of the app kicks in we make another little change in the app css down here we just remove the display none like that okay and now when we reload the page you see the banana and when we open the console and change the view we see that we still see the bananas great you've got your first component now let's commit this and then move on to the next lecture when you're creating a blazer application you will 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 code now we want the main layout which is the parent component to tell the top menu which would be the child component how many bananas the current user has we do that with a parameter so in the top menu component we add the parameter attribute to the property parameter there it is already simple as that and this by the way is also the reason why we're using a property here instead of a private variable a private variable can't be a parameter that's one thing to think about 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 to the main layout which is already open here and here we can simply set bananas now it is available to 200 for instance back to chrome and maybe change that again and reload the application and we see now that we have 200 bananas great that's it already and now let's see how communication works the other way around meaning from child to parent communicating from child to parent in our case would mean that a 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 called 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 create the new component in the shared folder again we click add razor component and call this at bana nas okay and maybe now let's first add a button that does simply nothing and then we already use that component in the top menu so first the button which also gets class and since we're using bootstrap here by default we can use all the bootstrap classes for instance the button info class and this thing gets a plus button a plus sign like that and now back to the top menu [Music] we are going to use the component like that add bananas okay now let's have a look sweet we see a plus button okay now that we got the button real quick just add a span to the bananas value so that it looks a little bit better and give this thing a class called pop over header and have a look yeah better much better okay with that out of the way now we want that button to change the value of the banana so how would we do that well 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 need an event callback property in the add bananas component which is also a parameter so back to the add bananas component now in the code block we add a new property this time i used this built in snippet prop you just enter prop hit tab and then you got your property and this thing is again a parameter now the return type is an event call back with the type of the value which is an integer and we call this thing bananas edit this is actually the events bananas have been added and we save this and now we have to invoke this event and we do that with a method so public voids increase banana account for instance and now we access our bananas edit event callback and call the method invoke async and give this thing a value like 10 the integer and please ignore for now that this is an asynchronous method okay and now the next step is we need something that calls this new method what about our button for instance so we go to the button and bind to the on click event with add on click and here we call the method increase banana count without any brackets or any value just like that only the string of the method okay we saved this and we are almost done now in the top menu component we also add a new method which will change the value of the bananas property so to the top menu now we add the method public void add bananas with again an integer value [Music] and now the bananas here our property will be increased by this value okay and finally we add the bananas added event the parameter to this method at bananas you see that the top menu does get the value of the fire event so that it can actually use it to change the amount of bananas now let's recap what we've done here the add bananas component this one here gets an event callback property which is also a parameter when the button is clicked this event callback is invoked with the help of the increase banana count methods now the top menu component also needs a function which is called when the event is fired we set this up by using the parameter of the add bananas component right here again because maybe this is a bit complicated we have an event when the button is clicked we call this method here invoke the event with a value and then the top menu component has another method which is just a helper method to actually set the value and then the component is integrated here or added here with the parameter bananas added to call this method here with the value okay we saved everything now let's have a look we go back to chrome we reload the page and now we just add some bananas and you see this works just fine great 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 are 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 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 which is another razer component in essence so in the solution explorer now in the pages folder we add a new razer component and we call this thing build and since this is a page now we can also already add the page directive with the route built okay great and now let's add a link to that page in the nav menu we go to the nav menu component and we can just copy this one here for instance the counter page and now here we replace the name also the routes and maybe the icon we can use a wrench for that and now let's see how this looks already okay great we got the new menu entry and now when we click build we get to our build page okay and while we are already added let's clean up a little we don't need the counter and the fetch data link so let's just remove them and we can also change the title here blazer battles and let's do the same to the index razor page remove this one here and this thing and here we can say welcome to blazer battles and the last thing i want to change is the index.html because there's also a title just add a space and that's it and now let's have a look title works and the home page works as well great much better okay back to the build page 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 now let's focus on that button first we can already add it and call the dummy method when the button was clicked and the idea is that when we build a unit or click that button that bananas will be consumed or eaten so maybe first add a method called eat bananas with an amount of bananas and before we actually consume bananas let's just log something into the console and we do this with console write a line and then a little string where we say a month bananas something like that and now we add the button that will call this method so we give this thing a name eat bananas and then bind again to the on click event on click and now we've got a little problem here of course we cannot just use the string of the method because we want to also give this method a value the amount of bananas so when we want to do it like that eat bananas this won't work so what we have to do there's another way to actually call this we can add this lambda expression here and now we can give the value to the method that's it okay let's see how this works now we reload the page go to build and also go to the console and click eat bananas perfect we see that 10 bananas should be eaten but of course the value hasn't been changed now to fix this we have to add a service so let's create one 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 a method of this 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 amount 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 we create a new folder in the client project and call this folder services and now for this new service we first create an interface and call this interface i banana service this thing will be public and we add property and bananas get set and also add a method eat bananas with an amount of bananas which is an integer that's the interface and after that we can create the implementation class of course so we add a new class the banana service and this thing now implements the ibanana service and we can also implement the interface now what i did is i hit control and period on the keyboard or you can use this quick fix menu here to implement the interface but i think it doesn't really work fine with the properties that's a bit too much and that's what i wanted okay so we've got the interface and the implementation class and now we can say that by default we get a thousand bananas and the method eat bananas just decreases the amount of bananas here okay that's nice but we have to add an event of type action now as well and also a method that invokes that event when bananas have been eaten so let's do that next back to the interface first we add the event event action on change and now in the service we also add this thing public event action on change [Music] and then we add another methods call this bananas changed and this does only one thing on change invoke okay so we got the new event on change and then we call and then we edit the method bananas changed which invokes this event and then when we actually change the banana count we call the bananas changed method okay and now to be able to inject the service we first have to register the service in the program cs file so we go to the program cs and down here we call builder services at scoped then we tell this method that we want to add the i banana service [Music] and that the corresponding implementation class will be the banana service like that and then we add the using directives blazer battles client services and that's it okay and now we can go to the build page inject the service and call the eat bananas method now in the build page we inject a service with add injects we find this thing in blazer battles client services ibanana service and call this thing banana service and now we replace our console.writeline with banana service eat bananas amount all rights and now the last step would be the top menu component which now should display the bananas of the banana service now again we have to subscribe to the unchanged event of the banana service to do that so we go to the top menu and up here we inject the banana service again blazer battles client services banana service banana service and then what we do is we subscribe to the unchanged event of the banana service so first protected overwrite void on initialized and here we say banana service on change and then we subscribe with the state has changed method which notifies the component that its state has changed so that's how the component knows that it should re-render itself and display the new banana service okay again the uninitialized method is part of the component life cycle so that's why we have to override it and then on initialization we can subscribe there's one more thing we have to do additionally to subscribing to the unchanged event we also have to unsubscribe on this pose so we have to implement the idisposable interface for that and unsubscribe in the dispose method so first implements i disposable and then down here we add the method public void [Music] dispose and then we simply say banana service on change minus equals state has changed okay now lots of code has been written let's see the result in a minute first let's recap so what did we do we added the banana service an interface first with these properties and the method we have the unchanged event the bananas property and the eat bananas method then the implementation class still the unchanged event which is invoked then we have the bananas property by default a thousand now of course that's up to you what you want to set this value to and then the eat bananas method which will simply change the value and the most important thing here is that the invoke is called then we have the build razer component or the new build page which injects the banana service and we will talk about dependency injection later but now with this banana service we can call the eat bananas method with this given amount here and then the top menu component subscribes to the banana service on change event and this is done on initialization right here now did we forget something yes of course because here we are displaying still the bananas of this property here but we actually want to display the bananas of the banana service otherwise this whole thing wouldn't make any sense so we just add the banana service here and access the bananas of the banana service okay everything is saved let's have a look we reload the page we've got a thousand bananas now you see that we are now displaying the bananas of the banana service and we eat them and now we've got 990 we can eat even more bananas this works just fine great so eating bananas works but adding bananas doesn't work anymore so let's implement that next all right now first let's clean up a little there are some parameters we don't need anymore like for example bananas edit this we can remove the same states for the main layout we don't need this parameter anymore and also now the code can be changed so in the top menu we already removed the parameter in the add bananas component and then we can also remove this parameter here and also the add bananas methods because we will add the bananas now with the help of the service okay and in the add bananas razor we can also remove the event bananas added now and also remove this line here okay now since the event doesn't exist anymore we have to implement something else for the increased banana count method you might have already guessed it we need a new method in the banana service and you use this method here in the add bananas component so first let's go to the i banana service interface and we add the method add bananas within a month like that and now in the banana service we implement this thing so public avoid add bananas and amount and similar to the eat bananas method we change the value bananas plus equals this time and we call the bananas changed method now back to the add bananas razor component again to be able to use this new method we have to inject the eye banana service so inject blazer battles client services i banana service banana service and then down here we call banana service add bananas with 10 for instance all right that's it let's test that now reload the page and add some bananas and it works again what we did this time was we added a new method to the interface and to the service where we now increase the amount of bananas and then the add bananas component injects the banana service again and uses this method and we see the value again because of the unchanged event and that's why it's important to call the bananas changed method here which will invoke the unchanged event again so that the top menu knows hey i have to re-render myself because the banana service bananas value has been changed 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 all right now 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 of the example implementations so 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 a mage so let's create that model now in the shared project and give it some properties in the solution explorer this time we go to this shared project down here and just click add class and this thing this thing is called unit and this thing is also public and now it's getting some units as already mentioned you can simply use the prop snippet the first thing is indeed an integer and this would be the id next we've got a string which is the title of the unit then we've got an integer again which is the attack value this will be used for the fights later in that course then we also got something like the defense value we've got hit points which we can already give a default value of a hundred and then we've got the banana cost so how many bananas do you need 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 so again in the shared project we add another class call this user unit this time also public and here we only need first the property user id which i have to admit doesn't make a lot of sense for now but it will later trust me and then we also give this thing a unit id which will be the id of the unit we just created and then also i want to store the hit points here because later in that course or later in that application when units or armies fight against each other the hit points will be decreased of course not every unit will be killed after one hit so we have to store the hit points separately here okay great these are all the models we need so far now let's implement the unit service where the building magic happens next we start with the unit service interface it 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 back to the client project we add the interface first interface i unit service [Music] so again we need something like a list of units which are the available units and we only get them first then we've got a list of user units let's call this my units which can also be set and then we've got a method called add unit and here we just want to give the unit id to this method and here we have to use the shared project for the models so that's our interface and now let's create the implementation class services add class unit service and this implements the interface implement interface these are our units and again i have to remove the not implemented exception okay now the first thing i want to add here are some mock units later we will have them stored in a database and receive the units from the database but for now it would be easier to just define some units right here so we create a new list of units we add a new unit and give this thing some properties first the id1 then the title a knight attack value is 10 10 defense value might be also 10 and then the banana cost of a knight might be a hundred and now let's copy this and add two more so now we have the id two title is an archer now maybe give it a bit more attack but less defense and the cost for an archer should be 150 and the last thing is with id3 a mage even higher attack but lower defense maybe even only one and the mage costs bananas okay so now we've got the units now let's also set the my units list to a new list because this will be the army of the user so my units is a new list of user units and then 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 we first get the unit from the units list first unit where the unit id equals the given unit id and then the my units list we add a new user unit where the unit id equals the id of the unit and the hit points will be set to the unit hit points like that okay now please note that this might not be the best design decision we are not adding a new unit to the units collection we're 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 conceptional flaw for now but we will change that later when we implement the back end okay now finally we register this new service in the program cs file you did this already with the banana service and now we also do the same with the new unit service so i unit service and the implementation class 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 the first thing to do is injecting the new unit service so on top similar to the banana service we write at inject then blazer battles client services and then i unit service this time and we call the service unit service then we move to the code block we can actually remove the add bananas method first and now 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 this means we need a variable we can bind this unit id to so let's add a new variable and call it selected unit id and this is an integer selected unit id and the default value can be 1. and now let's add a new method public void build unit which we will use to build the units in essence now here we first grab the complete unit with all its values with the help of the unit id so we have the blazer battles shared unit which will be the selected unit and here with the help of the unit services units we grab the first or default where the unit id is the selected unit id now 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 now we grab the selected unit and the banana cost of that selected unit and then we add this new unit to the user units so unit service add unit selected unit id great so far the code block so we have the selected unit id and then the method build unit where we grab the selected unit from the unit service with the help of that selected unit id then we decrease the banana values of the user with the help of the banana service and then we add the new unit to the my units list of the current user again with the help of the unit service now we add some html the button calls the build units method now and we can change the text of the button as well build unit and we just change the text to build and we can also give this button a class again button and button prime primary okay and now the select box as mentioned it will bind the selected unit id and with a for each loop we will display all available units so first we create div and this div gets the class form group to make this a bit prettier and then already we've got our select and here we can use bind add bind to bind to the selected unit id of the code block we give this thing also a class form control and now the exciting thing we can write some c sharp code inside of the html with the add sign and then add the for each to make a for each loop and we say for every unit in unit service units we want to do something we want to display the unit as an option in the select box so option value would be then at unit id and this unit here now is the unit of the current iteration of the for each loop and we can also use any property of this unit like the title for instance and of course the banana cost and then add the text bananas and that's it already so again we add a little div to make this thing a bit prettier and then we already create our select box our drop down we use the add bind here to bind to the selected unit id and then we can use the for each loop inside of this html to iterate through the units of the unit service and then use the properties of the unit variable in this case to set the id to the value which will then be set to the selected unit id and also display the title in the banana costs and then with the build button we will call the build unit method and the build unit method will choose the selected unit id to eat bananas and add the units 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 back to the unit service here down in the add unit we just write something like writeline and then unit title was built and console right line your army size and then we just display the count of the my units list because until now we don't display the army and the client on any page but we'll do that later of course so maybe just lock them into the console okay perfect let's test that now back to chrome we reload the page maybe make the console a bit bigger again and as you can already see we have a beautiful drop down here and the build button looks a bit better now we have a thousand bananas so we would expect that when we wanted to build a knight the bananas would be decreased by a hundred let's build the knight perfect we have 900 bananas left and we see that the knight was built and our army size is one now what about an archer works and the last one the mage perfect but now the thing is we can build as much as we want so this works like a charm we are 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 left and it would be nice to see your army on a separate page of course instead of the console so let's create this page next so let's create the new army component which is also a page first we go to the solution explorer right click pages add razer component and call this component army okay and already on top we can add the page directive with the route army and next since our units are stored in the unit service we inject the unit service so again inject blazer battles client services i unit service unit service and now we write a mix of html and c-sharp again we display all our units in a list and wouldn't it be nice to show a matching icon for every unit and also maybe show the current hit points so let's do that we start with and for each again and now we want the user units so in the unit service we grab the my units list and now we create a div with the class army lists which i will add in a second and now we add another div and then we will use a switch case which will look at the unit i d [Music] and we have the ids one two three remember so in the case of id one we already add an image where the source is icons and this will be a night so maybe use the sort and then add break and again we have to remove this because it doesn't work here with blazer in the case of id2 we have the image for an archer or the icon for an archer and this bow here would make sense i guess break remove this and in the last case which would be three we have the mage and for the mage we use the head break okay so we have our icons for our units and next would be the title so what kind of unit is this and for that we access the unit service again with the at units first and then unit unit id is the user unit unit id and then we grab the title of this thing so with the help of the unit id of the current user unit we are getting the unit of all available units and then just get the title and display this one and the last thing we want to display are the hit points and for that again we access the user unit and just show the property hit points with the text hp okay that's it the code block can actually be left empty this time and now we have to be able to open that page of course so let's add a new nav link in the nav menu component so in the solution explorer or this time maybe to do it another way i press ctrl and p and then just search for the nav menu and here i already am and now i can just copy this thing here and add the new list item for the army the route was army and also the text here is and we can change the icon and choose people for instance okay now let's see how this already looks in chrome we reload the page we've got our army menu entry here click it of course we don't see any armies now but when we built a knight for instance an archer and also a mage and then we go to army perfect we see our army well it's not very pretty of course maybe we can put the whole unit in one line so let's add some css so in the app css under the top menu this time we add the class army list we have already added to the diff earlier and this thing gets display flex justify content space evenly and also we add a little padding of 10 pixels save this and maybe we can also remove the output in the console in the unit service so in the unit service these outputs here let's just remove them because now we see our army okay let's have a look again we reload the page and we have to build new units first because the app has been restarted and then we watch at our beloved army so let's just add some knights archers and and mages beautiful 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 a unit you can still build it we 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 a message or a so called toaster would be nice so let's add that next now 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 so we go to the build component below the button we add an if condition with a variable like need more bananas and we will add this this variable in a second if this is the case we show a little diff with the class validation message this is already available this just means that the text will be read so nothing too special and we will add the text not enough which is really sad okay and now we switch to the code block add the boolean variable and set the value property in the build unit method so first the need more bananas are variable so we'll need bananas is false and then in the build unit method we add another if condition banana service bananas is below the selected unit banana cost and in this case we said need more bananas to true and then just return from that method and in the other case need more bananas will be set to false okay let's test that already we go to the build page reload let's choose the mage build a mage and what happens now not enough bananas sweet this already works like a charm and we cannot build any more units as you can see now the night for instance i can't do anything and the night has not been built i only have mages here so the error message appears and when we add banners or reload the page in this case it disappears again but let me add more bananas now and build the knight then the message is gone perfect but i promised to add a toaster message to the game so let's do that next now there is a beautiful library by chris santi called blazard toast we can use it to display our toaster messages and to use that package or install it we can do or we can install it with manage nuget packages so let's do that but first we have to stop our application so in the package manager manager console we can stop it and then we right click the client project and choose manage you get packages and search for the package in the browse tab blazered toast there it is already that's it blazer toast by chris centi and we will install the latest stable version just hit install and you're good to go now if for some reason any errors or warnings occur in your case after installation it might help to rebuild the whole solution so just go to the solution explorer right click the complete solution and hit re build solution sometimes this happens but now we have to add some configurations before we can use this new package so first we have to go to the program cs and here we have to register the new toast service and add the corresponding using directives so up here we first say builder services at blazer toast as you can see visual studio doesn't know what this is but we can choose using blazer to toast in the quick fix menu and now we got the using directive so everything is fine here now next is the index html in our root folder there's the index.html and here we have to add another stylesheet so up here we say link href and now it's underline content blazered toast and we choose the blazard toast min css and this is a style sheet okay so content blazer toast blazered toast dot min dot css the minified version next we go to the imports and add the toaster here so this would be blazered toast and also using blazard toast services and now the last thing is the main layouts because we will use the blazered toast messages or we want to use them everywhere in our application so what we do is we add the blazer to toast configuration here and then also add the component blazered toasts so now we can use the toaster everywhere we want and it'll always be displayed on top okay that's it now let's start with the build component in the build razor on top we first inject the toast service now and since we have added the toaster to the imports razor file we can do it like that just inject i toast service and the component now knows what the toast service is without adding all the other name spaces so this thing is called toast service and then we use it in the case that we don't have enough bananas so down here now in the build unit method we add the toast service and the method like show error with the with the same text not enough bananas and the title is the set smiley here like that that's it we did the whole configuration part edit the toaster so let's save this and now it's time to test that again but remember we have to start our application first with net watch run in the package manager console and when the application has started we can go to chrome and try to build more units okay we build the knights then let's try to add more mages not enough bananas we've got 100 but we need 200 perfect we see the toaster the same works for the archer we get another toaster message but the knight would be built perfect okay this works like a charm but what about a success message for instance let's do that next 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 the 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 and to do that we need a constructor first so we go to the unit service and now on top we add a constructor again we can use a built-in snippet ctor and then hit tab twice and now in that unit service we have to inject the toast service so i toast service toast service and we need another using directive here using blizzard toast services and then what we can do again with the quick fix menu so just click the light bulb or hit control and period on your keyboard we say create and initialize field toast service so the toast service is available in the unit service here and what i'd like to do is add an underline here because this is a private read-only variable now and now we are able to use the toast service in the same way we used it in the razer component because it is injected so we did not use a directive like at inject but this is how you inject the toast service in the unit service and you will see that in more detail later when we are in the back end and there i promise i will talk about dependency injection a bit more in detail because this is what we actually did in this case but don't worry about that let's focus on blazer now and the toast message so down in the add unit method we can now use the toast service with show success in this case and we add something like your unit title [Music] has been builds and title of this toaster could be unit built okay so we access the toast service and then call the show success method to show a success message that's it already time to test it again back to chrome or reload the page we have a thousand bananas we build the night and there's our success message unite has been built 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 webassembly 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 and event binding in razer components parameters event callbacks and services are nothing new to you anymore after that we created new models to build units like knights archers and mages to do that we also created new services and utilized a drop down list and 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 toasters 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 of the blazer webassembly boot camp 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 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 will look 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 the 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 and 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 so now in the shared project we add a new class and call this user login make this public and this user login model is quite simple we have a string with a username and another string with a password now we can already make use of the built-in validation feature here just add the attribute required on top of every property and we'll see in a minute what effect this attribute has so required on top and the same here for the password now as you can see visual studio doesn't know what this required attribute is so we have to install another package as you can see down here we are offered to install the package system component model annotations so let's do exactly that to be able to use this attribute just select this entry and then find and install latest version okay perfect now it is installed now this is just another way to install this new package as you have seen before in the in the section before we could do it by manage nuget packages and then install the package manually or we just do it that way okay so we've got our model we're using the required attributes now let's create a new page the login page in the solution explorer and now again in the client project right click pages add razer component and we call this a login and since this is going to be a page we add the page directive and also the login route and now here we can use the edit form component to build the login form edit form and now the edit form takes two arguments a model and a function for the event on valid submits there are also the events on invalid submits and on submit if you want to run a validation by yourself but let's keep things simple at the beginning so we have a model which we will add in a second and also the on valid submit parameter and this as well we will add add in a second first we add the model and the method in the code block so this will be a private variable of type blazer battles shared user login this is the user and this is a new instance of the user login model and then we have a method private void handle login for instance which is empty first so that we can add it to the edit form component the model now is the user and on valid submit gets the function handle login like that so again we have added the user model here the user login model and the handle login function and this is used in the edit form so that the edit form knows okay my model is the user and we have the properties username and password and the the method to call on a valid submit is handle login okay 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 components of course and we will use them in the registration lecture okay now apart from just using these components let's try to make this from a bit prettier by using some more tags like a paragraph tag and the label and so on you will see it along the way so first we have the username and we will use the label tag here and now in div we will use the input text component now this is a built-in forms component of blazer web assembly the idea in this case is username and now we want to bind the content or the value of the input text to the property of the user model so we use at bind value and tell this input text component to bind to the username of the user model so this would be the first one and then we add another paragraph with the label password and also another div and now we have another input text with the id password and then we also add the type password so we don't see the plain text and we bind to the value user password like that okay and now at the bottom we add a button for the submit function so a button the type now is submit we can also add the class button and button primary again and we give this the text login so again we have the edit form using the user model and the handle login method of our code block and then we just add some html we are free to use any kind of html here in essence the most important parts are the input text component here which binds in this case to the username of the user login model and this thing here binds to the password and in the end we need a button with type submit so that the handle login method is called okay and now maybe we can also lock the android username and password in the console so that we see an effect so down here just write console right line and then quite simple just add the user username and also the user password just to see that this thing actually works so we save this and now we can already test this i'd say so we go back to chrome reload the application and now we have to enter the route manually in the address bar so just add login and there is our form and now we can test that already with the top secret password hit enter or click the login button and we see that this works our handle login method is called and we log the username and the password in the console now the thing is when i remove the password and click login it still works so what about validation and what about actually authenticating the user now to use the validation we have to add the data annotations validator component so back to visual studio just below the edit form we add data annotations validator and that's already it when we now try to log in with an invalid form the invalid control gets a red border so just reload the page and i mean i now hit log login you see that this thing gets a red border and if i add a username then the the input text is now green but the password is red and now when i click login both are green because the only attribute we added was the required attribute so this form is valid as soon as something has been entered into the input text and we can also display an explanatory text for the validation and to do that we have to add the validation summary component so again back to visual studio and now maybe below the button we add validation summary and now we should see some explanations why are the or why is the form invalid so let's reload the page and click login and now we see the username field is required and the password field is required and if i enter a username here and hit login then only the password field is required is the only error message left nice now we can also enter a custom error message of course now to do that we go to the user login model and with the required attribute we can give this thing an error message like please enter a username like that save this and again let's test that and when i now try to log in i see please enter a username for the error message nice now but what about actually logging the user in well actually you would use the authentication stage 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 the login component first we add set variable like bool is authenticated is false in the beginning and in the handle login we just set this to true and now what we can do is we can add an if condition right on top and now we just say if it's authenticated we want to display something like welcome user username and in the else case we display the login form okay i know this already doesn't really feel right but let's test this nonetheless log in and now i can enter whatever i like well you see this kinda 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 now as you can see here the edit form of blazerweb assembly provides the following built in form components we've got an input checkbox input date number selects the input text you've already seen that and the input text area we will utilize all of them for the user registration but before we can do that we need a model and with that model we will also use more validation features so let's close this go back to visual studio and then create the new user register model and we will use new validation attributes as well and i will explain these along the way so first the new model add class and we will call this user register make this public and now we add a bunch of properties so the first thing i would like to add is a string and an email address which would be an input text now the next thing is again the username then we've got another string the bio this is something where we could use the input text area then something we already know the password of course then we add another password field to confirm the password so these two have to match and we will use validations for that to use an input number field i want to give the user the opportunity to add some bananas with the registration then to use a date we just add the date of birth and to use a checkbox we use something like is confirmed so usually maybe you would need to confirm your registration with another email but in this case we just add a checkbox for that okay so we've got the email the username bio the password confirm password property we've got the bananas the date of birth the confirmed and i think i forgot one thing which would be another string the start unit id what do i mean by that i want to use the input select for choosing a unit the user wants to start with in in essence and although this is an id we have to use a string as the type because the input select can't handle integers yet okay these are all the properties and now we add some attributes for the validation so the email address is required and we can also add email address as an attribute because then the form will check that the user has entered a valid email address so we don't have to worry about that anymore now the username is not required anymore because we want to log in with the email later so but what we can do here we can use the string length attribute and say that the max length of username is 16 and we can also add a custom error message like your username is too long [Music] 16 characters max okay we can leave out the bio but the password of course has to be entered so this one is required we can also add the string length for instance say max string length is 100 but also add a minimum length of six for instance okay and then the confirm password here we can use the com pair attribute and add the password property as a string so that we want to compare the confirm password property with the password property and also add another error message that says the passwords do not match then regarding the bananas i don't want the user to be able to add million bananas but maybe something like 0 to 1 000 so if the user wants to start with a little help he or she can just add a thousand bananas and also we add an error message that says please choose a number between zero and a thousand and now the last thing i want to add is an attribute to the is confirmed property down here we only want to have a valid form when is confirmed is checked so when the value is true now this looks a bit strange maybe but what we can do here is also add a range and say this is type of bool and the only range we accept is from true to true as i said looks a bit strange but this actually means that the form is only valid when is confirmed is set to true so only confirmed users can play and by default because i'm lazy we set this to true as well and let's also initialize some other properties for instance the date date time now just by default so it wouldn't be null later this is a night in the beginning and maybe here we add a hundred at first okay i think that's it now we've got quite some fields to fill out so let's create the form for registration next so we create the new registration component as a page so add razor component call this register this thing is a page with the robot register and we can then start with the code block we add a model again similar to the login and also a method that is called on a valid submit so first blazer battles shared user register this time this is our user and this is a new user register instance okay now the method void handle registration [Music] and again first we just log something into the console with console.writeline and then say store this new user in the database and we will do that later of course great and now the added 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 okay so we start with an edit form again and the model now is the user and on valid submits we call handle registration again we can add the data annotations validator and then we start with the email so we add a diff with the class form group we add a label which is for the email and give it the email texts and here we add the input texts with the id email and bind the value user email and can add the class form control [Music] and then as i said we can use a validation message again this looks a bit strange maybe but what we have to do is we add a function here with a lambda expression user email so that's how we get a specific the specific validation message for the user email okay and now we have to copy this and paste it a few times we have another div this time this is for the username username the id is also username of course the property and the same here okay now the password we have a label for the password password text id of the input text is also password we find the correct property and also add the type password this time and here the property for the validation message okay and now the similar thing for confirm password so the label is for confirm password the text is the same also the id the value [Music] again we add the type password and of course the correct property for the validation message okay next is the bio bio label is also bio now this thing will be a text area the value of course and since we had no attributes we have no validation so we don't need the validation message for the bio of the user then the bananas so this is the label for the bananas id is bananas and this is an input number component we find the value bananas and the same for the validation message and then the starting id this is getting a bit more interesting so let's give this thing the id start unit start a unit text is start unit and now this thing is an input select and we don't close it here we close it here we don't need the validation but we bind to the start unit id and now here we add a for each and we want to use the units of the unit service so we have to inject the unit service on top first but let's just complete this component here or this control we add an option with the value unit id to string because again we need a string here and this will be displayed with the title and a real quick on top we inject the blazer battles client services i unit service unit service and now down here this should work now yes okay so we've got our select a little bit more complicated just because we want to use the for each with the units of the unit service and then we can go to the next property which would be the date of birth and again we fixed the label date of birth date of birth change the id set the correct property and we have no validation message for that but we have to change the component as you can see here we have to choose input date okay and then the last one which is the checkbox for confirmed and now here we use the class form check and this is the label and the id confirmed the label text is confirmed we've got the validation message is confirmed the property is confirmed again here we need another class which would be check input of course the other component input checkbox and i think it looks better when we switch the position of the checkbox and the label okay now this was a lot and i hope there is no typo anywhere so we save this and then we have a look and test all the validations one more thing we have to do since we've got a new page here we stop and restart the application manually and now we go back to chrome reload the page and then go to the register page and there is our big forum now this is already quite nice and i see that i forgot one thing the most important one which is the button so let's add this one real quick type submit classes button button primary and just call it register save this and then re load the application okay now we've got a button and what happens if we click the button already we see that two fields are required the email and password field and we also see that the message the validation the validation message is now below this these okay now what happens if we enter a username which is too big like this is my big username register your username is too long 16 characters characters max perfect now what about a password that is too small the field password must be a string with a minimum length of six and maximum of a hundred perfect so we do something like that and add a wrong password here for the confirm password the passwords do not match okay now what about the bananas great and now we uncheck this only confirmed users can play okay actually i think that this works so let's fix this by adding a valid email [Music] a username a password then we add only a thousand bananas you can see that this is a number field here we have the different starting units we have the date of birth and we want to be confirmed we register and we want to store this new user in the database okay perfect now this works and it was a lot and there's one tiny thing i want to add next and then we are done with forms for now 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 now with blazer you can use the navigation manager for that so in here in the register component we first inject the navigation manager so inject navigation manager and we call the manager also navigation manager and now in the handle registration method we remove the logging here and use the navigation manager with the navigate to method to go to the login page so navigation manager navigate to and then login let's have a look we reload the page we add an email address we add a password and we're redirected to the login page perfect this already works one more little thing as you can see these two look a bit different so let's fix the log in form real quick so back to visual studio and here in the register component we just copy the password and the username and put it put it here the only thing we don't need are the validation messages here because here we use the summary but in essence this should already be it so we save the login reload it all right and now this form looks better i'd say yeah great all right so we're done with forms for now and now it's time for authentication now if you made it this far you are definitely ready for the complete blazer webassembly full stack boot camp you have what it takes to build a full stack web application with blazer webassembly 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 lite so you will build the web service that will be called by the blazer web assembly 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 you

Channel: Patrick God

Views: 16,175

Rating: 4.9342465 out of 5

Keywords: Blazor, Blazor WebAssembly, Blazor Tutorial, Blazor C#, .NET Core, .NET 5, .NET Core 3.1, dotnet core, dotnet, blazor webassembly tutorial, blazor introduction, blazor components, razor components, blazor forms, blazor forms validation, blazor authentication, blazor authentication and authorization, should i learn blazor, microsoft, web api, entity framework, sqlite, blazor full stack, blazor server, blazor train, blazor vs angular, visual studio, visual studio 2019, jwt

Id: hnVh1yVmSAU

Length: 147min 6sec (8826 seconds)

Published: Tue Oct 13 2020