 On today's Visual Studio Toolbox, Ed Charbonneau is going to show us how to set our Blazers to run. Hi, welcome to Visual Studio Toolbox. I'm your host, Robert Green, and joining me today is Ed Charbonneau. Hey, Ed. Thanks for having me, Robert. Welcome back. It's great to be back. Ed's a developer evangelist with Progress Software and a regular guest on the show, but it's been about a year since he last on. It has been. I've been working hard on Blazer for that entire time. A year ago, you and Sam Bazou did an episode on Blazer. I believe it was one of our long ones. It was an hour show cut into two bite-sized pieces. Back when we used to do hour-long shows. It was an introduction to Blazer. Today, we're going to take a look a year later, and you're going to catch us up to speed on some of the most frequently asked questions that you hear, some tips and tricks that people doing Blazer would need to know. Before we dive into that, let's do a brief refresher of what is Blazer. Yes. Like you said, we took a look at Blazer a year ago. It was a very early beta back then. It's now rolled into the official ASP.NET Core pipeline. Blazer is a brand new front-end development framework, so a spa framework that uses C-sharp full stack. So we can actually write client-side application code with C-sharp and not have to rely on JavaScript like we normally do with JQuery, React, or Angular. We now have Blazer to take place of all of that, and we have .NET end-to-end. Cool. So we saw early last year a lot of things have happened since then, and every time I present on Blazer, I get asked these questions that are really great questions, but just at a glance, you don't quite catch when you're talking about Blazer. So I thought I'd bring some of those questions up with you today. Yeah. Cool. Let's do it. All right. So I'll hit one of the ones that is the most popular question I get, and that is, does identity work with Blazer? Now, people usually frame that question as, does authentication work with Blazer? Authentication is actually a browser behavior. So that's usually happening on the client, but what they usually mean is does identity, does Microsoft identity work with Blazer? Actually, now it does. So with server-side Blazer shipping an ASP.NET Core 3.0, Microsoft identity will be available with the application. If you click File New Project just like you do with an ASP.NET MVC application or Razor Pages application, you get the dialog in the File New Project where you can click to change your authentication type. You get that same experience with Blazer. What you get out of the box is actually what we have running here and just like in an MVC application, you have your login and your register links at the top of the page. So we can click Login and we get prompted with the identity login experience. I don't have an account, so we can click Register and create a brand new account. Just like with MVC or Razor Pages, we can create an account here, and what I want to show if I can get a correct password through the system here. I don't remember what their requirements are. Now we get an error screen or what looks like an error screen, but it's actually something very helpful. MVC does this as well. It says data operation failed processing requests because we haven't created a database yet. Okay. This is a brand new File New Project experience, but what's nice is we get a button on the error page that says Apply Migrations. If we click it, we'll actually create the database for us, Microsoft Identity Database. It will apply the migration to our database, create all the tables we need, and then it will bring us back into the application. So this is try refreshing the page. So we can come back, hit Continue, and now we're actually logged in. It says hello at Charmino at Progress.com. So we have identity working. It's backed up by SQL and any framework, and this comes out of the box with a few button clicks during the File New Project experience. So this is a generic identity provider. Can you hook it up to Active Directory? You can hook it. Or Azure Active Directory? You can hook it up to Azure and that steps you through as well in the File New Project experience. Okay. One other notable thing that's really interesting about the way identity works in Blazor right now is another question that I get asked a lot, and that is, do Blazor components work with MVC? Can you mix MVC, Razor Pages, and Blazor in the same project? So if we go under Areas and Identity, and we look at our Pages in here, our Logout or Login Pages, these are actually Razor Pages. So we have Razor Pages that exist in our Blazor application and they're able to work side-by-side. Now, another thing is people ask, can I use Razor components or Blazor, the component framework inside of an MVC or Razor Pages application? That ties into the same idea. If we go into our host CSHTML file, so .cshtml is a Razor Pages or Razor MVC view, inside of here, this is the bootstrapper for a server-side Blazor project, but this is a Razor page, and if we look right here, this is where the application starts up, and we have inside of our app tag, an HTML helper that says html.renderComponentAsync. This renderComponentAsync method is something that we can call and bring Razor or Blazor components into MVC and Razor Pages views. That's another frequently asked question. These two things tie together in my opinion. We're talking about using all of ASP.net in a Blazor application and that is possible. Cool. The next thing that I wanted to show, is people ask frequently because they see Blazor component. You can refer to these as Razor components. Razor component is something that is the component model of Blazor. So, Blazor components, Razor components are interchangeable, but when they look at one of these, it's all written in C-sharp and your markup and your code is all in the same file. So, one of the questions I get right away is, can I separate those two things? Because I don't want my markup and I don't want my C-sharp code intermingled. So, I've got an example here where I've already started taking these two things and decoupling them. So, we'll finish this up here. What I want to do is, I have a fetch data component, and I have the code section down here. What I want to do is remove this code section. So, the first thing I want to do is create a C-sharp file. I want to name this file the same as my component, but with the extension dotRazor.cs. So, what that does that matches up with our component file name. So, our component is fetchData.Razor. Our code behind is going to be fetchData.Razor.cs. That allows the two to nest in Visual Studio. So, when we name them like that, that semantic allows that nesting to happen. So, we get this nice tree effect where we can collapse that code behind down if we want to. So, I'm going to click on fetchData.Razor.cs, and this is the same code that is inside of that code block. I went ahead and moved it out to keep this nice and short. So, in fetchData.Razor, we can now take out this code block because we have that in our code behind file. So, to marry those two things back up together, we simply come back up to the top here, and we just call inherit. So, we have an inherits directive, and then we point to that code behind file. So, this is called fetchDataBase. The component name is fetchData. So, this is the base of that component. So, we'll save that. I can also remove this dependency injection from it, because that now happens in the code behind. So, now I've tied those two things together in all of our little red squigglies have gone away, and we've separated those two pieces of logic. So, our markup is in one file, logic's in the other. So, you named that fetchDataBase? Yeah. So, this file is, the file name itself is fetchData.Razor.CS to provide that nesting. But we can't call it fetchData because it will collide with the component namespace. Right. So, we can't have two fetchData classes. Okay. So, we got to give it something. It's a partial class. It's an entirely separate class. It's an excellent question or observation. Partial classes aren't supported yet. Okay. But it is something that may come in the next release of the preview. Okay. So, fetchDataBase was just a naming convention that you use? It's a naming convention that I use, and it's pretty common in the community right now. Okay. It's a common naming convention. Is to name that as your base of the component itself. Okay. Partials may be coming soon. So, this may change a little bit. Over time, but this is one way that you can separate those out today. Mm-hmm. Also, we need to inherit from component base on that. So, it gives us all the life cycle methods and everything that is part of the component itself. Right. So, another notable piece is the inject parameter here. So, we're injecting through property injection when we do the code behind versus when we're on the markup side, we use an inject directive instead. Okay. So, that's one piece that people look for when they start refactoring this out is they don't know how to inject that properly. So, the inject attribute on the back-end side and it's inject directive on the front-end side. Okay. Okay. So, that's one of the pieces that people ask a lot about. Then you would expect ultimately that that would just be an available refactoring inside the Visual Studio Editor, so you don't have to do it yourself. That might be a nice feature request. Would be a good feature request. There's a lot of tooling changes that will come with all of this new Blazor stuff. Right. I've talked with Daniel Roth and his team and they're very optimistic about what they can do with the Razor engine itself and there's a lot of tooling that can come in the future. Cool. All right. So, we can look at some more frequently asked questions. Another one is we get this application out of the box. We need to rerun that. We've done some code changes here. We'll pick this back up and run it. And we have this counter component that comes out of the box. And the count starts at zero if we click on the counter. This is all file new project experience. So, anybody that runs Blazor's probably seen this counter component before. If we go back home and then we visit the counter page again, our state is gone. Right. So, the components don't share a state. If I created more counters, they don't share that count. So, we can have multiple counters on the page. They would all have their own independent counts. So, how do we manage state if that's something that we do want? So, there's actually two ways to handle state. Well, there's multiple ways to handle state in Blazor. I'm going to show you two of them. There's actually some components that are designed for this. So, we'll look at a component approach. And then we'll look at using dependency injection and do some application state. So, one thing I've added to this project and under my shared folder, I have a component that I wrote. Very simple one. It's called counter state provider. So, this is a provider component that I can plug into my application. And anything that is a child of it will receive the values that I assign to this component. So, it uses a special Blazor component. This is something built into the system called a cascading value component. Inside of the cascading value component, I can provide child content. That's essentially what this component is for anyway. And on value, I'm going to keep this as simple as possible. I'm just going to assign this. So, this component's value will be just assigned to the cascading value. Any child component can subscribe to this value now. So, what we'll do is we'll take this and we'll put our current count for a counter component in that object. So, what I need to do to implement this is I'll go into my main layout and now I can surround any piece of HTML in my application that I want to be able to receive this data from. So, we'll go right around the main component of our application and we'll call in our counter state provider. And we'll wrap that around the body of the application. So, this is now at the application level? This is at the root of our pages. So, anything, any of the pages that we load will be inside of the body. Okay, got it. So, now anything that's in the body which includes our counter component will be able to receive that. So, how do we receive that inside of our component? So, there is a special parameter that we set up and I'm gonna use a shortcut here and we're gonna use the cascading parameter attribute on a property and we'll set this up and call this current count. Or actually, we need to bring in the component namespace because this is gonna resolve to a counter state provider and then we can name it and we'll name this, let's keep this simple and just call it state. So, this state will be assigned the value of this that it brings in from the counter state provider. So, now we can consume it. We can get rid of this current count equals zero and when we increment our count, we'll use the state instead. So, we'll say state.currentCount, that's coming from the state provider. And up in this section, we'll do the same thing, state.counterCurrentCount. So, that should tie it all together and now when we run our application, we won't lose that state as we go from page to page. We can also take advantage of that. So, now we have our current count and go to our home page, go back, we still have our four, make this a little bit cooler. On our index page, we can consume that same state provider. So, now we have shared state across the application. So, we'll do the same cascading parameter. It's gonna be a counter state provider. We'll call it state. And then in my hello world section here, I can just write out currentCount at state, currentCount just like that and now this will appear in our home page. So, now we're getting the count off the counter even though they're not on the same page together. So, our currentCount is zero. We click this up, we go back. Cool. Our home page has it. So, that's one way that we can share state across the application. This is using a piece of markup, the value the state provider uses the cascading value component. So, this is markup driven. We can also do this through code. So, we don't have to have this markup piece that drives the state management. So, in my application, I've added a very simple Poco object, plain old class object called counter state. And I have a currentCount on that as well. This is something we can just inject in our application through dependency injection. So, if I go into startup.cs, I'm gonna scroll down to where all of my dependencies are registered and in services, I'll just on comment this line that I've added earlier. It's services.adscoped of type counter state. So, now I have this object, this counter state that is available to my application through dependency injection. So, if we go back to our counter component, instead of using a cascading parameter, we'll come up to the top of the page, we'll use the inject directive. And we can inject that dependency injection through that counter state through dependency injection. So, we'll call counter state. And I think I'm missing a namespace here. This is in data. Data counter state. And we'll simply call that state again. So, since we named it the same, we actually don't need any code changes here. I can remove this. And now our data is resolved through dependency injection instead. So, it has the same idea, but it's application level. And then in our startup.cs, we'll go back here for a moment. I used add scoped to add that to the application. We have several ways to add things to our container. We can use add singleton, add scoped. The reason I chose add scoped versus add singleton. So, on server side blazer, you're sharing that application state with the entire user base if you use add singleton. So, that will be a single instance per application, not per user. So, it's a very important thing to know. You don't wanna share certain things with everyone. Right. Whereas our weather forecast service, something is pulling in weather data, we can share with all users, because it's gonna be the same. Okay. So, those are some of the most frequently asked questions that I get when I present on blazer. People ask about state management. They ask about identity. And they ask about code separation. Those are the real heavy hitters that I get all the time. Hopefully that clears things up for them. Yeah, that's awesome. So, if someone is starting out with blazer, what are, briefly, some tips and tricks on how to get up to speed on it, how to get used to it, how to understand what it is and how to use it. So, my biggest advice would be, first of all, go to blazer.net and walk through the getting started materials. The .net docs team, they've done a fantastic job there. Okay. Second of all, blazer is a lot different from MVC, where in MVC applications, we're rendering strings. Blazer has something called a render tree that it builds. It's not a string. It's a representation of the DOM, the document object model that is held in memory and it does diffs against it to see what's changed. So, it's a big difference from HTML helpers and razor views that just render out strings all the time. Okay. The reason for that is those string rendering mechanisms, the client side code is done in JavaScript. So, it goes back and it finds pieces of the DOM, manipulates it, edits it, deletes it, those sort of things. In blazer, we work with the render tree, the developers do. And then, the framework takes the render tree and applies the changes for us. That's what allows C-sharp to be able to work on the client side. Cool. And your impression of how far along this is, is it preview? Can you put stuff into production with it? In September, we will see a GA release. Okay. So, it's coming soon. For server side Blazer, we'll have the global availability soon. Client side Blazer will come sometime next year. We haven't got a solid date just quite yet. I've heard quarter one, quarter two. So, that is coming soon. And it requires .NET Core? Yes, Blazer requires .NET Core. Okay. It's currently on set for .NET Core 3.0. Mm-hmm. Client side will likely come with .NET 5. Okay. Cool. Thanks for that. Thank you very much. All right. Hopefully, everybody found something useful out of this. Getting started with this stuff is a little tricky. It's a brand new preview. So, I figure that most people are new to the concepts because the entire framework is new. So, it's something I've been working on very closely for the last year because of my job with progress. We build UI components for everything. So, we jumped on the bandwagon early and created a suite of Telerik UI components for Blazer. Cool. So, it's been my main focus. Well, I'll link to that in the show notes along with places people can go to learn more. So, I hope you found that useful and we will see you next time on Visual Studio Toolbox.