CRUD with Blazor SSR (Static Server-Side Rendering) in .NET 8 🔥

hey friends Patrick here and it is on Blazer with.net 8 is here we've got static server side rendering we've got Blazer server Blazer web assembly all that stuff and in this tutorial here we will cover all crud operations but only with static server side rendering so Blazer SSR and of course I will create other videos covering server and web assembly and I actually already created another video with the release candidate 2 of8 and Blazer and there we cover pretty much all the random outs but it's a bit different now so maybe you want to check out this video as well so only static server side rendering SSR meaning no interactivity actually but we've got these beautiful new forms with this beautiful new attribute and if you want to know more just keep watching and then you know how to build all cred operations with blazer in net8 without websockets without web assembly awesome stuff I'd say we Dive Right In but first maybe you also want to hit the like button that would be great if you learned something so please guys hit it and maybe you even want to subscribe to my channel it does help really to create all these videos so thank you very much for considering and already thank you to all my patrons for supporting me link in the video description thank you so so much I love every single one of you and now let's start with the tutorial all right let's just create a new project really quick and this will be a Blazer web app now with net8 and visual studio 2022 we call this maybe Blazer crot SSR all right for static server s rendering we hit next and now this is important of course net 8 we have no authentication type here htps is great but this thing this thing is important we want to use SSR so only static server side rendering no web sockets this would be Blazer server no web assembly which would be Blazer web assembly of course and also no auto mode where we well change the interactivity type when the user reloads the page for instance so this is what we want to use none no interactive render mode so it doesn't really matter if we have per page component or Global we include sample pages so we get the weather forecast because with that we can well we can use use it to copy and paste a little bit maybe and do not use top level statements we leave this unchecked so let's create this thing and what I want to do is build a real simple video game Library there it is real quick the net Web Academy is only open for a few more hours so if you want to check it out link is in the video description we cover pretty much everything you need to land a job or get a promotion maybe as a net web developer meaning all the backend stuff with web apis Entity framework SQL Server front end with blazer of course and then also deploying all that stuff with GitHub actions and Azure and designing if you're into that stuff with Tailwind CSS so if you're interested please guys check out the link in the video description and now let's continue with the tutorial let's close this and for that little video game Library well we need a class right we have already here our the for class inside the weather razor page as you can see down here so no models folder no entities folder whatsoever but let's just do that so I create a new folder called models for instance and in here now right click add a new item and this shall be the video game and in here not a lot first thing is the ID then maybe as anable string the title of the game next thing would be the publisher and already the last thing I want to see is as nullable integer the release yeah all right and additionally I want to use Entity framework here to store our data persistently in a database and actually use SQL server for that SQL Server Express so totally free you can download SQL Server Express and maybe SQL Server management Studio to use it and see your database then so let's save the model first and after that some boilerplate code for the uh for the database stuff for Entity framework so for that I create another folder and this would be then the data folder and as you can see here already we have no other projects here in the solution meaning if you're coming from a Blazer web assembly World until net8 maybe you are used to the ASP co-hosted architecture with a server project client project and the shared project and then you would see the model for instance in the shared project and the this data folder here all the database stuff then in the server project then only the components Pages layouts and so on in and the folder structure was also different but then this stuff in the client right but now this is different I made a couple of videos actually about that architecture already just so you know again if you knew to that everything here you everything you see here is on the server all right so when we use then a component here for instance and we want to grab data from the the dat database we can directly use the data context then of Entity framework and of course we will see that in a couple of minutes so here now we add a new item this would be the data context we inherit from the DB context and with the help of the Quick Fix menu with control and period we just install find and install the latest version of Entity framework core we can double check check and here then you see version 8.0.0 isn't that nice so now next step is the Constructor so c r we hit Tab and in here now we need the DB context options of type data context call this options and we also use the base Constructor here and then we need a database base set so this thing then will show our data in a table this is a property of type DB set and then video game and usually you would just pluralize uh the name of the class here for the table name so in our case that would be video games and one more thing I want to already seed the data and we can do that with the on model creating method so protected and then override and this shall be the on model creating that's the one great and in here now I just want to add let's say three games for instance so this would then be model builder entity and for the video game entity we say has data and in here now we just add a couple of video games so new video game ID is one title for instance cyberpunk 2077 publisher would be CD project release year is 2020 now we copy that ID is two and three Elden ring from software and this was released in 2022 all right and let's just say for the third one The Legend of Zelda AR Arina of time by Nintendo of course and this was released 1998 all right that should be it and now we have to actually add new get packages first we could well already start here in the the program CS file to add the DB context to register our data context but we want to use SQL Server as a provider so let's add a new get package first right click the project manage new get packages and here now when you enter SQL Server you will find Microsoft entity framewor core SQL Server so we install this thing accept and then also when we enter tools we will find Microsoft andr cord tools for our migration code first migrations this is what we want to do here and with that we should be good to go so back to our program Cs and now down here for instance Builder services not add razor Pages this would be add DB context data context context yep that's the one and now here we can give this thing some options so options and then options use SQL server and then we need a connection string and this well maybe we can add this to the app settings Json file but first we uh well give this thing already the place to look for so configuration get connections string and then let's just say we name this default connection all right and one more parenthesis is missing and this should be it so Builder services at DB context says it here registers the given context as a service or data context with the option to use the SQL Server as database provider and now last step I hope if I did not forget anything connection strings and here now the default connection and if you also use SQL Server Express then this should look like that first we have the server and then we can name this Local Host back SLB SL SQL Express for the database we say video game DB for instance then we set trusted connection to true and also trust server certif almost certificate also to true this by the way is necessary since Entity framework seven now we have eight trust server certificate it is all right this should be it and now we can start our migrations so let's see this is our project project file now everything should be saved we can go to the package manager console we are currently here all right and if you use the tools or the tools of the new get package that we installed then you can start right away here in this folder if you want to use the net EF uh to tools well the common the CLI in essence then you would have to go one step further in the actual Blazer CR as our folder just a side note so here now this would mean add migration and for the first migration let's just call this initial and when this is hopefully successful then we will see a new folder generated for us yep build succeed it this is nice and now hopefully it will create yes there's our migration now here the migration folder this is what I wanted to tell you and in the initial file and already opened this file I love that this is is new and I'm still not used to it that it opens the migration file after adding this migration so now in the up method we have two methods here right the up method and the down method and in the up method we see that the video games table will be created that's pretty much it already with an ID Auto incrementing the identity the ID Field title publisher release year great stuff and we see our data here right the migration or the seat data that we get with that migration and in the down method we see when we want to roll back that migration that it just drops the video game table all right so now I would say I want that and we call Now update database yes even if you have no database yet still called update database you see the commands here and yeah I think this is correct yeah here it's inserting our seat data creating the table T and so on and now we can open up a Microsoft secret server Manion Studio we open the databases and here we see video game DB time tracker is from the uh D Web Academy so you can ignore this but video game DB this is the important one here for this tutorial and as you can see we have our video games table there with well our seated data isn't that nice so this is all the boilerplate stuff with the we can work with that right and now the next thing is Blazer SSR for that I want to create a new page where we first just get an overview of all the video games all right so here now add a new razor component and let's call this video game overview and this is a page so we add the directive page and the URL for that is is games and with that already what we can do of course is we can have a look at the layouts folder and the Naf menu here and we'll just add another nef link for instance use this H now and also call this games but regarding the uh the icon let's remove this and then real quick we go to the bootstrap icons which we can of course use here if I enter game I have this controller icon here and we get the SVG here as well so I can copy this close that maybe and then well this is not correct but what I can now do is simply add the SVG here save that and let's run that already and let's just see if this already works there we are we have the beautiful new icon here with our games entry and when I go here I come to video game overview and when I open the console put it here and then go to the console really and maybe refresh this then we see there's no information about any websocket connection or web assembly files downloaded right so exactly what we want here now let's just just uh keep on implementing the video game overview maybe the title can be a bit different so H3 video games same thing for the page title maybe simply video games so now we should have another title not Local Host and so on let's just save that restart and now we have video games video games that's nice weather and now video games all right this is what we need and the next step now is really our table to display the video games for that I want to start here in the code block all right so the first thing I want to add is the list of video games and by the way if you already know Blazer in particular Blazer server in in this situation now actually nothing is different at all or not much at least so we just need the video games here we will use the life cycle method on initialized async to call a method or in our case well definitely not best practice in my opinion but we will just access the data context directly and get the video games then from there and display them here the interesting part will then be the interactivity but first again once step after another let's get the games and here we have no using directive or no reference but let's just move that to the Imports file Blazer CR ASR models so now we should know the video game type these are our video games and this is simply a new list of video games all right as I already said after fixing this typo we want to use the uninitialized async method so protected override and then uninitialized async this is one of the life cycle methods maybe you've already seen here we've got also on parameter set and on after render these are the important ones and on on initialized async as the name maybe already implies this thing will be called when this component here is initialized so on initialization when this thing is here we want to grab our video games and for that we need the data context now how do we get it well we just inject it with the help of dependency injection so add inject data context and we call this thing no context and again well first we need the uh reference here let's again add this to the Imports file again for this tutorial this is okay my opinion but usually I would recommend creating another service right so you would probably add a service folder or even another project where you put your services interfaces stuff like that and or repositories and then these repositories would then access the actual data context because accessing the data context directly here well again there are better ways just in terms of maintainability for instance also readability sometimes and of course coupling right lose coupling so please for your applications you want to use uh in production maybe think this through and implement it a bit differently so again data context still the error here maybe virual Studio does not know yet that I added it to Imports file let's just see and uh now with that we add access our context with video games there they are and we can now say to list and maybe also async and for that we need another reference here so let's add again this thing to the Imports file and now hopefully the errors will disappear after a couple of hours I don't know all right now let's just say Visual Studio will figure this out and you want to display our data in uh yeah there it figured it out nice we want to display our video games now in a table and first when the count of the video games is zero then we will display a loading text and if it's not zero if it's greater than zero row then we will display a table similar to our weather forecast here right so here they checked it for the forecasts if it is null in this case then it says loading otherwise we see this table here and we will do something similar and here they simulated the delay and I can already tell you here that stream rendering is a one of the magic words here for uh static serde rendering all right one of the magic words what I mean by that is that we will see if you won't use stream rendering and loading all video games now would take a couple of seconds even if it only takes half a second then the user will notice that because the page would be displayed after this half second and this should be different right when the user clicks on the button then we should see the page and then maybe after half a second we can see the data and this is what we will do all right so first if the video games count is zero then we say again I just am inspired by the weather forecast example page here so loading video games all right and here now the table plain old HTML table regarding the class yeah we can also use the table class this is bootstrap in the end for the header T head we say we want to use well first the title then the publisher and then the release uh first Maybe the head out right and then the release year all right and for the body now we well again do it similar here to the weather forecast we use for each and for each game in our video games list or collection we say new line and then first the game title not games just game game so game title and again let me just copy this and here now this shall be the publisher and here simply the release year all right this should be it so let's just again restart our application and there we are seen that let's just try that one more time we go to games and it just works this is is great but now stream rendering so again let's just simulate that so let's just say it would take half a second or a complete second to load the video games all right so so let's say here one second to do that and when we now go and restart this thing then we see directly the games of the list but when I now click here it takes one 1 second until it opens that page again I go to home and I click now and it takes a second to see that stuff and the magic word now again is similar to the weather forecast stream rendering so here now what we can do is add attribute and then in Brackets stream rendering save that restart the application and now we should see yeah loading video games this is nice right so now I can go to home go to games page is open directly and then it loads asynchronously the video games and then just puts the uh new HTML in there changes the Dom great stuff and still without bler server or web assembly this is amazing so this is how it works with stream rendering now let's just remove this and with that we have our first CR operation in ense we read all the data now what about the other ones well the first one would be to read a single game and then be able to update it also create a new game or add a new game and then of course deleting one well first thing I want to do is get a single game maybe and creating one and upda one in essence everything will be uh done with one more page and that would be then the edit video game page for instance but my idea here now is that we will just add a button or a link rather that will navigate us to another page when we click on this thing and if we here then use one game that is already available then of course we want to update this thing or edit this thing and additionally we will add a link to add a new game but still use the same page so let's go back to visual studio there we are and first create that new page so right click Pages add and then a new razor component and let me just call this edit video game right there we are and this thing now gets two URLs actually so the first one would be simply edit dasgame and the second one is edit game and then with an ID and now when we only use this URL the ID will be null because I will also add a parameter that can be a nullable int or that will be anable int and if um we use this route then of course we get the ID and then depending on the state of this ID so do we have one or is it null then we know that the user either wants to update a game edit a game or create a new one because with an ID which is null we know that the user actually wants to create a new game all right so this is the idea behind all that and what we can also do is still or already change the title based on that state of the ID so first if the ID is null and then we say our page title is add a new video game and also use that as a header so H3 and else we say edit and then what I want to do is we will have another parameter not a parameter another property and that would be the current game and from that thing we want the title for our page title and also for the header all right so the first things we need now is the ID as a property which by default is null and we have to set this or add this parameter attribute because of that route here all right so this then works and the other thing would be our video game property so video game and then current game and this by default is a new game and now another life cycle method to get this thing for that now we need or we use on parameters set Asing so meaning after the par parameters are set this thing here we want to get the current game so protected overwrites and again on parameters set async and here now we ask first if the ID is not null then we try to get the game so this is another crowd operation here we uh get the single game with context not injected yet video games find async ID of course again inject data context context now we know the context and again here now we ask if the game is not null we set the properties here so current game title is is only if this thing is null then we set this to the game title and remove this operator here this is what we have to do here using static server side rendering all right otherwise binding the values in a minute will not work at least for updating all right so please keep that in mind it makes sense to use this operator here game publisher and current game release year is game release here all right so again why are we doing it that way so first if we for instance add a new game then we initialize that thing all right so we can use it then in an edit form here that we will add in a couple of minutes otherwise if you already have a game that you want to edit then we will also have an empty current game let's say but the title publisher and release year will be null and with that operator we will first check if it is null and only if it is null then we will set this title here otherwise we would not do that and this is how you're doing it with static Sero side rendering otherwise again when you want to update something it will will not work but for now for us interesting for us is only actually the the title here the set title and uh well the ID so do we see that the user uh wants to create a new game or add a new game or is it updating editing an existing game so this is the page so far but to open this page well again of course we have to change this thing here so regarding the edit I would like to add a button or now it would be a link to get to that page we just created with the ID of the game so here we just add another column and now here we say a and the hre now is edit dasgame and then at game ID and we simply call this edit that's it all right and regarding adding a new game a href and then edit game and here add video game all right let's try that real quick we are here in our video games list and we see the links right so edit with ID one 2 and three we can go here and we see the title isn't that great so now we can edit Ed ring cyber punk and The Legend of Zelda Ocarina of Time and also we can add a video game so here now no ID and we see the title add a new video game and also the page title works great so this works now and next thing would be really creating and updating for that we need an edit form and here are important things to well pay attention to because it is a bit different to your typical edit form when you used Blazer server or Blazer web assembly but let's just do it one step after another again so first the added form we still need a model for that this would be our current game all right and then also we have uh a method for submitting the data so on there's still valid submit invalid submit whatsoever let's just not cover data validation here we just want to say we well submit everything the user enters so now here that would be handle submit and now of course the method's not there yet but we will add it in a sec now the important thing is we have to give this form a name again this is just for SSR all right so here now form name game form for instance let's add the handle submit method real quick so here async task handle submit all right so far not doing anything but again form name is important and the other thing that we need to to uh to specify is that the model here our current game needs another attribute so or needs an attribute not another here's another attribute the parameter but here now what we have to add is Supply parameter from form all right this is crucial okay and what you can also do is if you have several forms on one page then you have to specify the form name of of this property here or for which form the property then is there you know what I mean right so you have several forms here uh with several different names same name's not possible well you can still do it with another component but I think this is not important here so uh just use another name and then with that well if you only have one form then we know that this model here is for that form but again if we have different forms then you would have to specify the form uh in this attribute that's why we use the form name okay again only necessary in Blazer static server side rendering now let's implement this form here we have div with a label for SEC for the title call this title it's called label and then here we use still the uh buil in a component the input text with the ID title now and we can still use bind value current game and then the title and we add the class form control again bootstrap stuff can close this and now add two more so the first thing or the next thing thing would be the publisher so here and here and also here of course but now this thing let's just use a number field and that would be then the release year and same thing here okay form control still the same class and of course important the button so now we have the button type submit and regard goinging the class again typical bootstrap stuff button primary and just call that save all right and now what do we want to do maybe creating first so here we add another method call this async task create game and and now we just say context video games at and then current game now important as you can see here this just begins tracking the given entity right it does not really P or store the game persistently in the database for that what we have to do is we call await context lots of typers today it's late sorry about that save changes async and I want to give a little bit of feedback to the user so what I want to do is I store the result in this variable here so the result as you can see here returns uh task that represents the asynchronous save operation the task result contains the number or state entries written to the database so I hope that well one uh entry will be written to the database with that and now if the result then is exactly one I want to store this in a in a string variable and then display this status here and for that again private uh string status which is a string an empty string by default and let's just display that here this is our status and now again here I just say status is game edit successfully else status is something went wrong all right and now let's use this method of course in our handle submit method so here again we check if the ID is not null then we call the update method but in our case now we call all await create game so let's test that now restart the application this is our result we can now go to add video game for instance The Witcher three wild Hunt publisher again CD project the year was 2015 we hit save and we see game edit successfully isn't that nice all right so now we can go back and here is The Witcher 3 and this is creating a g so now updating is the next step actually so for that we create another method asnc task update game and here now first again we try to get the current game by its I D all right so bar DB game for database game awaits context video games and then find async ID and if we have it so if DB game is not null then we say uh or we overwrite every property all right so DB game then title is current game title DB game publisher is current game publisher and DB game release year is the current game release year and in the end we say await context save changes Asing we don't have to call an update method here in in the context or off the context all right so just we already updated it in essence by setting the properties here and again let's just copy this stuff and here we can say game update successfully or something went wrong and now here we can call our update game method all right again let's test that real quick all right now we go here to edit let's say we change the title save game updated successfully we can go back here title is changed great so this works as well nice and now the last step is actually deleting a game we have well a couple of options here of course we could now again go here in the form add a delete button here or we add a delete button here in our table and another option would be to don't or to not use a button at all we can again use a link but that's well a bit creative maybe a link that then navigates the user to a page and in that page then we have the uh ID as a parameter and then on initialized for instance then delete the game and then navigate back to the uh overview here well I think this is not well it is an option but uh maybe not the best option so what I would like to do is simply add another button here and again this time is really a button so that we can delete the game here in the table but the thing is that a button by itself will not work with static server side rendering for that we would need interactivity so the trick here is to actually use a form but this time this will not be an edit form this time we will use the plain old HTML form but let me just show you how this works so again we need another column here first like that and then of course here as well and now again we need a form so an HTML form with the post method and then here also we give this thing a form name so form name in our case you already learned it right the form name can't be the same if you have several forms on this page and in our case then we will have as many forms as we have games in our table so the name should be a bit different so what I want to do here and this is no great syntax is I say delete delete game form and then game ID like that and close this again all right so this is our form name now we also need a method for submitting this form so add on submit again we need an ID here so Lambda expression it is delete game with the game ID of course the method will be added in a sec this is our form and in here now we add a button and I would like to use the link style it's not perfect but uh this is not a design class and another thing we need is an anti forgery token so anti or anti anti right forgery token so to uh prevent csrf cross site request for jery this means that we make sure that this request really comes from our page not from anywhere else all right okay and now the delete method this thing can look like that so async task delete game in ID and here now we say again DB game is a weit context video game games find async ID and then if the DB game is not null we say context remove the DB game await context save changes async and then I want to refresh the page and for that we need the navigation manager so add inject navig navigation manager navigation manager and you now I say navigation manager navigate to and then the same page so simply games and that's it okay so let's restart the application again there you see it right it is the link style but uh well we do not see the URL on the bottom left and the height is not the same so of course this is definitely something we can fix but anyways I can now delete The Witcher and you see it's reloading the the whole page in essense and we see the result so Witcher is now deleted and in essence we're done but there's still one more thing I want to show you and this is the enhanced navigation or at least one part of enhanced navigation because when I put this down here for instance and I go to save then I'm jumping back to the top I'm using the scroll position and this is not what I want but there's an easy fix now thanks to Blazer and net 8 and SSR so we can just go to edit video game and just add this little bir here enhance and yeah if enabled form submission is performed without fully re loading the page this is equivalent to adding data enhance to the form well we could also do that in uh or on the other page and this flag is only relevant in server side rendering SSR scenarios for interactive rendering the flag has no effect since there is no full page reload on submit anyway okay so to get more uh more of a spa a single page application feeling this is really a great feature and me now reload and again click save when we scroll position is not changed something went wrong because we haven't changed anything so now when I when I do that the result will be different save game updated successfully isn't it great so now we do not lose our scroll position now when we go back to the games page and now I delete this this of course won't work because I'm actually doing manually a Reload so how can I fix this well maybe instead of using the navigation manager here in the video game overview I just say again video games is this thing here so we reload the games let's see how this works out so we restart the application and now here's Elden ring for instance let me just scroll further down hit delete we lose the scroll position all right but now let me uh add this game again so Elden ring from software 2022 it was we save game edit successfully back to games there it is and now I go here edit uh no video game overview is correct and here now again in this case it's data enhance all right restart the application I scroll down let me scroll a bit further down so really see the difference I hit delete scroll position is still the same all right so this just little bonus with the enhanced navigation now this is how it works and this is how you implement all the Crut operations with blazer in net8 and static server side rendering on short SSR I hope you learn something guys in case you did please don't forget to hit the like button please subscribe to my channel and check out the other videos here on the screen because I'm doing the same stuff for Blazer server and Blazer web assembly now with blazer in net 8 interesting stuff lots of possibilities here so I hope I see you in the next video thank you very much for watching take care

Channel: Patrick God

Views: 12,680

Keywords:

Id: EqSgqm4qWjo

Length: 52min 22sec (3142 seconds)

Published: Tue Nov 28 2023