 All right, everybody we are back with ad talking about a speed on that racer take it away. Are you guys doing good? Oh, go ahead take it away, sir. There you go. Yeah, all right So I'm gonna talk about razor today, and there are a lot of razor things to cover So I'm ready to go ahead and switch to my my screen here when you guys are We're all set sir. All right, so hello dot net comf Hopefully everybody's enjoying The show so far. My name is Ed Sharman. I'm a developer advocate for progress And let me get adjusted here. There we go. I'm a developer advocate for progress software and Microsoft MVP And today we're gonna talk about razor into the razorverse razor is an ecosystem that has expanded over the last few years and includes many different razor technologies, so we have Razor the the engine itself the syntax razor views HTML helpers razor pages razor tag helpers Blazer and its razor components. So we're gonna start at the top level But we are gonna deep dive into each one of these things. We only have a short period of time So let's get going The first thing that I want to cover is the syntax itself So razor the syntax is a template markup syntax based on the C shark programming language The nice thing about razor is that we don't have opening and closing tags with razor We use the at symbol to open up our template and it intelligently finds the end for us So if we look at the old way of doing this in web forms, you can see it's a lot more verbose than using razor If we look at something a little more modern like angular We still have this very specific angular language that we're using to define our templates in our markup Where razor is just using C sharp and markup. So there's some benefits to razor here And there's even more with the ability to do complex expressions So we open up an at symbol we can do all sorts of things in this example We're doing some math and just writing out an output Into our HTML. We also have control structures like for each if then statements try catches All of those things are valid within our C sharp syntax or razor syntax Here's an example of an if statement and we can branch out and write out different portions of HTML To our page using razor this way So let's talk about razor execution really quick. It's actually a complex thing happening behind the scenes So razor generates C sharp code from the template and then compiles that code into a dotnet assembly It loads it into memory and then executes that compiled code So that's the razor syntax. That's a quick overview. Let's jump into razor views and HTML helpers next So razor views are streamlined way of writing code focus templates in dotnet They're returned from a controller action as a view result and the content is generally made up of HTML And components that are HTML helpers now other component models are valid here like tag helpers and razor components but typically with views you'll find HTML helpers being used This project template comes from file new project if we click on web application And specifically that model view controller application. We're talking about the view portion Here. So razor views in that template So that's razor views in a nutshell. We're going to talk about HTML helpers next So HTML helpers are the component model for razor views. They're invoked as methods within HTML razor views They encapsulate code and HTML. So we're building components using this this structure At the end of the day these things turn into an HTML string And that's really important to remember here and we're going to get into the reason why it's important Later but the main takeaway here is these things turn into HTML strings. So keep that in mind So this is what an HTML helper looks like and how we use it in a razor view We call at HTML and that identifies that we're invoking a helper And then we call the method on that extension method on the HTML class Now we pass in our parameters and output the type of helper that we were looking for In this case we're doing an action link so we get a nice anchor tag With the path that we're specifying in our HTML helper Creating these is actually fairly simple. We just need to extend iHTML helper as an extension method and we return iHTML content. So let's take a look at what that looks like If we look at the function signature, it's very simple. We take in iHTML helper We output iHTML content and we have an example here of a hello helper We're going to write out a span with a message inside We're actually going to break away here and do a quick demo And we'll view that HTML helper in Visual Studio So let's do that. Let's break over to Visual Studio And in this solution I have three projects and we're going to start with the razor view project And this is identified specifically by seeing that there is a controller model in view folder So this is an MVC application and we have razor views So I'm going to open up the index page here, the index view We'll zoom back out and we can see that we have our razor markup And we've got a couple lines of html markup here And two things I want to point out specifically We have an html helper that is at html.hello and we're passing in the value world And I also have a tag or a piece of razor markup that is at this get type base type So I'm going to discover what the actual type is that's resolved for this view So that's going to be interesting First let's open up our html helper and take a look at how that was built So first of all we're returning an ihtml content And the method name is going to be hello And we're passing in ihtml helper as an extension method So that's what this keyword is for We're extending the ihtml helper interface with a method called hello And passing in the message parameter We're going to write that out into a span, an html span And that gets turned into an html string So this is the basis of an html helper which acts as components in a razor view So let's give this a run I'm going to control f5, we don't need a debug I just want to see what this looks like on the page So we're going to load this up in the browser In our application loads and we have hello world This is our html helper being executed And we also have that segment where I said at this So tell me what this thing is and what is the base type So this is actually the razor view is a razor page of t So a razor page takes some sort of type In this case it's an object That object is actually your model being passed into the razor view So interesting stuff there Let's break out again to a folder view So what I'm going to do next is a little crazy I'm going to dig into the bin folder for this project And inside of the bin folder We're going to find a project.views.dll file I'm going to use a free tool called Telerik just decompile To open up this razor view And let's go ahead and see what was actually compiled from our razor code here So I'm going to dive in if you see me dismissing a window here This is actually trying to decompile any dependencies that are on that object Don't need all the dependencies decompiled I just want to look at the specific razor view So inside of this razor view This is what was compiled from that code that we wrote And we have our class of view home index That inherits from razor page So that's where the razor page came from of T object Also interesting inside of this Is that we automatically generate some properties here So we have an HTML property So remember in our code when we wrote at HTML That's actually where that property is being extended with our extension method But what's really important is at the very bottom here So we have a task at the bottom called execute async And what this does is actually renders the String based on all of the markup that we wrote in our razor library So we have right literal and right And in here you can see our actual HTML helper being executed All of this stuff gets turned into a literal string An HTML string that we can view in the browser So that's very important to know Because later on we're going to talk about Razor components and things are going to be much different So let's go back into our presentation And we will talk about The razor views or sorry razor pages in Tag helpers next So razor pages was introduced with ASP net core It's a page focused approach versus model view controller Like the previous template So pages incorporate their own controllers actions and routings inside It's able to be integrated with mvc So these things aren't mutually exclusive You'll find that's a common trend with all the things I'm talking about today The content is actually made up of HTML and typically tag helpers So tag helpers are new to ASP net core We're going to talk about those next But we can still use HTML helpers and even razor components in a razor page We'll show that last If we do file new project and choose web application We will get a razor pages application This is different from the model view controller application as we'll see in a minute If we look at them side by side The ASP net mvc application has controllers models and views Where a razor pages application has just a pages folder And inside of that pages folder each page has their own code behind file So that's how they're primarily different The razor page versus a view is also written differently So we have an at page directive This identifies that this is a page in a razor pages application We also have an at model directive that ties into the code behind So this is where the code behind comes from This is where the page model is represented So we can set properties and things as you see in the example here We have a message that is used within our markup on the left Now also unique to razor pages is we have an on get method These methods actually correspond to html or http methods So get, post, put, and delete So you'll have on get, on put, on post, on delete And those things are used in place of controller actions So the page concept is more of a vertical slice And we're able to do that The page concept is more of a vertical slice And we're able to do everything in the code behind So the component model for razor pages is actually tag helpers And tag helpers are asynchronously server side processed pieces of html These use tags and attributes much like html does Which helps eliminate context switching between html and csharp They're also designed for unit testing in mind I don't have time to show that today But it is something that is a benefit of tag helpers over html helpers So html helpers versus tag helpers When you're writing them There are some fundamental differences between the two Now one of the things I like to point out When talking about these two types of component models is html helpers are nice They have nice fluent syntax But when you go to add things like html attributes Such as a class You have to do some special things So when we want to add a class Which is a normal thing A normal operation to do in html We have to do something like this We have to new up in a don of this object Then we have to escape the word class Because that's a reserved word in csharp So things start getting a little messy when we have to do this html helpers have this problem Tag helpers alleviate this problem By using tags and attributes directly So this same example below We're producing the same output But with very minimal effort The tag helper portion of this is actually the asp4 attribute So that identifies this as a tag helper And razor knows how to handle this And they output the same thing And what's nice in the second instance here Is our class When we define it We actually get IntelliSense within Visual Studio And we don't have to escape it And create those anonymous objects And those type of things If we look at a more complex example Like a teller at grid We have a nice fluent syntax with the html helper But if you look at the tag helper It looks a lot like html And inside of a big page This doesn't really stick out And there's no context to switch between If we want to control the scope of tag helpers Within our razor pages We have special directives To bring those things into scope Or remove them So we can use the add tag helper directive And there's built-in tag helpers in ASP.NET Core All the things that you need to build a form are there And if you look at something like the Telerik UI For ASP.NET Core There are both ASP.NET html tag helpers And tag helpers for both Sorry, for both razor tag helpers And razor html helpers This is a mouthful, guys There's about 60 UI components there That support either type of model So an example of that would be a date picker And you can see these are very easy to read and understand So let's jump into a razor pages demo And we'll decompile that one at the end as well So I'm going to pull my visual studio project back up here I'm going to switch projects over to razor pages And we're going to dive into the razor pages project And right away you'll notice I only have a pages folder Now the code for our index page Is actually represented in the code behind And we'll look at the markup as well So this is the razor page for our index page The markup is in this cshtml.cs file Behind it And you can see I have an on-get method That's not being used So we're not actually doing a whole lot of work here But it is nice to know that it's there Most of this page is written in html And I also have a tag helper on my page here This is a custom tag helper So we're going to talk about custom tag helpers for a moment So let's jump over to custom tag helpers And we'll take a look there And then we'll go back into our demo Oh, sorry That actually got removed for time concerns We're actually going to dive into the code Instead of some slides here So in our tag helper It's a little bit different than writing an html helper So instead of writing at html We're going to target a specific tag And we do that through html target element This is a directive that we can use to target Something inside of our markup So I have a tag helper called .net-conf That I'm going to be targeting with this tag helper And when we build a tag helper We need to override Or inherit the tag helper base class And override the process method When we do that we're able to take in content And write it back out as html So we're going to take in some parameters We have a property called name We're going to take that in as a parameter And then we're going to write that out to a string And that string is going to say property The name property loves .net-conf We're going to ignore some errors here Visual Studio is not playing along for .net-conf But anyhow, once we're done we're going to say We're going to set that html content And then we're going to render that out to the browser So we're consuming this custom tag helper here You can see it's highlighted It says .net-conf I'm passing in my name And we're going to render that out to the browser So we'll control F5 And again this is the component model for a razor page And we're going to write out Ed Charbonneau loves .net-conf That's our custom html helper Let's take a look with inspect And you can see we're writing out a span in that text That was produced by our tag helper gets emitted there So let's take one more look here We're going to go back into the folder view And we're going to find our .dll file again So we're going to go bin I'm in debug And we have our project.views.dll We're going to decompile that I'm going to ignore any dependencies Once again, I don't need to decompile the entire universe I just want to see the one page that I've written some custom code in Let's see what we get here This is the compiled version of that razor page And in that page we have a static class Or a public class of pages underscore index But notice here it's inheriting from page So a razor view is actually inheriting a razor page A razor page is just a page There are some similar properties in here You'll find html is here So we can still do html helpers And down at the very bottom Once again, we have this asynchronous task Called execute async Which turns everything inside of that razor page Into a literal string So again, keep that in mind That's very important That is the main takeaway that I want you guys to have today So we're going to go back And we're going to close just decompile And next we're going to start talking about Blazor So Blazor brings with it razor components So razor component is the component System for the Blazor framework Now it can still be used in ASP net projects Which we will see in a moment But for the most part, keep in mind that the razor component model came from the Blazor framework Now Blazor and razor components use the razor syntax They are a component architecture versus html generation tools They create what is called a render tree Which is a DOM abstraction I'm going to show you a little bit of that in just a moment Their file extension is dot razor versus dot cshtml And one of the reasons that we have this distinction is because how different they are in execution So razor files are used for code generation And these special dot net classes that implement a render tree So what is a render tree? Well in a typical javascript or jQuery application We are responsible for writing directly to the DOM Blazor does that work for us And it does it through a diffing engine And an example of this would be in a javascript application We use a selector using jQuery in this example We might find some elements in the DOM, remove them and replace them So this is an expensive task for our browser to do So for removing things from the DOM and then scrapping all of that and writing it back There may be some things that were actually unchanged in this process But we've gone and removed it and re-added it to the browser anyway So this is a very efficient model of operation Blazor does something different So Blazor creates a DOM abstraction or a shadow DOM So it has a copy, an object graph if you will And it can operate on this object graph Much like it would directly in the browser So if we remove elements using Blazor It will do it to the render tree first And then when it adds things back and notices that some elements may not have changed It only goes to the browser with those changes So there's a diffing algorithm that runs And says only update the things that have changed in the browser So this is a system that is very efficient And we don't want to circumvent that So Blazor has all of these wonderful features The component model and the render tree Are some of the key features that I want to talk about today So we're going to go into a Blazor application And first I just want to mention that with these components We also have all of these available with Telerik UI for Blazor So let's jump into a Blazor application And see the difference between the Views, razor views and razor pages And now how razor components act within the razor environment So I've got in my project here a razor components project in my solution And again you'll notice that we have this pages idea So we don't have model views and controllers So this kind of is the next step in razor pages But then it does a little more So we have all of our pages and components inside of this folder here Because pages and components in Blazor are the same So I'm going to open the index dot razor file And we'll also open the counter razor file So these are components with page routes So these can act like pages We can call them from a route in our browser But they also still maintain the ability to be components So they are both So if I go back to my index page I can reuse my counter component So I can call it counter here And now I have that counter component Which also has a page route On my index page as well as it being its own counter component and page So I have that reusability there And the counter component is made up of HTML, razor markup and C-sharp There's no JavaScript here So we don't have to write JavaScript to build a component architecture For Blazor and razor components So let's run this application We'll see what it looks like And then we'll do a deep dive again And see what the differences are Between what we saw with razor pages and razor views earlier So we've got this nice component architecture I can use my counter on my index page I can also navigate to it as a route So it's acting as both page and component Let's go back into our application And one thing I want to point out before I do the deep dive Is that our razor application here If we go under pages we have a host cshtml file So this is a razor page That is using And I'm going to focus on this line here It's using an HTML helper In a razor page to render a razor component So we've got all three technologies here Just mashed up together And we're awaiting at HTML Render component async And then we are rendering the app component Which is the container for our Blazor application So we're using razor pages And an HTML helper to bootstrap a Blazor application How interesting is that? Let's go to our source code now I'm going to go open a folder view And we're going to go decompile our application again So I'm going to go under the bin folder And inside of the bin folder, instead of opening the views folder I'm going to open the actual application folder Because the razor components are not views So they actually get compiled into the main application DLL So we're going to open this up with just decompile And we're going to look at the guts of that counter component I'm going to ignore all the dependencies once again I'm going to dive into razor components DLL And under pages, I have counter We'll open this up And this is completely different from razor views And razor pages So what the main takeaway here is We're actually inheriting from a component base architecture And this counter component becomes a class That uses a method called the build render tree method And this build render tree method actually is responsible For building that DOM abstraction that I talked about earlier So it's not writing directly to a string It's not writing this as HTML anywhere So when you're writing components for the Blazor framework You don't want to go in and do manual DOM manipulation A lot of people when they start using Blazor They ask how do I write raw HTML in Blazor You can but you shouldn't So this is why you shouldn't Because you're going to skip past this build render tree method And you're not going to have that efficiency Of the system doing updates for you So the build render tree actually adds the content To this object graph through these methods So we can see add markup open element Add content all of those things And it uses this to keep track of that object graph So we don't really need to know how all this works in great detail Just remember it's there So you're not writing things in your application To go in and manually manipulate that DOM Let's zoom back out here And I am free to take questions And hopefully you guys found that interesting So we got the top level of what all those technologies is And then we dove into the source code And saw what was actually compiled from all of those razor views That's probably something you don't do every day So I hope that you guys found it interesting All right, thanks so much Ed I think we have time for one question One question Okay So a question was asked How do you avoid the bad patterns of web forms with razor pages? How do you avoid the bad patterns of web That's a kind of a broad question I'm not sure what bad patterns we're talking about But I would assume things like view state Which a view state doesn't exist in Blazor The way it does in web forms So there's no view state for us to manage What is held in state in the render tree is managed by Blazor So we don't have any control over that So that's not something that we need to worry about Web forms has the idea of an abstraction around state That doesn't exist in Blazor We handle state in Blazor through dependency injection And plain class objects Just like we would in any other type of .NET application So that concern really isn't There's no parallel for it to kind of make a comparison Okay So then a quick question If you are familiar with web forms And you want to dive straight into razor pages and Blazor Quickly what would your learning path be? So the learning curve for Blazor in my opinion is pretty small Because if you're already a .NET developer It's using all .NET technologies So I'd say go to Blazor .NET And click on get started And just follow the first few examples there On building your first Blazor application There's a nice to-do list app in there that you can build And the component architecture in Blazor is so dead simple That I think people will gravitate to this very quickly All right, awesome Sweet, thank you so much Thanks so much, Ed Thank you guys And enjoy the rest of .NETConf Thank you so much, Jeff Now we're going to get Jeffrey Palermo up Talk about Azure DevOps So we'll be moving things around And really quick We were talking about legacy stuff Check out this Visual Basic 4 That's as you can get a workout Just lifting this There you go Because there's nothing but books That's right See it's a box We still say in the box In the out of box experience That's right All right So we will all see you guys shortly