.NET 8 Released - A New Exciting Era for Blazor Begins!

hi everyone and welcome to coding with Tom Microsoft has just released net 8 and in Blazer there's some amazing new functionality in Net 7 when you created a new blazer project you had to decide whether your site would have interactivity provided by server or web assembly and once you chose one or the other your entire project was essentially in that mode however in net 8 in individual Pages or even subcomponents on a page can be either statically rendered or rendered using Blazer server or Blazer web assembly for interactivity this is a major paradigm shift and makes Blazer a much more flexible platform for developing web applications so I'm going to go over the differences between these rendering modes and provide an example of each and how they can be used together the first type of rendering mode is called statically rendered components this is very similar to the way asp.net core Works without Blazer basically your Blazer components will render on the first time a page is requested and you could even have a post with form data to update those components however there is no back and forth interactivity with uh event binding and all those other things that are nice with blazer but this might be sufficient for what you're doing for example if you're just displaying a menu or you have a very simple form input or you have other static content then just statically rendering your page is a good option your second option is to use server rendered components this is similar to Blazer server in the prior versions and it uses signal R to communicate back and forth between the web browser and a representation of your Blazer components that are kept on the server so in this case the server components can interact directly with Services running on the server and then user interface changes only are transmitted back and forth via signal r as a response to user input in the web browser the last option you have is web assembly so this is similar to the Blazer web assembly projects of the cast where web assembly is compiled and runs on the client browser so all the interactivity and user interface updates are done on the client and then you would create a API client on your web browser and web assembly that would connect back to a controller on the server to do updates of data so most of the work as far as user interface updating interactivity is done on the client in this case so this doesn't require as much connectivity between the server and the client to update the user interface like the last option and as we know from the past all these different options had their advantages and disadvantages now what's great in net 8 is that you can mix and match these on pages or sub components on pages based on the way you'd like to use them in this video I'm going to go ahead and make a simple crud based application that will show uh the use of Blazer server Blazer web assembly and the automatic switching between the two and some of the issues that arise in doing that and how Blazer has solved them I'm going to create a new project using the Blazer web app template that is new with net 8 what I'm going to do is include the individual accounts for Authentication uh when it comes to interactive render mode let me explain the choices none means there's going to be no interactivity so no Blazer server or web assembly on any Pages server means the entire thing will use server interactivity web assembly means the entire project use web assembly and auto means you can use both depending on where you want to use them so I'm going to choose Auto and then as far as location goes if you make a global then it's similar to what was available in Net 7 and for where it's the entire application however I'm going to do per page and per component to allow us to change it based on a page or component level and this is where the real power of Blazer comes in net8 so let's create this in the solution you'll see there are two projects the top project contains all the code that runs on the server the bottom project contains all the code that will be compiled to web assembly and run on the client for any components that you use that will use web assembly let me give you a demo of the template project so if I run it you'll notice uh there's a new homepage which has no interactivity to it in fact this entire page is not being rendered at all using any Interac activity as far as Blazer server or Blazer web assembly these are all statically rendered Pages at this point the menu and the hello world now when I go to counter counter is a web assembly component so this portion of the page with the counter is being rendered in web assembly so if I click it you'll see the counter going up now the weather page is rendered on the server and it uses something called streaming rendering which I'm not going to go into in this video but it's very useful because it lets you to render a static page but also have a little bit of the page um evolving as it loads the first time like this data might take some time to load so you could have a loading message and then the data would follow and as soon as the data is available it would show up here without doing any server inter activity at all no web assembly or Blazer server at all auth required just an example of a page that requires you to be logged in um registration and login are now native Blazer components they used to be asp.net core razor pages but now they're native to Blazer which is nice so I'm going to go ahead and register an account for this of course you have to apply your migration the first time that you start a project because it has to create the database with ini initial tables and these initial tables are the same tables in the past the asp.net identity tables if I refresh the page it will go back I'll be able to do it this time and of course I can click here to confirm the account since there's no email sender configured and I should be able to log into the site and at this point this auth required page will let us in and it'll tell us who's logged in now you'll notice that if I go to Pages here on the client project the off page and the counter page both exist in the client project that means that these are interactive pages that could potentially be run using web assembly now what they do on the page is have the this attribute that says render mode interactive Auto what that means is the component will actually function using Blazer server and Signal R when it first loads and in the background will download a web assembly and once the web assembly is loaded it will switch to the web assembly same for the counter page interactive Auto is is the mode as well we're going to adjust this later so that we can see the page being run on the Sur server and then on the client and then eventually Auto again so this works just like it did in the past um as far as Blazer goes we have you know a button bound to this increment count method and we have a current count bound to this current count property and all of this works because of Blazer uh initially Blazer server which then automatically switches to Blazer web assembly once the web assembly is loaded so this example is kind of a simple example um in this video I'm going to make a more complicated example that will hopefully flush out some of the more details that you are going to need to take into account when you're developing Blazer apps the application I'm going to create is going to be a Simple app that will allow you to post uh messages to a board and delete them so So to that end I'm going to create uh some additional data for this project actually just one more table so let me go to the data folder in the server project you'll see there's already a application context and this is an Entity framework context that's based on the identity DB context which contains all the asp.net identity tables and a custom application user so this is the table that represents the data for each each user now you can extend this and add more Fields like if you wanted to collect other information about your user you could add properties for first name last name uh things like that other things and they would go in this table but we're going to leave it as is right now we're only going to let people sign up with their email address that's all we really need so we're not going to make any changes to that I am however going to add a database table for posts so let me right click and add a class and call this post this table is going to have an ID which I'm going to use a goid a created date title of a post a description the user ID of who posted it whoever's logged in and the navigation property for that user who's logged in so if we want to get other information about the user like the email address Etc we can go navigate to it in Entity framework using that user navigation property of course to have this table be part of the database I have to add it to the DB context so let me open this back up and over here I will add it so now that this table will be part of our database and it will be as soon as I add a migration for it because I have to migrate this additional table in so let me go to the package manager console and I will do add migration DB1 and I'll do update database this will add my post table to the database now as a good practice I'm going to actually add a repository pattern to this uh to allow access to this table instead of having my other objects directly use the Entity framework code so let me right click here and make make a new [Music] folder for repository and I'll add a class called the posts repository paste in the code now you'll notice there are some errors here um what I've created is a data transfer object that I'm going to use to transfer data between my client and server and I like to do this because I don't like to pass around the actual objects that are part of the data model uh these are Entity framework specific I like to create other objects that match them roughly to use them to pass the data back and forth so going going to have to do that um and how are we going to do that before I explain what this repos how this repository works I'll go ahead and do this data transfer object I'm going to need this data transfer object to be accessible from both projects now the client project is already a dependency of the server project but I'm going to go ahead and make another project called Blazer app 2. shared and I'm going to put the dto in there so let me do that first and you can do that by right clicking and doing add solution up here so I went ahead and did that and now I have a class Library project as part of my solution and I'm going to just change this class object to be the dto object that I was talking about post dto so it's similar to The Entity object except it doesn't have the navigation properties and I'm not actually going to share the user ID with the client I'm going to going to just share the name of the author so this will be the email address of the author so that's something I'm going to do as part of my conversion from The Entity object to the data transfer object but I have to change this to be post dto and then I have to add this shared project as a reference from the other two so I can just um I'll do that I'll add this shared project as a reference to the other two I'll right click this and add project reference check this off and on the client I'll do the same so now both of these projects can access this post DL object now let's go back to the post repository and I need to tell it where that is now so using Blazer app 2. shared it will now have access to the dto now we're also missing uh another thing we need Entity framework core for these Entity framework methods to work so I think that's all good okay so let me explain this this repository has five methods uh I created an interface for it this is going to be a service that we're going to inject in the server so I created an interface for it and then an implementation it's basically simple crud uh functionality on the database uh this first one will retrieve all of the posts the second one will retrieve a specific post based on an ID third one is going to add a post but you have to tell it who you are who's logged in so it'll add you or the user ID of that person make it their post the fourth One is updating a post if you want to change what the post has on it and then the fifth one is deleting the post based on the the ID so I'm going to go here and explain this pretty quickly because this isn't really a lesson on database but it doesn't hurt the service will have injected into it the DB context that's all we need in this this first method that gets all the posts will simply or this actually gets one post based on an ID we'll retrieve a post object from the database where the ID matches that ID and if if it finds a post it'll create a post dto object and it will copy the data from The Entity into the post now notice the author it has to do something a little different it navigates to the user table and retrieves the email now there are tools and I have another course on Blazer before that talks about this with the repository pattern and does automatic mapping and generic classes to do a lot of this in in an easier way uh there's a library called automapper which is very good which will do this copying of the columns for you automatically uh but just for the purpose of this tutorial I didn't want to get into that kind of detail so this is an example so if it doesn't find it it'll just return null for this we'll get all the posts so it creates a result list it will give me all of the posts in the table for each one it'll create a post dto and add it to the result list and then return the results for adding a post uh we can take a post dto in this time in a user ID create a entity post for Entity framework populate all of the columns uh I make my own IDs in the table I make guids and then I add it to the database and save the changes and I return the ID of the new post for updating a post um I've just taken a post dto and that has the ID in it so it'll look for The Entity that has that ID it'll update the updatable fields now I'm not letting them update everything like create date and all that because that doesn't change I'm only allowing them to change the title and description so those are the only properties I copy over to the entity and then save the changes if it doesn't find it I return false and deleting a post I take an ID of a post look for it if it if it does find it I do a remove and save changes if it doesn't find it I return false so we're going to be able to use this repository object in a couple places in the server uh to provide the functionality that we need and I'm going to go ahead and Implement those next let me build it to make sure there aren't any [Music] errors and so far so good I'm going to go ahead and create a page now where we're going to show the user interface that lists all the posts allows them to edit update and delete posts and add new posts so this potentially is a page that I'd like to be rendered on the client uh using web assembly so since that is a potential I have to actually put that code in the client project and I'll add it to the pages folder so I'm going to call it posts. Riser now I'm adding it to the client project but that does not mean I have to render it on the client remember this server project has access to all of the objects in this client project they're compiled in as well on the server not just on the client they'll be rendered differently of course so if you render it on the server it's going to work a lot differently than rendered in web assembly but this source code for this file is going to be compiled in both the client and the server and this gets interesting because if you have code that's the same code potentially running on the server and running on the client how do you know where it's running uh can it function the same way if it's running on the client as it's running on the server uh you well the truth is you can know and you also cannot have them operate exactly the same based on where they are so you're going to see how this plays out when I do this and since this can be confusing I'm I'm glad I'm doing this example because I hope it'll help you understand the difference so let me paste in the code for this page okay I pasted it in uh there's a few problems I'm going to go over uh but first just want to go over what this is it's going to be a table essentially that's going to show all of the posts and have some buttons that'll let us update delete and or add actual new posts down here we're going to have a list of posts that's the data that we're going to retrieve from our database um we're going to have functions to handle deleting updating adding and initialization now there's a couple problems um I haven't created this iost service yet which I'm going to talk about but first of all we need the access to the post dto so I'm going to go to the Imports razor in this project and add a reference to the um shared Library so that'll fix that and now we just need to create the post service so what is the Post Service going to do we don't want to actually um interact directly with but we can't interact directly with the database the way we're going to start off let me explain why I have it here as rendering interactive web assembly so this page when we first implement it it's going to be a strictly web assembly component so it's going to run entirely on the client in order to get its data it's going to have to connect to the server and get the data and the way it's going to do that is through a web API that we're going to create to expose the data so we're going to connect to that web API using this I poost service service that we're about to create so I'm going to create a folder here in the client called services and in there I'm going to put two files I'm going to create an interface called iost service and I'm going to create a actual implementation called uh Post Service client so let me paste that code in I have to go back to Imports and I have to use that folder as well client doservices okay everything's compiling let me go to the Post Service interface and I'll show you our service is going to have five methods the functionality we need in our user interface is to be able to get posts add posts update and delete posts so we have methods for that but I also made a method called on client this is just going to return a bu uh you'll see where this comes in later but we're going to be creating two of these ipost Services we're going to create one that's going to run on the client in the web assembly code and we're also going to create one that runs on the server on the serers side code and they're going to share the same interface and the reason they need to share the same interface is because they're both going to be accessed by the razor page ports. post. Riser which could potentially be running on the server or running on the client so they have to work no matter where they run so we're going to have to have one that runs on the server and one that runs on the clients hence the interface so that ipost service initially when we create it it's going to just run on the client because this is web assembly and it only needs to run on the client so if I look at it and that's what this version of the post service is it's essentially just an HTTP client that's going to get um for for this for example for this method when you want to get all the posts it's just going to do a get to an API that we're going to create that we'll get all the posts on client will return true because we're running on the client when we add a post we're going to do a actual post request HTTP post to that URL uh when we update we're going to do a um put HTTP command to that URL with the ID when we delete we're going to do a delete command to that ID so in order for this to work we actually have to make an API on the server that will let this work so let me do that but before I do that I'm GNA actually run this service because until you actually go into the program.cs on the client the service will not be running so what I need to do is I have to actually add two things I have to add a the post service and I have to add an HTTP client so this is a service that will allow us to access the HTTP client which is needed by the post service so these two things will start up the post service and start up an HTTP client so if this page is running on the client it'll use this version of the post service hence I call it post service client and we'll see it in action soon but it won't work until we create an API for it so let we do that I'm going to create a controller in the server project right now to handle that so right click and I'll add a folder I'll call it controllers and I'm going to add one called a post controller and this I'll just stand at a class because I know what I'm I have a class to paste in and that is going to be right here okay so it's a standard uh MVC controller that you has been around since um asp.net core uh it'll access our post repository which I'm going to have to create in our our add to our program.cs in a minute um it'll have the post method to let you add which will call the repository it'll access who's logged in so that we can tell it whose post this is going to be when I call add post a sync on the repository um I will have the delete they added if they do a delete request it'll call the delete on the post repository um if they request just all the posts it'll do that if they request a single post by an ID it'll do that um if it requests um to update a post it'll do that as well this is not a tutorial on how web apis work but it's a pretty good example of a simple one requires them to be logged in h the authorized tag and since this needs a post repository I better create one in the program.cs so it's available so let me add that down here to the services and now we have a post repository available as well now we also have to see if the controllers are being added um so we have to add um the [Music] controllers and we have to map the controllers as well once the app is created put that there okay so let's see what we have everything is working now there's not a way to get to our page yet because I haven't added anything in navigation so I'm going to do that first I'm going to add another item here so that Lo that's located up here in components under layout in the nav menu so all I have to do is I'll just copy the counter and I'll say it's going to be at posts and I'll call it posts and I know that's the URL because the post. raiser has a slost at the top in the page directive okay so when this runs uh it's going to to load the web assembly for this page and that web assembly is going to um well let's see what happens let's actually see what happens before I make that statement so I'm G to log in since this requires me to be logged in I'll do remember me so I don't have to keep logging in and I'll go to posts okay notice it's looking for the Post Service as well now we only created a client version of the post service we did not create a server version of the post service so that is why it's not working so what I'm going to do is actually create at least the beginning of a server version of the post service too now remember even though you think this is a web assembly component and it will be a web assembly component and I know that because I told it to be a web assembly component what it does is it'll actually pre-render the page on the server before it starts up the web assembly component so it has to be able to at least render itself once without interactivity on the server before it'll load the web assembly version of it so we're going to have to create a service to run on the server as well because it's expecting it it's the page is expecting a post service and it's using it down here like it's using it in all these methods so mind you when it pre- renders on the server it's only going to copy um or I should say execute this oninitialized async so this is the only code that's going to run let me comment this out here because I want to we're GNA see what happens here so let me go and add the service or add a version of the service to the server as well so let me in the top project add a folder called Services as well and that I'm going to call Post service server so let me add a class here and it's going to implement the same interface that the client version of it implements because that is actually what we are using now it doesn't know where this is because I have to use the client folder I have to reference the client folder and I actually I have to implement all of these methods now I can have it give me dummies and the dummy methods will just say non implemented so we can decide what we're going to implement as we go uh we don't have to we don't have to implement them all if we intend for this to be a web assembly the only ones we have to implement are the ones called by the oninitialized async which in this case is get post async and on client so these two have to be implemented now let me go ahead and Implement those two um or at the very least I'm going to implement on client so this one I will change to be bull return false because this is not running on the client it's running on the server and I'll make it public so now what's going to happen if I go to um my posts I'm gonna actually change this a little bit right now it's trying to get all my posts so when it's running on the client I want it to go and get the posts from the server now there aren't any posts yet so it won't get any but on the um client if it's not on the client I don't want it to do it I don't want it to get the posts so I'm going to put an if statement here so the first line is going to be this this method I implemented so this is going to work whether I'm on the server or on the client so I can say if on client go ahead and get them if I'm on the server it's not going to bother so it's just going to leave this list of posts empty and it's not going to try to to list the posts here um so let's see if this actually works in this state right now okay it still doesn't work and this is because I didn't register it yet I have to go in the server and uh I added my post repository but I didn't add my actual service so I have to have that as well as a scope service let's try that again okay so I don't know if you noticed that but it said client false and then it said client true so a lot kind of happened there uh without you knowing about it and I'll explain what happened if I go back to the code you'll see here in post. Riser if I go here to uninitialized a sync this actually ran twice so it ran once on the Sur server so the first thing that happened on the server is it got this on client variable and from my service it ended up being false so since it was false it didn't go ahead and load the posts but it did go ahead and render all of the content of this page from the server into the web browser while that happened it downloaded the web assembly so once the web assembly was done being downloaded it actually reran uh the initialization and in that case it called the version of post service that's on the client and on client was true and it got all the posts of which there aren't any from the API on the server and rendered the page so let's actually use this page a little bit to put some data in so let me run it again if I go to post see it says false and then true so the time that it was false it was actually um pre-rendered and then when it switched to true the web assembly kicked in so it took a second or two um if I add a post here I'll say test and test uh the button's disabled I have that for something other I wanted to show you later let me turn that off so buttons being disabled I want them that to be false let me go back posts false you can see and then true so once it was true it was web assembly now the web assembly is cached if I go off the page and go back boom it goes right to true it loads the web assembly so it doesn't it skips the whole step of pre-rendering on the server at that point because it knows it has it loaded already in the browser so let me add a test post you can see what it did is is it added to the table um the ID the author create date the two fields and an update and delete button so let me add another one and maybe a third one just so we have some data and these other options work as well I can delete one um I can update the text of one Etc so we know it's working and right now it's running in web assembly if I leave the page and go back the web assembly loads and there it is so actually you'll notice there's a quick little flicker so there is potentially a little pre-render that occurs and then then the web assembly loads um but the pre-render is actually all happening on the I take that back the the rendering is all still happening in web assembly what happens is when you first load the page there are no posts it has to use that API call to get the posts so there could be a little bit of a delay forgetting the posts hence the little bit of flicker because it renders the table empty gets the posts and then updates the table with the contents so that's why there's a little bit of a flicker occurring here which is normal because it has to get the data using the API it's still fast you go off the page and on the page it's very quick so once that web assembly is initially downloaded it operates very quickly now what if we wanted to actually make this a Blazer server component a Blazer web assemblying component well all we would need to do is change the um render mode to interactive server now the problem with that is and I'll show you is it'll work but since it's running on the server the post service that it relies on isn't going to do anything because notice it stays client false and there are no posts I mean there are posts in the database why isn't it showing them well it's because if we go to down to the code it thinks it's running on the server so this is false and it will not load the posts so rather than um making that conditional I'm going to take that off and let it load the posts but our post service doesn't have an implementation for this if I run it I'm going to get a crashing issue because it's going to say not implemented saying method's not implemented because I literally threw that exception myself so what I have to do is actually go up into the post uh service on the server and Implement these methods so that they'll work and I'll be able to use that doing using I'll be able to do that using my post repository like I did on the um in the controller actually um I'm able to get the data directly from the database since I'm running on the server I don't have to use an HTTP client to access the API I can access the repository directly because it's running on the server so I'm going to do that right now I pasted in a new version and you'll see that the um has a new Constructor that takes in my post repository and the authentication stay provider this object will tell me who's logged in uh getting posts is just as simple as retrieving the post from the repository on client is still false adding a post is the same as just um finding out who's logged in and adding the ID and the post of that post deleting and updating are simply calling the repository so it's it's an easy implementation because it can access the repository directly so I'm going to see if this works let me start it up and let me go back to posts and you're going to see it came up right away uh rendered on the server right away um there was no delay it didn't have to download web assembly it just ran however now there is a signal R connection that is established between the client and the server to allow these interactivity options to work updating deleting and adding um I could add something I go ahead and delete it so we can see that it's actually working it's on it's not running on the client so we have now created the Blazer server equivalent of this component just by changing the render mode now it's also using the uh service on the server so this is why you need to do all of the functionality in your page via a service with a shared interface if you care to have it work on the server and the client and you're going to care even if you do web assembly it it makes sense to I think do this because because you may want to pre-render the page before web assembly gets access to it so for example if I change this now to interactive um Auto it's going to allow it to render as Blazer server first download the web assembly in the background and then switch to Blazer uh web assembly once that's loaded so let me show you what that does since both work this should work it should be able to automatically switch between the two so if I go to my post again you see it's not on the client but boom see what happened a couple seconds later it reloaded the page and it ended up saying client true so what was running on the server using signal R is now running on the client using web assembly so that switch occurred on the fly now it was a little bit awkward I I think if you notice um let me go back off the P off the page and go back well if I go if I do that um actually it's not that awkward because it just runs the web assembly but if I run it from scratch again which is what your user will see when they first hit the page is first the server version and then flashes goes blank reloads the data and is now on the web assembly so it's not really ideal right now the question really is why is it flashing and it's flashing because when the web assembly starts up it doesn't have this data it has to create an API call to go get it so it starts up blank gets the data and then redraws itself so they actually came up the way to solve this problem and I'm going to show you how they did that next it's pretty cool how they solve this problem they have this idea of a persistent component State what this is going to do is since the server is actually going ahead and getting this data what it will do is when it renders the page it's going to include the data in an encoded form that the web assembly can pick up and it will have the data and not have to do the API call initially because the dat will already be there so let me show you how you do that I mean that's that's interesting so if I go to the page I have to add a what's called a persistent component state so let me inject that and we also have to make sure that this class implements I disposable that's another requirement for doing persistent component State now we have to go down and add some things so let me go here to create adding a object called a persistant component State subscription and we're going to create a few methods here um we're going to create a method called persist posts and this is my method and what that's going to do is save whatever the posts are you know that we retrieve from the database into this application state so anytime we want to we maybe we just loaded them we can save them into this application state that will get transferred down to the client before it switches to web assembly I have to implement the dispose method because I actually have to dispose of the subs the persisting subscription object so that's something I have to get rid of um when the object goes away hence the Disposable requirement now our uninitialize is going to change a little bit and let me do that on client won't change because that's pretty much the same no matter what but what we're going to do here is we're going to register this uh this the subscription here and we're going to do is is does the application State have that data in it so this is like for example um when web assembly runs if it's not if it doesn't find it and actually it's really no the first time this runs the server is going to run so it's going to see in the application state that post is not there so it's on the server it's going to get them otherwise it's going to be able to retrieve them from this restored posts um if it finds them however so when the server runs it won't find them and it'll put it in the application State now that application state will get transferred down to the web assembly before it runs so when it runs it's going to look for it and if it isn't there it will go get it but it will be there the first time so it'll actually grab it out of the application State instead of calling the API which is going to slow it down to go get the um data from the API and then create that flicker so with any luck this is going to switch without us seeing a flicker between one to the other so let me try that assuming I didn't miss anything if I go to posts false true ah notice no flicker I'll go off quick now that flickered when I went back because the app the it didn't do a server pre-render it just ran the web assembly because the web assembly was cach so it did a little bit of a flicker but that's not a big deal because it's quick but that first flicker that's there for when the web assembly is downloading is gone so you'll see when I hit posts it's the server rendered version and then when it's switched it no change no flicker because was able to grab this data right out of that persistent State application state that was transferred down now there's one more thing I want to mention uh and when I start over uh you'll see during the time that that page is if I'm in render mode Auto which I am now um it's going to automatically start up in Blazer Server create a signal R and all that stuff um and then then two seconds later or whatever it's going to switch to web assembly so during this time BL signal R is running I can click the buttons but then within um within a second or two it switches to web assembly and then I can't um I mean I can interact with it but it's going to be the web assembly version so since that Blazer server version is only running for like a split second or I should say like a second or two while we're ding web assembly I I don't think I'd use the auto in this case I think I would just use um web assembly because what that's going to do then is during that initial two seconds it's not going to bother creating a Blazer server uh imple uh signal R connection and all that it'll just show show the table with the initial data and then by the time um the web assembly loads it'll switch to that so you'll see here it showed it all but it's false but then true it was able to switch to web assembly so there is only one downside to that still um these buttons are still here so while these buttons are here um in that 2C period the person would be able to update or delete or Ed another one um and that could be okay in some of your applications depending on um what kind of application it is but in this case I don't think I want to have that level of interactivity for two seconds and then have it all replaced so what I'm going to do is actually disable the buttons if we're on the server mode so I'm going to down here um make the buttons disabled being the inversion of whether I'm on the client so so if I'm on the client the buttons will not be disabled if I'm on the server the buttons will be disabled so finally when I run this you'll see when I click posts buttons are disabled and then and smooth as anything it switches over to web assembly and the buttons are lit up so it works and of course if I switch off and come back um the buttons are already enabled because we're already web assembly so I really hope that this example kind of gave you a little more of an in-depth uh understanding of how the Blazer server Blazer web assembly and the pre-rendering work and hopefully this will help you when you develop more complicated programs uh the standard template doesn't really explain a lot of this so uh I hope this is helpful and uh thank you for watching if you like this video please subscribe to my channel

Channel: Coding with Tom

Views: 3,659

Keywords: blazor, .net 8, blazor server, blazor web assembly, server mode render, web assembly, blazor united, c#, entity framework, dotnet 8, dotnet, .net, Blazor tutorial, Tutorial, web api, blazor with web api, blazor 8 authentication

Id: MU_MOVuRk6A

Length: 53min 4sec (3184 seconds)

Published: Fri Dec 01 2023