CRUD with the Blazor Server Render Mode in .NET 8 🔥

hey friends Patrick here we already covered Crut with blazer SSR and net8 so only static server side rendering no websocket with blazer server no web assembly with well Blazer web assembly and in this tutorial now I want to cover Blazer server so the server or render mode how would that work all CR operations create read update and delete let's go but maybe first if you learned something and like this tutorial please guys hit the like button and please think about subscribing to that channel here there is this great little button it says subscribe and if you haven't subscribed yet it would mean the world to me if you do because it helps creating all these videos so thank you very much for doing that and thank you very much to all my patrons for supporting me I love every single one of you guys thank you so much if you want to support me too link is in the video description and now let's start with the tutorial all right Blazer server it is today and we created made a new project for that and use the Blazer web app template here and now we give this thing a beautiful name like Blazer server.net 8 this is a great name and now net 8 of course no authentication https but this thing now is important we only want the server render mode for the interactivity location is all right per page component of course you could also choose Global in that case uh you would use websockets everywhere but maybe you just want to use web websockets for certain components or Pages like an edit form as you will see in this tutorial we include the sample pages I mean why not so we have some code that we can maybe use but when everything is created this is what we've got all right we have a project that can display a user interface right typical Blazer server stuff as you maybe know it from Net 7 and B4 and also we are on the server here this means we have all the net web API capabilities for instance and this means what we can also do here is of course already create a model and also a data context because what I want to use is Entity framework here together with SQL Server to store the data persistently in a SQ server database so I suggest we just start right away with all the Entity framework boiler plate stuff if you don't want to see that check out the time codes Below in the video description and then you can jump directly to the uh to the components that we will build in the pages where we then will use the edit form all right so first new folder and for that call this models I love video game games I have no time to play video games anymore because I have two kids and lots of work but I still love them so let's create video games in this tutorial so here now rather simple we uh say this thing gets an ID and then also maybe a title what I also want to display is the publish and the last thing nope not string would be the release year let's say all right so this is our video game and now already the data context for or the database context for Entity framework again I create a new folder for that and by the way of course you could here now already start with another type of architecture you could create class libraries for the models for the database context and so on so if clean AR architecture is something you want to see please tell me that in the comments below and I'm more than happy to create such a video for you but here now we keep this rather simple we create a data context that's the one we now inherit from DB context and with control period we get the suggestion to install this package here that's exactly what we want entity framer core still used the name or still uses the name core with that we've got entty framework installed and now we need a Constructor first so CTO R and hit type uh hit tab to create that Constructor with the parameter DB context options Builder with our new data context here we call this options and when we have a little bit more space we can use the base Constructor here and and we get an error because this is the wrong parameter it's only DB context options so now everybody is happy in particular Visual Studio what else do we need well a database set to have representation of our video games in the database so for that you create a new property of type DB set and then use our new video game class here and we simply pluralize the name this is then the name of our table and let's also already seed the data for that we overwrite the method on model creating and here now we say model builder and then entity and here it shall be the video game class and this thing now has some data and here we can simply give this thing a list and maybe I will just edit this out so you don't have to watch the entire thing so first game id1 all right so we have three games IDs one two and three cyberp Punk 2077 by CD project 2020 is the release then Elden ring 2022 and Legend of Zelda Ocarina of Time 1998 okay so this is our date now the next step is to add a connection string and usually we just do that in our app settings Json file so in here we say connection strings then default connection and here we call that uh or we give this thing first the server I'm using SQL Server Express locally so if you don't have it just Google for it please and then download it and then you should be able to use the same connection string database name is up to you so in my case that would be the video game DB for instance then we set the trusted connection to true and also trust server certificate also true this should be the connection string and the last part now is our program CS because there we have to register the data contacts and a use uh SQL Server provider but for that we first need to install a new get package so we already have entity frame core but we need again the SQL Server provider and this is this package here Microsoft SQL Server database provider for entry framework core so let's install that thing and then since I want to use code first migrations I also need the tools package here so just search for tools and then we should find Microsoft entity fir core tools entity firac core tools for the new get package manager console in Visual Studio that's it and now the NB contact so for that we say builder in the programs yes Builder services and then add DB context with the data context here and of course we want to use our data context and also we set some options which in essence is necessary to tell our app that we want to use SQL Server as you can see here and we also need the connection string and since we're using the app settings Json file we can say Builder configuration get connection string and then simply the default connection and add one more parenthesis and we are done all right with that now we can open the package manager console and simply say at migration initial for instance because with that you create the initial migration which should include the video games table will succeed it this is great and now we see this is the new file that was created for us you can also see it here new folder migrations initial and this just means when we apply this migration we will create a new table called video games with all our columns Auto incrementing the ID and also already insert some data and in case you want to roll back we just drop that table I say this is great so so now we run the command update database yes even when the database does not exist we run this build succeeded and you will then see there they are all the commands that will be executed here for instance create table video games and we now go for instance to the secret server management Studio refresh our server here then we see the video game database with the video games table you can open that up and select top or edit top 200 rows for instance and there are our games isn't that nice okay boiler plates Entity framework code first migration stuff is done and now let's focus on the actual CR part here in Blazer so as you can see we have the layouts folder for the main layout and the ne menu real quick I'm currently creating a Neta webd jump start course which will be available for free we're going to have a look at web apis and Entity framework there for instance and if you want to be the first to know when this thing is available then I recommend just check out the link in the video description and I will send you an email when you can get it so scroll a bit further down and then you know what to do and now let's continue with the tutorial not very interesting for us today well at least maybe we should uh add a a link to the video games page but here now in the pages folder and when you've seen the uh Blazer static server side rendering tutorial with all the CR operations then maybe this is familiar for you so here now let's just add a new razor component call this video games overview all right and this is a page so similar to this weather page here and as you can see for that we use the page directive and when you have a look at the counter page then you see that we could use the random mode interactive server to make this work we need the following in the program CS as you can see here we have this line at interactive server components and down here also at interactive server render mode so this is crucial this is what you need if you want to use the new server interactivity render mode with Blazer and net 8 otherwise you're not able to do that you can still use static server side rendering if you want but if you want to use the interactivity with web sockets then this is what you have to do okay and otherwise it's pretty much the same stuff except the the form looks a little bit different compared to uh SSR to Blazer static server side rendering but we'll see that in a couple of minutes now first the base basic overview we add the page directive with the uh games route let's say and now what I want to do is I want to display all the games so for that we have a couple of options actually first thing we definitely need is a list of video games of course so here now we just say list video game almost video game this is the type we want wrong commands and this we can actually move to our Imports razor file so now it's available for us this is the video game type hopefully visual yep no Visual Studio got it and again this is a new list of video games now the question is first we have to fill this list for that we collect wait we give this first a name for that we collect uh the video games from the database in the on initialized async method so the life cycle method the very first life cycle method of any Blazer component is the oninitialized so override it is this did not work maybe now yep that's the one and here we also add the async keyword and here now what we could do is we could use the database context directly and I did that in the uh Blazer static server side rendering tutorial but this time maybe let's organize this a little bit more so what we can do is create a service register the service then and use this thing to collect the data it's just a little bit more organized that way okay so what we can do here again in uh maybe a bit better architecture we would have a class Library again split the interface split the interface and the implementation class but now here let's put everything into one project but at least create another folder so here we say Services all right and here now we just add a new interface called it I video game service so this is our public interface and over here we say add a new item and this is the video game service implementing the I video game service all right and now here in the uh I video game service let's just add our very first method which is uh or which has the return type task with a list of video games again at the reference here get all games async maybe all right and here now we just just implement this thing perfect and here now we use dependency injection to inject the data context so here private read only data context context it is that's the one and with control and period we can either generate the Constructor or I already created it so we can just add the uh parameter here to our Constructor with that we have the cont text available now we add the Asing keyword here and we can say for result is now wait context video games this is our table and simply to list async because with that now we get all the video games and we return the result with that our first get method is done in the service we also have to register this thing so similar to the data base context we can just say Builder services at scope this time and here this shall be the I video game service so this is the interface and whenever we want to use this interface we want to inject this interface we say we want to use this implementation class we could for instance also create a video game service to and then say well whenever we inject the I video game service interface always use this video game service too but that's maybe for another tutorial okay so with that there a tiny bit more organized and now when we go back to our page the video games overview we can here now say I want to inject the I video game service call this video game service and here now add this reference also to the Imports razor file so now we have the video game service hopefully available in a couple of seconds maybe come on Visual Studio well let's just continue and see if this still works and you know what we do is simply say our video games now is this video game service get all games async and of course you want to await that like that great okay with that we already get the games we won't see that in Chrome for instance in the network tab because we are not making a web service call so I'm just telling you that because this is a big difference to blaz a web assembly from before. net 8 of course you can still build it like that but if you're used to that with Net 7 and now you're switching toet 8 and starting with blazer then you will notice that things are a bit different now the starting point is in essence Blazer server or even Blazer static server side rendering and then maybe the next step would be Blazer server and then in the end there comes Blazer web assembly so you see yeah I don't know strategy of the net team or of Microsoft is a bit different it seems in my opinion tell me what you think about that would be interesting to to read or hear your opinions on that but anyways this is how this works now this is the first step and now to see the data well of course we have to show it somehow and the easiest thing maybe would be well maybe a list but of course we could also add a table or a data grid something like that so I suggest we use a table first maybe the title video games overview or just video games like that and then all so page title is video games and then the table first I did that already in another tutorial but let's just check if the count video games of our video games is zero in that case I know this is of course it's not for production right this is not covering every situation but just for this tutorial if the count is zero because we're seaing the data and I don't want to delete everything then we just display the following loading video games all right and if we have some video games then we display the table no this is a bit tedious but let's just do that together we first have the table with the table class bootstrap stuff all right we have a header and in this header when this thing is yep this formatted we uh we want to display a table row all right and then the first header would be the title then we display the publisher and the last thing would be the release year and after that we also add an edit button and an edit link uh not an edit a delete link or a delete button maybe let's see about that but anyways after the header now comes the actual data so we have a t body and here now we can make use of uh for each Loop and here we just save for each game in our video games list again we display a table row almost table row it is like that not an input radio actually want a table row I'm not sure why Visual Studio wants me to use an input radio I'm just using a table row here all right hope this is okay and now not an input date just a column like that great thanks visual studio and here now we say game title and let me just copy that so I don't get the other suggestions so here now we have the title here we have the publisher and the last thing shall be hopefully the [Music] release yeah there it is in T code at its best all right and that should be it okay so one last thing nav menu so we can go there actually so here now we have games and let's just call this also games no I can this time because I'm lazy let's run this all right there we are now let's go to games and there we are Isn't it nice we can go to home to games home games but something is missing right let me go to the console or open the console here let's just ref refresh this we see no web so connection of course you forgot one thing with that we still use Blazer static server side rendering maybe you were already wondering what I am doing there but I just want to show you it already works right and the only thing that you might have noticed when this app was uh starting and loading the games for the very first first time it took a while actually to come to that page and we never see the loading text okay now let's let's play around with that because what we can do here similar to the weather page they simulated delay delay so now let's do that as well now there's the delay we restart the application and now you will see well maybe here not but when we go to home and then to games the address but changes but the page opens after half a second all right so again home I click here address changes and then comes the data we don't see the loading text so what we can do here now is either really again use stream rendering and this is the great feature or one of the great features of bler static static server side rendering that we have this spa-like feeling now you see it loading video games again I go to home and then I go to games I direct directly open the page or the application opens the page and then we get the data after a certain while right or we just use random mode interactive server not Moda that's not correct it's a random mode so now restart the application and we should see after yep a certain while we see now there is this web soet connection and when we go back to home the web so connection should be as you can see here disconnected now we go back to games but there was one more thing that maybe you already know maybe you've seen it already we have some kind of flickering effect we go to home and then back to games and we see some data then the loading text and then again the data now what the heck is that well pre-rendering is the magic word so why is that pre-rendering is activated by default this means that the server it is confusing because we are already on the server but the server runs the um onized async method once right everything is done the HTML page is rendered and then this application sends the uh rendered or the finished HTML page to the client and this is what we see maybe when we're lucky we can also see that here actually when we filter for nothing in essence and then open this page again then we see that we have some data here already and this is what actually the static server side rendering is right and when we're using now the render mode the server render mode then pre-rendering kicks in meaning that we get this but then we are entering the uninitialized again so for the second time we see all that loading video games logic and then the data is collected and again displayed for the client or to the client to the user you name it strange right so I mean this makes sense if you have real interactivity here if you have buttons for instance or charts anything where the user can click and do something I guess maybe then this makes sense but for this example now we don't really need pre-rendering all right another option or another point is of course valid point is uh SEO search engine optimization so if you want to use that then maybe pre-rendering makes sense but then again maybe you have to think this through a tiny bit more and change the logic of your application or the architecture of your application just use static server side rendering in certain parts and then again interactivity in other parts but so far I mean don8 is still quite new in my experience you can already do a lot with static server side rendering but uh we'll see what the future brings anyways to disabl pre-rendering we just create a new instance of the interactive server render mode and here then we can set pre-render to false this is not really necessary and now let's try that one more time you see this is the typical uh message when you're using websockets and now we see this is the the main layout in essence with the navigation bar the sidebar as you can see here we have the nav menu That's the name I was looking for we have the body which is empty in that case and then also here an unhandled error has occurred or everything is displayed here as well and then after a certain while we will get the data and render it on the client all right so that's maybe the most important part about Blazer server the Blazer server render mode and the rest is well pretty much the same stuff you may already know from Net 7 so we have all the video games games now we want to get a single video game and for that we create a new page so here right click add a new item we could of course call that video game or maybe just edit video game so with that then we can uh create that's wrong I actually wanted to create a new razor component there it is so now this is edit video video game and you now what we can do is we can use that to well create a game and edit a game and typically what I do is I add two routes first one would be edit game without an ID and the second one is actually edit game with an ID so something like that again not sure what the problem here is because the syntax highlighting should look a bit different but let's let's see okay this looks better I really had to create this file again so I deleted it and created it again I don't know why sometimes this happens so one Pitfall in I don't know Visual Studio 2022 although I think there is a nope it's the latest version in my case 781 I think 782 is now Al so available but that's just a side note anyways so we've got the two uh page directives here and I also want again inject I want to inject the I not o i video game service call this video game service and now let's do something crazy let's just Implement all the CR operations already here in the interface and the service shall we so here now task video game to get game by ID async with the ID then what we can also do is add game async with a new video game then we can also add update game async with a video game and also an ID the ID of the video game One update and also what we can do is delete game async with again the ID and now here we just implement the complete interface and you now first single game we just say our game is now await context the video game single or default async well I like to use find Asing actually that's the one with the ID and here we just return the game could be null I know we should handle that maybe but not in that tutorial all right then adding a game so here now what we can do is simply say context add wait video games and then add our game and then we also have to save that because with that as you can see here it just begins tracking the given entity but it's not really added to our table so here now we say wait context and save changes async all right so this is what we want to do here then deleting why not we first try to find the game that'll be the one and add the async keyboard and now if the game is not null then we say context video games remove the game and then also await context save changes async again we should or could handle the null case of course in uh well more professional application and then the last thing here would be similar actually first we try to find the game with the given ID we say async task and you know let's call that the DB game for the database game all right and here now we say that the DB game title for instance is the game title DB game publisher is the game publisher and the DB game release year is the game release year all right so in essence again since we have do web API capabilities here it's pretty similar to a typical web API maybe right so you have your service here but the big difference is that we can directly access this service inject this service since we are already on the server with blazer server here and also Blazer static servers at rendering so this is again the big difference to web assembly usually in web assembly you would of course have a controller here here and you can do that here as well you can for instance just create your controllers folder add a new folder call it controllers and then here you get the suggestion to create a new controller of course right so this is everything you can do that absolutely uh but since we are again already on the server this is what we have to do here and I hope I imp implemented everything properly so now we can do everything we have to do here on the client so what we need is first I want to check do we have an ID or not so if the ID is null in that case this means we want to add a new video game so HR not HR H3 add a new video game and same thing for the page title and I see that we have an error there of course because we need the ID here as a parameter so prop alible in ID and this is a parameter so with that attribute we make sure that this thingy here works all right and then we have the else case so if the ID is not null we can actually copy that paste it here we need another uh member here another property which is the current game actually so prop video game and then the current game all right and this thing is just a new game all right and here now we say we want to edit at current game title actually all right so edit title that's that and now here to get the current game we will use another life cycle method and this is the on parameters set async so proect it override and then on parameter set async async and here now we have our video game service so if ID is not null then we say our game is await video game service this one here get game by ID async with the given ID which we cast into an integer not nullable and if the game is not null then we say our current game is this beautiful game all right okay I think we can test that already NOP we can and because we first need an edit button and this is what I wanted to add here so here now we just add another column and this is now big difference to server side rendering because here we just used a link can still do that as well maybe it's the easier way but since we now have interactivity anyways we can also use a button to call a function that then uses the navigation manager to navigate to that page you see maybe it's a bit too complicated you can do it simpler with static service side rendering but again that's totally up to you again button and uh this button has a onclick event and here we say at we want to use a parameter that's why we use this syntax here and uh let's just call this method then we want edit game with now the game on ID and of course we have to use the Lambda expression here edit game is not available yet but in a sec so edit game with the ID here and to be to be able to navigate the user now we inject the navigation manager almost navigation manager all right and here now we say navigation manager and we probably write this navigation manager navigate to and now it's edit game with the ID okay hopefully this is correct and as you can see now maybe it's a bit too much right so we can of course also add a class maybe for design purposes it is the right way button button primary again bootstrap class here and uh we call this maybe edit or we could add an icon something like that let's test that now so you run the app there it is we go to games we're loading the video games we have our edit button here we go to edit and you're navigating to the page okay same thing here and here but what about now creating a game well let's do that as well real quick so let's just copy that and add a method called create game with no parameter and we just navigate to edit game no parameter again and now maybe down here we add another button add a new game and here on click we call create or maybe add game I think this is the the better name here add game all right try this one more time there we are add a new game you see the class is now not set so maybe here button button primary save that restart the app one more time add a new game and we see now this works as well and let me real quick remove the delay here so this is a little bit quicker all right now edit add works great thanks to interactivity because if we would now disable that let's just test that real quick you restart the application now we get the data but the buttons do not work see that so in this case now our options are and you can see that in the other tutorial our options are to just use an AAG with an a H ref or we use an actual form that uh well where a button is used for a submit so we have a submit button in that case and we're submitting a form and this thing then can be used to well do something all right anything actually okay so that's that now we can go back to the edit video game razor component and here now we add the edit form so this is is pretty straightforward we have the edit form here built-in component of Blazer nothing new Inn 8 except you're using again static service side rendering but what you also always always and still need is a model so our model here is the current game and on submit this is also still the same we could also use validation so on valid submit is also available available here we call the method called handle submit which is not available yet but will be in a couple of minutes first all that stuff that we want to set here so first a label for instance for the title call this title and for the title we use the builtin input text component here now again ID is title we bind the value current game title all right and use the class form control okay and now we can actually copy that for the publisher so this is pretty much the same stuff publisher publisher same thing here publisher publisher okay and again almost the same stuff now it's an input number Fe field if you want for the release year so release year it is here and let's call that release year as well and release year and the last thing we need is a button again of type submit and this is default by the way so you actually don't have to define the type but I'm I don't know I'm used to it because sometimes I edit other buttons to the form and if I don't set the type then because in that case you would have to set the type uh button because otherwise every button is a submit button just a little side note again and uh we call this save and class again button button primary okay now the handle submit method so let's do that here async task handle submits and here again we have to decide is the ID null or not if it is not null we want to update right so we could of course add another method for that and here now we want to add a game so regarding adding this is easy of course we just call await video game service and then add game async with our current game when this is done I actually want to use the navigation manager again inject navigation manager navigation manager and here I say navigation manager Jesus navigation manager so hard to write right navigate to and then back to the games and actually it's the same thing almost the same thing here if we just say updates game the current game and the ID which is not null of course okay let's test that now we restart the application now we go to cyber Punk 2077 let's just say it's now 2078 what was that post request does not specify of course still server side rendering so as you can see it would work we just have to fix tiny things we have to give this thing a name a form name then also add an attribute to this parameter and this would work then but since we don't want to use server side rendering here let's just see how this looks with interactive server with the interactive server random mode so we refresh or restart the application we here 2078 and it's done okay again we go to edit now here added again and uh now maybe let's add another game for instance The Witcher three CD project Again release was 2015 and there it is and again when we have a look here actually let's just refresh this we have the data here already right but we see no flickering effect in this case okay maybe what if we go to home home and then back to games and then edit well of course we have no link here so at least I don't see something strange happening here now the question is what happens if we uh use the same render mode with no pre-rendering so let me just copy that here and now go back to edit video game restart the application there we are again the result is actually different okay games one see that but at least I don't see the difference in that case so again I leave that up to you and I would really like to to see uh or hear your opinions about the new server or the new render modes in general together with pre-rendering what do you think about that anyways last thing deleting and well we can do it here or in the table maybe just do it here so we can of course add oh no let's do that in the in the video games overview so here we add another column and another button which pretty pretty much looks the same way like that and you know we say danger delete game call this delete at the method here all right delete game and now here I actually want to call asnc task delete game video game service delete add the ID and then actually we can call this again after deleting the game so restart the application interactive server mode is still there so we go to games and can actually close this and for instance delete Witcher again and it's gone so as you can see you can refresh this of course the game is not there anymore these are all the crow collaborations please tell me what you think about that and what you would do to improve that maybe and what do you think about the new rendom modes and static service side rendering and so on thank you very much for all your insights and your comments and of course for your likes and even maybe you want to subscribe to my channel that would be amazing thank you so much for that thank you so much to all my patrons for supporting me and thank you very much for watching and I hope I see you next time take care

Channel: Patrick God

Views: 5,989

Keywords:

Id: S6Eq0g7GGJk

Length: 50min 27sec (3027 seconds)

Published: Tue Dec 19 2023