.NET 7 Blazor WebAssembly Full-Stack 🔥 Full Course Part 1/2 (with a Web API, EF Core & SQL Server)

hey friends thank you so much for tuning in my name is Patrick I create tutorials about.net and Blazer here on this channel and in this tutorial we will have a look at the full stack and that's why I stated there's a full course of a Blazer web assembly application simple example in this case you will see what we will do in a minute full stack means we've got three projects meaning a client project for the Blazer webassembly client then also a web API this is then the server we've got a shared project for the models that we will exchange between the client and the server and we will not only use the web API you will go one step further and use Entity framework and the SQL Server Express database everything available for free to well store our data persistently there and then get the data change the data and so on and display everything on the client and before we start thank you so much to my very first pattern this really means the world to me if you want to support me too and get source code access for instance to this full course here you see right now then maybe you want to check out the link in the video description for my brand new really patreon page and also behind the scenes action discounts for courses and other stuff thank you very much for considering and now let's start with the tutorial so we start by simply creating a new project in Visual Studio 2022 in my case it's the Community Edition so available for free I want to create a Blazer web assembly app of course you can also just search for Blazer here and then you will find a server app and a web assembly app you also have empty apps this just means that we have no default Pages there no examples in there but let's here now use the Blazer webassembly app this will help you tremendously and we will create a simple video game a library because as the Gamescom is not that long ago so let's try to find the famous new games maybe in this Library very important here is that you check asp.net core hosted this means that you will get a web API project Already Here In Your solution so we've got our web service then where we can then make our database calls for instance we will also get a client project which is then Blazer webassembly and also a shared project but let's have a look at the solution Explorer when we finally create this thing there we are so let's open the solution Explorer and pin this maybe and again as you can see we've got client project this is Blazer we've got the server project here out of the box which is our web API with old school controllers here still like them more than the minimal API and again the shared project and in this example project you already see that we've got this weather forecast model here shared with both the client and the server so both can use them and this is just awesome when we run this the starting project is the server in this case but it will give you everything the API and also the client so let's just have a quick look there we are have you seen the loading screen there it is because with webassembly we have to download some stuff don't be scared these almost 10 megabytes will be reduced significantly when you publish this so it is actually not that much and really guys when you have a look at all the websites and web applications out there then 10 megabytes is actually not that much and again this is only here while developing so we see the that we have to download some stuff when we use Blazer web assembly and when we go to the network Tab and here wasn't and let me just reload this and maybe uh we have to also clear the application cache let's do that really quick so here clear site data and again we go to the network Tab and then wasn't we reload and now we see a.net dot wasm right so this is the file in this case that gets downloaded and then we get some other example Pages here again this is not there when we use the empty template with Blazer webassembly and server but here now we've got we've got this example on the counter page we have interactivity we can just click there and the counter increases we already see some binding here right so we actually just display a counter variable and maybe click it will be increased and we also see the variable and with fetch data again we've got a web service call so again under Network and then fetch xhr which stands for XML HTTP request we see there it is this is the actual call right localhost weather forecast so this is the controller name and in the response we see the data in the preview we see it a bit better formatted and this is exactly what we see here some random weather data so when we reload we also see different values here so it's not the real stuff there's no real weather API used here this is just example data and to see this here represented in the code again this is the model here in the shared folder with a date only temperature in celsius summary and then simply the Fahrenheit temperature with a function in essence then we've got the web API controller here and with that you see some example summaries and this is then the API called the end point here so this is a get call so an HTTP get a request is made please excuse me if I won't go that much into detail for that I've got other tutorials other courses like the.net Web Academy and here then we see that randomly we've got five weather forecasts uh yeah weather forecasts some weather forecast data you get the idea I think all right so that's that and then on the client on the other side we've got the pages here and there for instance the fetch Data Page and this is again the weather forecast stuff the example stuff and then I'm stopping the example or I'm stopping talking about the example and we will create our little game Library so here then is the actual call so this is actually already lots of stuff that shows you how Blazer webassembly works together with the web API but now let's create our own stuff and for that I'd say we start actually on the back end and we also start here in the shared folder because I want to create a video game model so let me just add a new item we call this a video game real quick the.net Web Academy is open for enrollment but only for two more a day days so enrollment closes in two days spots are also filling up very very fast if you don't know it yet the dotted Web Academy is all about getting your job ready in the.net web development world with a web API Entity framework Blazer on the client deployment with Azure git for Source control and so on designing with Tailwind CSS lots and lots of stuff to learn in there we've got a great Community already students are very happy about the academy so maybe you want to check it out too links in the video description thank you very much and now let's continue with the tutorial and this is actually a public class and let's just say with prop this thing gets an ID which is an integer then we have a string for the title let's say then also another string for the publisher maybe and I also wanna see the release year so maybe an integer for the release yeah all right and this is the nullable warning so what we can do here we can actually the title can be required like that and the publisher well if you don't know it then let's just set this to string empty all right that's it and now again for the backend The Next Step would be the controller actually what we can also do is create services and repositories to use the repository pattern and then dependent the injection but again please bear with me here I don't want to go too deep there are other tutorials where I do this and again also courses and if you have questions about that please just ask them in the comments below and I'll be more than happy to create additional tutorial video videos here here now I'm using a fat controller so called fat controller similar to this thing here well the whole logic to get the data is here in the controller again not best practice you would use separate Services inject these Services then in the controller and also inject repositories that only make this the database calls or the access to the database then there and you would then inject the repository in the service and so on the chain goes on to the controller anyways let's add a new no not a new item in this case we right click and then say we add a new controller here and this thing is an API controller you already can create controllers with example code but let's just create an empty one I think this is a good way to learn so here an API controller and let me call this the video game controller and in here now similar again to the weather forecast controller we can actually create simply one method to get some data now what I like to do is create a public async function with a task now returning a task an action result it is actually be sufficient actually sufficient to just return an i action result but what I like to do is already use the actual implementation class here the action result and then also a type of for instance Now video games right and with controller period we get the using directive on top and here let's just call this get all video games and here now we may be just return example video games and we use the object initializer here so let's just create a new video game and yep ID would be one and this is just the first example we will then use Entity framework with SQL Server Express and everything again available for free to really access the data from the database so and let's just say let's just add one video game again I said very new so maybe Tetris it's a new game right and here now the publisher well actually it was e-lork but let's say in 1989 it was nintended with a Game Boy so here now Nintendo got the rights and then the release year for that was 1989. isn't that a long time ago and this is still one of the best games ever made by a guy called Alex a correct me if I'm wrong so this is a great video game and this is what I want to return so let's now return we can actually just return the list but what you return with the web API is actually or what one return maybe is a status code like okay 200 right you see it there status 200 okay this just means that everything went fine but you can also return is for instance a bad request which is a status 400 or you know this not found 404 right but in my case let's just return on the list with ok now regarding the routes what's the route you see it here on top that the route for the controller here is API and then in Brackets controller so this means the name of the controller which is the term which stands in front of the controller term so simply video game so the URL or the route would be API forward slash and then video game and then how to access or how to get this endpoint here well the method is called gets or video games and this is no magic it's like a convention and the web API then knows okay I think because the name of the function is get anything that the developer here wants also to use the HTTP request method gets with no additional route meaning when we now use API video game then we should get the data shall we try that I would say we try that so let's restart the application alright there we are and now let's just add API and then video game in here in the address bar and you see this is the data that we just entered right and let me just refresh this and in this case now select all because we access this like a page right but still with that you see this is the URL now our route request method as I said it's just gets 200 okay is what we get returned from our web service from our web API and this is now the data maybe let's just add one more game so let me just copy this and another brand new amazing game was or is pong right publisher do you know it Atari and release date way back 1972 for the arcade machine so let's save that we restart the application and with that there it is let me just reload them and voila we are done so here now you see this is the data now we could use it like that right it's somehow a user interface but we can do better and we also want to learn some Blazer here right so the next part then would be to create a page or a component to display our video game data all right so how would that work again we see the pages and here now in the fetch data page for instance you also see the page directive where we then add a route and this is the only place where you need to put this all right there is no routing file similar to other Spa Frameworks in the JavaScript world where you have to configure all the routes you just say add page and that's it magic this is everything you have to do then when you want to make a web service call you see here you inject the HTTP client the same thing that is done down here right you've got the HTTP client here and then we get a function get from Json async meaning that we're actually receiving Json data from the web API and then we turn this into the actual class in our case in this case here weather forecast but now let's do the same with video games right and here they're using a table to display them well maybe we can use something else here so let's go back again to the solution Explorer again this is a page what else you get is a shared components right everything here is kind of component based this is the beautiful stuff of single page apps or a single page application Frameworks in essence again you know this may be already from JavaScript Frameworks like angular or reacts and now in Blazer of course you can do this too really great stuff really great component model and here now you see the nav menu component within the nef menu Razer file and in here now you see other components like the nav link right so this is what you can actually see when we access again our Blazer application here this is the nav menu and then the nav link is another component nested into the neph menu all right so that's that and now a page in essence is also a component because we could say for instance we remove the page directive and then use another page where we then use the fetch data component but one step after another let's now create another page for our video games so add new razor component and if you hear strange noises this is my new baby girl I'm really sorry about that if it's getting on your nerves uh I'm sorry but that way she's sleeping so she's currently in the baby sling so yeah sleeping that's great but maybe she's dreaming something and then you might hear some stranger funny noises well anyways so now we create the video games page there we are and again we can say page video games for instance let me just save that restart the application and if you're wondering why I am restarting this stuff here manually well hot reload is giving me a hard time sometimes but it's too often that I say all right I'm just working with hot reload because sometimes I do not see the change it simply does not work I don't know why so I'm just reloading uh the stuff here manually so now let's just enter a video games and there it is our video games page isn't that nice already works let me real quick add this to the nav menu here so we just copy and paste this video games is the route you can also call this video games of course and regarding the icon I think there is a great I can a percher let's see if this exists and there it is yes there it is and if you're wondering why aperture and if you're not from the gaming world well maybe I can just say the people that played portal know what this is all about Aperture Science is a company in there anyways this is not the topic of this video but great games as well so we've got the Neff link now so we can go to fetch data and then now also to our video games page awesome stuff now back to the code in you know video games and now we want to see them so maybe for now let's just use an unordered list all right like that and only if we actually have video games you want to display them so what we can do simply we say also here we have a list of video games did I really this wait a sec this is wrong video games at the page of course now we could use it like that at the using but what I rather would do is we have this beautiful Imports file here and in there we can also add this the whole using actually like that now go back remove this and now we still know the video game type isn't that nice all right so these are our video games we've got a new list of uh video games again and here now what I want to do is simply ask if we have any video games at all then we display the unordered lists right and if not we display a loading screen or simple loading text so with ADD if we can add some code here and this is amazing and I just want to ask if the games count is small or equal to zero then we display a little span not a pen a span with loading video games all right and if we have some then let's display them again in an unordered list this is the beginning of the unordered list and then here we can use a for each tap tap twice game in video games like that and you know we just say oh it's actually called games yeah and now here we just say show me the game title like that um with also the game publisher and also the game release Here I know great format right but again we can change that so now the last thing we want to add is the call to get the the games right and let's do this right when this page was accessed when this component here starts or in another word when this component initializes and for that we can use one of blazers lifecycle methods so we can actually overwrite them and here now you see them for instance on after render is one of this a life cycle or these lifecycle methods or on initialized on parameters set right these are the most famous ones I'd say and these are also the only ones that we really need here and what I would like to do is really use on initialized async because this is the very first one then you've got on parameters set meaning and we will need that probably when we want to edit a video game or create a no not create a new one but when we added one then Me Maybe want to create another page where we then set an ID and only when the ID is really set then we have the data so it could be the case when you have parameters and you want to do something with them and you already do something with them or you try to do something with them in the uninitialized the parameter is actually not set and this is why you've got this method here because there you know you've got the parameters and you've got the data and now you can do some something something with that again it's as always it's really late and it's sometimes a bit hard to focus yeah when a little baby is uh fighting against the baby sling anyways with parameter set you get the idea you have got the parameters set and then you can do something with them and on after render is when the component has been rendered in this case then you can do something else but in this case now on initialized async great stuff so here we add the async and now we also inject the HTTP client so HTTP client call this HTTP and here now let's just say VAR video game or the first result Maybe oh no actually there's already the games so here now I just say weight HTTP again get from Json async we want to get a list of video games and now comes the URI and if you paid attention you know that it's Now API and then video game or games video game video game controller right that's the name so video game this is what we want and we need another angle bracket here and no this should work so this is our page let's see if you now get our data a restart application we see the video games loading but focus focus of course this can't work so we do not set the games here and we have another level yeah could be the case so let me just change that a little so our result is this and if the results is actually not now then we say that our games is now the result all right so now this should work there they are you saw the loading screen right fat loading screen now we've got Tetris from Nintendo and Pong Atari great stuff so this is how we can now get the data and see the data but I think it is not that nice to get the data here from the controller directly it's actually just dummy data right it would be great to add Entity framework here and I would say this is exactly what we do next so what do we need to do that well first of all you just stop the application and download SQL Server if you haven't already you can simply Google for that there it is SQL Server downloads and then you can actually get the express or the Developer Edition it doesn't really matter this is up to you but these editions are free and we can work with them and another thing that I can recommend is actually the SQL Server management Studio as well again just Google for it or when you install SQL Server then they will recommend to also install the server management Studio this is just a great tool to manage your SQL Server databases but the funny thing is you actually don't need a user interface to have a look at your database because you will use the CLI to create it and then we will use our web API and Blazer to do other stuff other magic but the first thing is now here we want to do when SQL servers install we want to use Entity framework with code first migration to create our database with a video game table so how is this done well we first need some nougat packages so solution Explorer and here in the server project right click manage nuget packages and go to the browse tab very important I forget this lots of times don't include the pre-release for this example here and then we look for first Microsoft and there is Entity framework core 802 million downloads that's nice so install that please this is the first one then we need something similar the SQL Server provider SQL server and there it is Microsoft SQL Server database provider for ND framework core only 370 million downloads I accept and the last thing design shirt design time components for entry frame Accord tools so with that then code first migration will work and the last thing because I want to use the CLI for code first migration here are the actual EF core tools and we can install them with net tool install well you need the net SDK of course to make this work but I guess when you're that far in the tutorial you already did that and then dash dash global.net EF and in my case it will tell me hey you already installed that so what you can do is you can uninstall it for instance and then install it again like that and in my case now I get the version 7.0.10 all right and with dotnet Dash F or only.net EF we see there it is a beautiful unicorn with anti-frame core.net command line tools 7.0.10 and with that you already see the commands here right we got database we got DB contacts and migrations and we only need migrations and database two ads migrations and update or create the database so let's do that next but first we need a data context or a database context I just call this data context but it's actually a DB context where we will add our database set for the video games so here in the server projects the way I do this and many other many other developers do this as well we create a data folder and here now we add a new item and this is now our data context let's say or application DB context whatever you like we inherit from DB a context and then create our Constructor like that but here this thing needs a parameter which is of type DB context options our new data context here and we also call this options and we also call the base function here with our options and now the only data set we want to add here and why do we need a data set well with the data set we tell NG framework that we want the data here represent we want to see the data here represented as a table so it's in essence a property call this DB sets off type Now video game then one we call this also video games so this will be the name of the table all right so usually you just pluralize the name of the table but there are debates of that actually so you can also call the table just video game but I think video games also is a great name for a table so this means that any framework knows as soon as we start a new migration or to create a new migration that we will create a video games table all right now the last thing that is or it's not the last thing but another thing in our steps here to get a database is to create a connection string meaning how do we connect to our the web API to our database for that while developing we can use our app settings all right later when you deploy this to Azure for instance you would then use some environment variables for instance or even the Azure key Vault to securely store your connection string Maybe but again in this simple example let's just use connection strings and you see it here already suggested in the app settings Json file we can create a new section called connection strings and then by default you would create a default connection and now here with ef core 7 or now only called entity frame X7 actually would look like that first server in our case localhost or my case because I installed it on my local machine backslash backslash and then SQL Express with a semicolon and then comes the database name this is now the video game DB all right then we say trusted underscore connection is true and after that this is new to enter framework 7 we say trust server certificates Auto true that's it this is our connection string server localhost SQL Express the database which is or has to be an equal sign actually and not a colon video game DB trusted connection is true and then trust server certificate also set to true this hopefully works and after that we go to the program CS and add the DB context there so up here we say Builder Services then add DB context this will be our data context and this will again get some options because we want to tell that we actually want to use SQL Server right make sure to add the reference here and now here we say options use SQL that was SQL server and with that we again have to provide the connection string and for that we've got the Builder configuration and then get connection strings and you see it here it's simply shorthand for get Section connection strings and then here that would be our default connection and we have to add a parenthesis yep and then we're good it's been great that's it so this is the complete configuration I know maybe a bit much in the beginning so we have the data context we have the app settings for the connection string and then simply add the DB context as a service and right at the beginning of course we need UK packages and the.net EF core tools but with that then we can already run our migration again .net EF it is but we have to be at the right folder so when we have a look here this is the solution folder so we first enter this folder here and then also CD server to really be in the server project because here is the data that the migration needs very first thing now dotnet EF migrations adds and then initial or initial create because with that we will also create the database we hit return I mean everything went right we get a migrations file out of that build succeeded this looks nice and now in the solution Explorer migrations initial create and here you can see what the migration what any framework will do when you run another command where we then say Yep this is what I want to do to my database you see an app method and the down method the down method will be called when we roll back this migration so it will simply drop the table video games but when we now create or when we want to use these migrations run it will really then we create the video games table you see that from our model it took the properties and you know we've got the fields for the table ID which will then be an identity field already so automatic increments the ID then with the new uh new you know what I mean new entry here searching for the names for the terms here the title the publisher and the release year this looks great so next thing to do is dot net EF data base and then already update now create update but with update we also create this table all right this looks good and here as you can see the commands create database right it will also create this database and then also the table and now let me just open management Studio to have a quick look there we are we hit connects go to databases there's our video game database you can ignore the time tracker database this is from the.net Web Academy but here now we see tables video games also DF migrations history this is internal stuff just for Entity framework again can ignore this actually but you know we can right click edit to up to 100 rows and we see nothing of course because we haven't added anything yet but let's change that so first thing what I like to do is here now we can well I actually want to get rid of the mock data here so let me just copy that stuff so the first title was Tetris and I actually know this so I do not have to copy that so 1989 only the first entry here okay so that we really see the difference but again because again when we run this and hopefully I find the right tab there it is we go to video games again we see them to write Tetris and pong because this is not the database stuff all right so I really just want to get the database data database data nice so here now what we can do is our list is something different now now it's empty and to get access to the to the database we use dependency injection to inject our data context what we can do here now is first add a private read-only data context call this thing underscore contacts because of the with only private read only and now Ctrl period or just open the light bulb here right the Quick Fix menu and actually here not the type the the context here actually we can generate a Constructor where we also inject the context now all right so with that we've got the context now available in our controller again usually a better practice practice would be to use a service so in essence you would just create another file another class that then injects the data context and here the controller only injects the service in just four Watts a request in the service then forwards the request maybe to a repository the repository injects then finally the data context and returns that then back to the service the service then maybe turns the actual data that is returned the objects then in a data transfer objects I know lots of buzzwords here and then returns this to the controller and this then returns it to the to the client we do this actually again in the dotted Web Academy for instance or also in other tutorials and courses but this here to give you just a quick tutorial but we're already a couple of minutes in right so I hope you're still with me thank you very much to watching this tutorial that far I love you guys anyways we've got the context so now our list here actually we can uh already uh use it here so VAR list now is let's say a weight so now we've got something asynchronous here can't there it is already intellicode so nice context video games but you turn this into a list to a list async all right so with context video games we access our database set our table video games and that's it all right beautiful stuff because now we can use Link to also filter that for instance we do something like where and then we can say where the G4 game game title now is something like that or the year which maybe makes more sense right maybe you want to filter by the release year and then you say where this is greater than 1980 something like that really but uh yeah something for another tutorial Maybe so here now we've got our list of video games from the database so let's again restart the application there it is loading video games there we have now only Tetris and to make really really sure that it's really just the database data let's just add another one so here for instance space Invaders this is from the title Corporation title Corporation in the year 1978 that's the one I know pay attention here I just changed the entry I added the entry in the database I'm not reloading or restarting the application I just reload the page and I get the the data isn't that nice so here again uh reloads this is the call and also we see the data here now again we can do great stuff for instance you see in 1989 1978 maybe you want to order this by the release year so what we can do is now in here we say order come on order by and then G uh G and turn that into a list restart and now the order is different right so again great stuff now one more thing I'd like to change before we cover the other crud operation so we've got read write with the get HTTP request here but we also can create update and delete stuff so what I want to do is change the way the data is displayed on our page and all that list well it works but not that nice maybe so what I love is the so-called quick grids that will come with a.net 8 out of the box when I remember properly but with 3007 we also have to install this thing so when we go to video games here again instead of the analoged list we can add a little grids but here now in.7 we have to install the nuget package so right click the client project in this case manage you get packages and he will just enter a quick grit there it is already and we have to include the pre-releases in this case and this is the one Microsoft ASP net core components quick grid but here now I have to use the alpha not.net 8 preview because we're using or our Target framework here now is.net7 so the Alpha version this still works just great we accept and with that now let's just try that we go here and here now we just say cubic grits that's actually the one but let me add that to the import eraser so using quick grits now hopefully this works but we also have to set the items as you can see here the grid item so let's do that real quick so items and this has to be an Ike variable the type right so what you can do is simply say games then as a variable like that almost done it's again really really quick what we can do here because the next step is simply the property column where we set well a property and this now G for games again is for instance the title of the game all right you can close this here and now let's just copy and paste that for also the publisher and the date or the release year so release here it is we save that we remove that and now restart our application and we see the grids isn't that nice of course we can change the style maybe not the best but it is really clean and we have a table somehow right and the best thing is that we can also add buttons here for instance two will get to an edit page or anything else right so for instance if you want to change now the Space Invaders entry then we can again add another column with an edit button or even a delete button anything like that but this is something for part two so please if you're interested in the other crowd operations with blazer webassembly a web API and the framework SQL Server click on the video here on the screen to see the next part of this video Until then thank you very much for watching see you next time take care

Channel: Patrick God

Views: 12,413

Keywords:

Id: OmBb8SDoWYg

Length: 49min 39sec (2979 seconds)

Published: Tue Sep 05 2023