Blazor "United" has almost Arrived in .NET 8 Preview 6!

hello everyone and welcome to coding with Tom Microsoft has just released.net 8 preview 6. in this preview release they've come a lot closer to delivering on the promise of uniting Blazer server and Blazer webassembly projects you are now able to designate specific components that you wish to have rendered either using Blazer server or Blazer web assembly and you can combine and mix and match in this tutorial I'll show you how that works and I'll also show you another new feature called form model binding and validation let's take a look at that first in the release notes they say Blazer's new server-side rendering mode can now model bind and validate HTTP form post values what is this new server-side rendering mode they're referring to well what that really means is when you create a new blazer web app neither webassembly nor Blazer server rendering using signalr that we're familiar with is enabled by default on any components what this means is we can use Blazer components but what happens is on a get request the Blazer component's initial state is rendered out and then there's no interactivity after that so you only get an non-interactive Blazer component now what they've done here is they've extended the ability of the edit form component to actually provide a little bit of interactivity without using signalr or webassembly by adding the supply parameter from form attribute and what happens is when edit forms post they're able to go to that second step of the edit form actually processing and validating the data and then producing a result because there's that post action we end up with having a little bit of interactivity with the edit form component specifically let me show you what it does let's go ahead and make a new project and I'll use the Blazer web app the new unified template that they've created and I will put this in a form binding project now notice they've added this checkbox in this preview release for use interactive serving components if you check that it will enable the use of server rendered through signalr the equivalent of Blazer server for specific components that you designate so I'm going to leave that on because I want to show the difference between doing it that way and doing it with this new edit form option so let's hit create let me show you what's in this template let's run it before we go over the edit form I want to show you the counter and fetch data pages the counter page is a functional page that has a working counter and this is a server rendered counter using Blazer server only for this counter let's check out the code for that page so if I go over here to Pages under counter you'll see that it's our typical counter example which has a value of the current count bound to the current count member variable and an increment count method that's bound to the click of the button so this is a typical Blazer component we're used to seeing this example in our Blazer server and Blazer webassembly projects but notice the attribute render mode server at the top that's because only this page in this entire example template is using Blazer server the other pages are not in fact if I take this attribute off it's going to break the counter in a sense and I'll explain why let me run it so if I go over to counter and I hit click me you'll see that it's not actually working what happens is that the counter with its initial values are rendered out to the web browser however when we click the button there's no signalr message going back to the server to actually update any of this nor is this a web assembly that's running in the browser so it's not actually going to work but it did render out its initial State and that's what they're talking about when they talk about the new server-side rendering mode now it's not that it's broken it's just there's a limited set of things you can do now which might actually be very useful using Blazer components in this type of mode and I will show you that in their weather forecast example and also the edit form example let's take a look at the weather forecast example first so if I go over to well let me run it you're used to seeing it fetched the data and show you temperatures so let's take a look at that code it's a little different from net 7's example there's this attribute called streaming rendering so we're also going to get our Blazer component only rendered initially once and then there'll be no interactivity but it does a very good job of rendering the component in stages in its initial display so if you notice we have this forecast if it's null we'll show our loading message and then once forecast is no longer null it'll render out a table with all the data now what they did is they put a fake delay in here just to slow down you know to emulate what would be a Slowdown of the loading of the weather forecasts so you wait a second and then it runs but by the time this entire thing is done an entire page has been streamed to the browser and the entire initial state of this component is rendered in plain HTML in the browser now this could be very effective for like a product catalog or some loading of data where it's not highly interactive but you just want to you might have to wait for it to load so if I go back to fetch data see it does that loading it was there for a second and then once the loading is done the same web connection is still open and these additional Dom elements are loaded which then replace that loading message so that's what this weather forecast example is showing you so this is a good example of using this new server-side rendering mode now let's look at this actual form model binding that they're discussing here in these release notes okay let's go into pages and I'm going to add new component I'm going to call it form binding and this is going to be an edit form so the edit form needs to be bound to a class that stores its data and this example I'm doing is a registration form that has first name last name and email so I need a class that can hold those things so let me go to add one now I'll call it register form register model I have the code here so it's a simple model class that has first name last name and email it also has data annotations for validation the first name field is required so this is the last name and email this is the maximum length for first name and last name and then email has to be in the format of an email address let's go back to the project and I'm going to add a new Razer component called form example and in here I'm going to paste the code that I prepared now right away you'll notice there's a missing object called register model I have to add a class for that so let me right click my project and add class register model and I have code for that as well our form is going to ask the user for our first name last name and email and the data is going to be stored in this model we have data annotations here for validation all three are required the first two cannot be more than 100 characters and the last has to be in the format of an email address now if I go back to form example you'll see at the top I have my blazer edit form which is bound to the register model object on a valid submit it calls the register method so those two things are down here it's the register model which is of type register model I just created and here's the register method now the register method is only going to have a adjustment to this form filled out variable just so I can show that it's actually functioning now here's the new attribute in.net 8 preview six called Supply parameter from form now what this is going to do is it's going to allow that initially rendered edit form up here that normally would have no interactivity to have one additional step of activity when you click the submit button it's going to process all the validation and allow you to perform the functionality and register upon posting the form and then when that's done it'll re-render the page out which will include in my case having since I changed this form filled out to true this if statement will execute and will for now thank you for registering before we can use it though I need to add it to the navigation so you'll see this is slash form binding I'm going to copy that and if I go to the shared area and go to the nav menu I can add another entry here for my particular page which is form binding I'll copy this and I'll change the link to form binding and I'll give it a name form binding example okay now we should be able to run this let me click my new link over here you'll see our form comes up so the initial Blazer component edit form was rendered properly if I put no data in and hit create you'll also see that the validation was done properly and that's because when we hit create it posted back to the server the model was filled with these values which were blank and the edit form was able to do the validation produce the proper messages and then return the screen with the proper validation shown now what I'm going to do is put in some valid data this is now going to post again and it worked this time it says thank you for registering what this did is that model was bound again on the server using that special attribute the edit form worked and this was all able to be done without any Blazer server in other words no signalr and this is certainly not a web assembly running on here so this is sort of similar back to just regular Razer but they've made it compatible with the edit form Blazer component so this lets us do simple forms without having to have Blazer server or Blazer webassembly there's nothing stopping whatsoever from running this as an actual Blazer server component using signalr if we'd like to and I'll show you how we do that it's very simple I just go back to the page and I eliminate this Supply parameter from form option because this is the option we needed when we didn't have signalr and server-side rendering working but I have to tell this page that it's actually going to be using server-side rendering now so but I can do that I can add an attribute render server render mode server and now this page is going to be rendered completely with signalr so all interactions are going to occur just like any normal Blazer server project on this page so if I hit the form binding now I can do some test data let me put a bad email in and you can see that it's actually working and this is using the standard signalr and Blazer server that we're used to now let's take a look at probably the coolest new feature in this preview release which is the ability to blend Blazer server signalr and Blazer web assembly components in the same application even on the same page to do that I downloaded the sample that they had here on the release notes when they discuss it down here and I made some alterations so I'll load that project up and show you an example okay here's the project really it's a solution that contains two projects we have a Blazer app project at the top and this is responsible for displaying the standard Razer components and any Blazer server signalr rendered components then we have a client project that's solely responsible for any webassembly components let me show you what it does before I explain how it works you can see here there's two list components shown these show three items by default and if you put an item in the box and hit click me it just adds it to the list so these are interactive components the one on the top is webassembly and the one on the bottom is signalr Blazer server okay let's go back to the code first thing I want to show you is the program.cs in the server app and you can see here that under add razor components we have the additional ADD web assembly components and add server components this allows for the embedding of webassembly or Blazer server components on the pages and also down here we have the two render modes that we're going to have to let us Mark a component as either render mode on the server or render mode webassembly now let's look at the component itself and I'll look at the server rendered one first that's list component server it really is just a loop over a collection of strings that creates an unordered list in HTML with an input that is bound to an add item string and an on click for this button that's bound to this click add item so on initialization it adds the three default items and then when you click it adds the additional item that was typed in the Box so back on the index page it's able to load that component here and use server rendering for that now in this client project the exact same code is down here under list component wasm.razer its identical code actually but this program.cs shows that this is really just compiled for webassembly so it's just a web assembly that has just that component in it that we're able to reference in our above project and that referencing is automatic here when we refer to it here as list component wasm foreign so you can see we're getting very close to the Blazer United idea of having web assembly and server components mix and matched on certain portions of the screen or certain parts of your application now the one thing they're still working on is smoothing out the transition between pages like for example I hit fetch data and then home and move around between components there's a chance that there'll be some full page loads and a little bit of clunky URL splashing and things like that they're working on smoothing that out right now and they mentioned they've made progress but it's not ready that's probably going to be in the next preview or one of the next previews but this is definitely where we needed to be to start coding Blazer United projects or what we used to call Blazer United I'm excited for this and I hope you are too and I think Blazer has a really strong future based on what I'm seeing here and the improvements I'm sure that we'll be seeing over the next months thank you for watching I hope you enjoyed this video if you did please click like subscribe and hit the notification Bell foreign

Channel: Coding with Tom

Views: 9,302

Keywords: Blazor, C#, .NET 8 Preview 6, Streaming Rendering, Web Assembly, Blazor Server, dotnet, EditForm, Blazor United

Id: fOn1N6m628c

Length: 18min 32sec (1112 seconds)

Published: Thu Jul 13 2023