Let's Learn .NET - Razor Pages

just [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] hey there we go good morning good afternoon good evening friends wherever you may be out there welcome to another let's learn.net hey it's my buddy john galloway here hello it's good to see you good to see you my name is jeff fritz uh gosh john we've got a couple couple hours here to talk about razer and razor pages i am excited about it this is a lot of fun i i feel like this is this is one of these technologies one of these tools that are in our toolbox as a.net developer that for for some of us that have been around for about 10 years we kind of take for granted it's true yeah you were reminding me before this that you know like it's it's been a progression um i i got nostalgic and dug out this book that i worked on back with mvc2 and this was back when uh razer syntax first came out i also have just just for fun i i couldn't help myself i got the uh chinese version so someday i'll learn how to read that but yeah it's you know it's it's really neat razer as a syntax has worked great for years and you can build you know i've built tons of websites you have too and uh so i i i i've always been struck by how uh razer as an evolution from the web forms templating engine that we saw with with old school asp.net aspx pages with with angle brackets and percents you had to wrap all of your code with razer always felt like it was it was almost like magic it was more intelligent of a templating engine yeah and you know at the at the end we'll be sharing uh some some resources and links and one of those is uh we have the razer team the the team that builds the tools for the the uh editors in visual studio we have them on the asp.net community center stand up this week yeah yeah and as they were going through and reviewing the features i was reminded of kind of just the magic they do because the neat thing that it lets you do is weave html sharp but also javascript css typescript all these things and it it manages those transitions for you it really says something when you think about there's four programming languages there right i mean whether you call html a programming language or not it's four languages it's mashing together and managing inside of a razer template that's amazing stuff it really is and i'm curious you know people watching in the chat there's all different you can build beginner advanced applications the.net website that i've contributed a little bit to recently that's built with razer pages and serves you know millions of views a month um so it's it's really neat the variety i'm curious from people watching what your web dev experience is if you can let us know that that would be fun um it's uh and you know uh i don't know if we should just jump into it i've got some stuff to talk about what we'll be learning today i think that's a fine idea all right let's do this let me throw this up there okay so that's us we already knew that um so you can always reach out to us on the twitters or wherever um let's go with prereqs so really we're expecting kind of beginner level like if you're new to c sharp if you're you have some intermediate html experience this will work if you're completely new to programming you're totally welcome here and i hope you'll learn something there too um and then you know we're seeing some people like mpc 4.8 and stuff like that this should be a good transition too if you do if you're used to mvc and you know net framework development this is a great way to kind of jump into dotnet core development um as well so yeah and uh so cool so what we're gonna talk about here is building asp.net core apps for this i'm going to be showing using uh visual studio code and this command line and so the reason for that of course you can do uh you know we've got uh visual studio we've got visual studio for mac um but for this i wanted to make something that's you know that's simple that anyone can do not a big install so you can download and install and set this up on your own easy to do that and that means any operating system windows mac linux and respect for you jeff because you make a point of doing linux based development for months out of the year and it's it's and and that's that's working relatively well for you right oh my gosh it's great you know spend a month doing linux spend a month doing mac and and make sure that that folks appreciate this stuff works wherever you want to be yeah it's it's really it's neat to be able to like i actually managed to break my um well it's not my fault my one windows laptop got the thing where the battery started swelling up and they tell you that may explode and you may not want to use it too much you know so my only laptops now are macbooks and i'm going from a windows desktop to a mac you know to macbooks and works just fine i command my code pull it down from github it's all it's all good so very cool so for this we'll be going through creating a new application adding a new product page we will use client-side validation which is pretty neat so just kind of magically turning it on and validating uh our input on our form and then we're going to save that data we're just using it in memory data store for this but you could of course be using an api or or any framework put it in a database whatever sure um the question in the in the chat here and i i like that you know razer versus blazer and that's actually one of the things towards the beginning i'd like to just kind of you know like talk about a little bit is how does that fit in sure because i i think that's an important important question um so let's see i don't have a whole bunch of slides i just kind of want to set the stage of what we're talking about so this is the overall agenda for the app we're going to build and i will this is actually something in in ms learn this is a new learning module that we just published yesterday so it's a new brand new one so i'll be um yeah i'll be showing that so you can use that to follow along and it's linked in the um it's linked in the resources for for this event um so yeah we can go through fast through this um so the main thing i want to talk about here is when do you use razor pages how does it fit in this is a big question we do get a lot when do i use razor pages when do i use mvc because i like mvc but razer pages feels simpler well and i get that and then i also get talking to a lot of web developers including new web developers and they're like hey i need to learn react or i need to you know how do i hook this up with with angular or you know um and i think that a lot of the time it's very easy to kind of jump into too much too quickly and so that's actually one of my little things i want to talk about towards the beginning is which asp.net core do you want to use um and and that's a really cool thing is you've got some different options so let me hop over to my browser in my 10 000 windows that i've got open so first of all this is um this is the module we're going to be going through there's my mouse yeah i saw this uh post come out in april and this is from the 18f team so this is a team that they're private sector employees that do kind of like a sabbatical they work for the us government for a year or two and they help bring their industry knowledge to government and it's it's just like a public service thing i really love the the way that this works and then they advise you know these different teams in how to build better applications and how to be more effective there's there's been kind of a um i don't know criticism of like old you know clunky over-engineered you know technology built for us government and so they really wanted to get kind of lean and fast and you know build things the right way so this post um i'll actually i'll throw this in the chat um because this is uh this is when i i don't know i think this is this is fun and i mostly like it because it agrees with my opinion but what they say in this is choose the simplest option and there are good reasons for that it's cost effective maintainable accessible and performant all of these things are really important when you're building an application uh cost effective if you over engineer something it's expensive to build but it's also expensive to maintain applications that are more complex are more you know difficult to keep up to date over over time accessibility we did a previous uh event a couple of months ago on accessibility and one of the things that really jumped out to me is simpler solutions are much easier to make accessible html was designed for accessibility so you know often the simplest website is the most accessible and then of course performance when you're doing less in your code when you're running less in the browser it's going to work faster so that just kind of sets the overall stage of how we make our decisions and then what is simple in technology and what they say here is if you can make a static site if you can just do html css and images do that if it's not going to change and you know they point out one of their links that's an example of a static site if it can't then you should as your first thing that you move to go to server rendered and what i'm going to be showing today with razer pages is a server rendered application so it is yeah so the difference there static website is just html css javascript it the server's just pushing content that there's no interaction there but what do you mean by server rendered great yeah great question so the idea here is uh as you said with the static it's not changing right so it's everyone that browses to the site every day of the year is going to get the exact same information with a server rendered that allows for interactivity so that may be a site that you log in that may be a site that you're interacting with the database but the the html that's being pushed down to the client is not there's not much happening in the client maybe a little bit of light javascript the actual work that's going on is happening on the server right so so what that means is i fill in a form i hit submit it posts that back to the server and the server does the thinking and validates and you know saves to a database and does stuff where what that compares to is more interactive sites so are you starting to get into a lot of javascript you have you know i mean done these things with you know with jquery or a lot of client libraries a lot of you know processing there um so this is things like interactivity maybe a lot of validation or um you know like as they point out things like a real-time data feed or or you know interactive hints as you fill out a form so if i was building a blog i'm posting up to that blog maybe once a day once a week that's a good candidate for something that's static i think so yeah and you know there there's also cases where people do things with um like uh static site generators right so either like a blog where you fill in some markdown and it runs some back-end stuff and it publishes html yeah yeah so as far as yeah and when i'm building my my cool new social network website fritz book there's a lot of interactivity there that should be server rendered yeah yep good examples of both scenarios therefore right so so the the last one on the list here is you know like is when do you jump to a single page application so a single page application i think of stuff like hey uh glad you know we've got some people just still joining and awesome welcome we're just kind of setting the stage of where does razer pages fit in in the broad scheme of asp.net and the different in blazer and all the things we talk about so the most complex is a single page application and this is something where most of the code is running in the browser and it's running in javascript or now we've got webassembly and doing things like blazer of course you've got like react and you've got angular and vue and ember and you know different things like that and so the only reason i want to kind of bring this up is because as i was thinking if i was new to web development i answer this question all the time of people read hacker news and they read the tweets and they read all the stuff and they're like wow i need to learn react in angular and i need to learn javascript i need to learn all this stuff and i learned to program server-side applications and it's been working pretty well for me i jump to client-side applications single-page apps when i need them but i don't start there sure so and and just to be a little bit clearer when when you say code executing in the browser do you mean it actually runs on my machine inside my browser not out somewhere in the internet cloud place yeah exactly exactly and you know that's something we don't think about is or a lot of time it's easy to to kind of forget about but any web application you've got there's tons of stuff happening right there's all kinds of things and this is a mostly static site right you've got tons of network interactions you've got tons of uh you know all these different sources and libraries and things getting pulled in and here we've got analytics and here we've got all this you know search and i just randomly pulled this up because i knew every site on the internet's got tons of javascript on it right but um so those are the things and and your your front end in browser stuff can be doing things like um you know in some cases it's doing things that could very well have been done on the server written to html cached for forever or cached for a few days or something um cashton shared with everybody who's accessing the website exactly just that one person right so i've personally worked on some sites recently where um it was the same content served to everyone that browse the site for weeks on end and it was it had a complex build process and multiple components and all this stuff and it's like you don't have to do that so um i'm not saying single page apps are bad i'm saying use them at the right time use them for a place like for instance recently i booked some flights for people in my family that was a case where there was a lot of interaction i'm going through a calendar i'm checking availability i'm you know interacting and picking seats that seems like a pretty good single page app thing right and i don't have to wait for posting back and forth on the server really quick fluid interactions there so okay so when i look at asp.net you go um here's a little trick by the way we have a shortcut mirror and beer to my heart i used to work on the asp.net site some and this redirects you over to here so when you go when you go to the sp.net site there's this thing up at the top learn about blazer and that is if you want to write c sharp and do very interactive applications with asp.net that works really well so that's blazer we've done previous recent shows about blazer and that is where you're writing interactive client-side applications using c-sharp and then there's also there's real-time microservices apis when you're building web applications we have support for angular we've got support for react we've got support for blazer um you know and all those things so that's those are different options i'm really excited by the way if you're doing react or angular there's some changes that are going on with the templates new project templates for net six that work a lot better with that they they um they proxy and work directly with the clis for angular and react create react app and all that stuff so so i really am excited about those changes but what i'm going to be focusing on today is mostly a server rendered application so okay cool all right so let's um i think i am kind of done with slides and i think we can jump right in so um this is the app we're going to be building um it was linked in the in the resources i'm going to actually run it and i'll just show you what it's going to look like because that's kind of fun too so i've got i've got a pre-built version of this i'm bringing this on up hopefully it is spinning and doing its things so this is a pizza apple a pizza website um awesome unable to start well maybe we'll just not do that then um there it is exited with code that is awesome that is the only coding error i'm going to get today we hope let's try one more time uh okay if this doesn't work we'll just build it but it is a interactive site with a form where you where we're managing a pizza inventory so loading on up our fingers are crossed there it is these are the wonderful things of launching the app okay so here's this and i go to a pizza list and here we go so we're going to be creating a meat lovers potato it'll cost 100 it's gluten free i'll add it and then they sold out because they're so popular wow so we'll delete that right so just a simple pizza list so um so great let's dig in and let's build it so we have this should i step out yeah sure if you want to and i'll handle some questions while we're while you're going here awesome so ask your life questions in the chat um you know any interactions awesome and fun um and jeff is going to be jumping in and handling some q a and also some um digging deeper into the razor syntax in a little bit one thing that i should have mentioned by the way is razer is really cool because it's portable and so the same syntax this razer syntax we're going to be using it to build a server rendered application this is the same syntax this razer syntax that's used for blazer for mvc so it's it's very portable across net web development all right so um let's start it up okay so we've already gone through this stuff these were in the slides and in our discussion uh we've talked through this information so if you're going through this on the on the learn you can just click next because we've just discussed all these things however we've got a knowledge check knowledge checks are exciting let's see if i can answer the question right which of the following is true for razor pages and i am you know answer uh if you'd like to in the chat a b or c i'm interested to see your thoughts um which is true use razor pages for asp.net core that isn't focused on generating html such as a web api interesting okay razer pages can't coexist in an asp.net core mvc app or c a productivity advantage of razor pages is that it keeps together what tends to change together with the views in your app i think i think we could have worded that third one a little more clearly i'm seeing some some votes coming in in the chat i'm going to go with c as well i think c is the right answer here and i'll talk through those the reasoning uh if you're going to build some things that are not generating html you're going to use an api so a web api we also call them http apis and that's done using an api controller if so i'm crossing out i'm crossing out yes i'll rewrite that one and maybe do it in english this time number two razer pages can't coexist in an mvc app and that's not true they actually work really well together and that's because razer pages is actually built on top of mdc and i've done this before i had an application that was all mvc and i wanted to start using razer pages and i just started adding you create a pages folder and just add a razor page and they interact really well so i'm going to go with c and the reason what it's saying there is you're keeping together your front end your your view and your page model those are kept together in the same file so all right i just got 200 points i am actually in a private browser so i don't get credit for it unfortunately question here sorry i'm jumping in and taking questions live which i'm not supposed to do but can api and razer pages in an app coexist they absolutely can yeah you can add api controllers and they can interact and that is a great a great thing is that all of these can interact really well together so you can have um i'm working for instance if we go uh this is a site that this is the.net website we're actually live here so it's kind of meta this page is built with blazer uh the website itself is mostly razer pages and then there's also interactivity where there's like it's interacting with apis and functions and all kinds so these things really do weave really well together john that kind of leads into yeah sean with a nice comment there it leads into another question that we did receive on youtube asking well which is best then for web development razer or blazer and so i really think that goes back to they're both great i just use i just showed a website where we're using them together in the same app right so here's an example of how we can make that decision this is a page that lists a bunch of resources we update this page every few weeks you know it's it's really it's content and it's content that doesn't change between different people that log into it it's it's mostly static so this is a server rendered page um so this is built in razor pages and really it could if we really wanted to we could do static render we could even dump this out to a static thing but it's it's for management purposes it works you know pretty well as a razer page um you know like these different things through here this is using an embed um but this page you know we we do update it but not not hugely often um i'll show another one that i'm happy about because i i worked a bit with this recently this page is razer pages okay here and i made a choice on this this was one where i started to consider do i do this with blazer and the reason why is because i click on this and filter things down so there is some interactivity here um what i ended up doing for this for simplicity and you know we wanted to see how much interaction we actually got how many people are using this page and and things before we wanted to um to uh you know look at converting to blazer um so um so so this is a razor page this one is more interactive and the reason why is because it's regularly updating a schedule as soon as this broadcast ends it's going to pop over into recent broadcasts this is a list of of shows these shows are coming from a back-end api that updates regularly um sometimes we'll have some sort of emergency a show has to get canceled or something so we built this part of the site in blazer it's the same application so it's got razor pages and blazer working together so that's i think the thought process to think about here is interactive interacting with back end apis that are changing maybe something that varies per person this is a case where it doesn't vary per person but that's another time where you would start to think okay that's a single page application so very cool cool all right well let's get into building this so i'm going to create a new app i'm showing this using visual studio code so i'm going to pop over into visual studio code which is open right there all right um here i'm going to swap these around a little bit i'm going to put i'm going to keep my instructions and i'll be swapping stuff back and forth and we'll make it work all right so go back into here there we go wonderful all right so my first step is i'm going to be um i'm going to create the new web app so i'm going to do file and i'm going to create a new folder so we'll do uh let me see open folder and then i can create a new folder so look at all these folders i'm going to like a good person i'm going to create it on the desktop so we'll do a new folder i'll call this pizza or learn tv or let's learn all right we'll go in here and oh actually i wanted to create one sorry do we'll call this razor pages pizza all right whatever create a folder and do that you do open folder the reason and so here i'm going to this is a new thing in visual studio code and the reason for this is because applications can be doing things like running startup scripts and all that and so we actually require so you may get this prompt and you just created this folder so hopefully you trust yourself you say i trust the authors so there we go now we're going to bring up a terminal so visual studio code has an integrated terminal so i will say view terminal there's also uh this the shortcut that you can use so control tilde and that's going to open in this folder so it's going to take a little second to wake up there we go so i'm going to copy this in and you'll notice this is a net new web app so there's a lot of different things you can do dot net new and you can create different types of applications you could create net new blazer you could create net new wpf there's all sorts of different types we're going to create a web app and i am specifying dot dash f net five o and i'm doing that mostly to be safe i also on this machine have.net six installed and so um i'm doing i'm specifying the framework version if you don't have visual studio code or net sdk installed let me show you how to get that real quick so here i am on the.net website and if you go through the download this has a link here to download the sdk and the one you're going to want it's going to recommend based on your operating system you're going to want the one that says recommended and you want the sdk so the sdk is the software development kit and that's the one you're going to want there all right so let's get back to it so we have created a new web app what we want to do here is take a look at what's in our project structure so here it creates this object folder you don't need to worry about that at all that's just what's used in compiling it's interesting to see here by the way that it'll go through and it'll compile uh your code and your razor code actually gets compiled into generated c-sharp files so then we've got pages we've got dub dub and i'll i'll dig into that a lot more we've also got dub dub dub root folder and your www root folder is where your static assets go so that's your css your json your libraries so css and json are my custom css custom json or css and javascript and then lib is where things like bootstrap and jquery that's where you would put any other front-end libraries and stuff and then you can also uh store things in your app settings so this would be things like if i want to store uh specific information you don't want to put secret information in your app settings that actually goes in user secrets and that's a more advanced topic and then for startup we've got our program startup this is just what kind of hosts the application so if you're a beginner you don't need to worry about this this is kind of this is the startup and and bootstrapping of your app and then startup itself here this is where you can go in and you can customize middleware um and so this is where you can do things like using dependency injection you can customize your routing you can customize and add in data et cetera now this thing that just popped up here is asking about installing assets and you're going to want to say yes to this and the reason why is that's going to bring in uh that's going to set up the things so that it can run and debug a c-sharp application so you're going to get things like debugging and intellisense and that kind of stuff awesome okay so we've gone through we've explored this if you want to know more about this this is you know we're focusing very specific specifically on razor pages in this and so i don't have time to go into everything about you know razer in general um so or excuse me asp.net in general there are um you know there's more advanced docs on this so if you go into docs and then while i've got that in french which i was testing something so that's neat um so let's go here and uh so if you go into docs and then you look for specifically asp.net then it's going to dig you into a lot more stuff about um you know the the asp.net like say for instance configuration hooking up a database etc all right so enough talking there let's run the application so down in my terminal i'm going to say net run so it's going to build and run the application now it's actually using kestrel which is its own self-hosted web server if you've been doing uh if you've been developing using um you know like asp.net with net framework or you may be used to running with iis but but asp.net core uses its own web server uh called kestrel it's a lightweight uh server and then it can also interact with iis i can host it in azure i've got you know a lot of hosting opportunities for running locally kestrel works really well it's very pretty smooth so i am running here and i can actually click on these so i can control click and it's popping up this site so this is my very simple site this is it's got a home and it's got a privacy so we're uh you know touring through the app i've got home and privacy so those are the only pages in my application and the thing i want you to notice about this is that when i click on privacy the url actually changes so it goes to slash privacy and this one goes to slash home and that is called routing and that is how these different pages uh how we get between these different pages how we navigate between them so remember we had home and private uh privacy now let's look in the application itself and you'll see here we had home which was our index page and we have privacy so here's privacy and this is razer so we've been talking about razer and razer pages here we're finally seeing razer so you'll notice here that we have some html but it's not just html we also have some c sharp so uh i tried to zoom but i zoomed quite a bit um let me know if this if we need to uh to zoom this out more um but so this is just pure html this is this is just html uh this information here is stuff that's actually running in c-sharp so we're going to dig into these in some more detail but this is what you'll see in a razor pages project with every razor page you have the cshtml which is your view that's your front end and here we have a page model and our page model is um doing some very simple things here it's showing um it's it's setting up logging and it's got an on get method and you'll see the onget method's not doing anything this is a very simple page it's just it has some static information so that's all it needs and you'll see the same thing if we look here this is our home page and it's got an index and it's got index cshtml again it's got a logger it's using di dependency injection to uh to configure that logger so it's available but we're actually not doing anything with it yet and we've got this on get method nothing's happening yet in the application it's still basically static i'll show you one more that we haven't seen yet and that's our error page and here there's a little bit more you'll see this at if so this is c sharp that's c sharp and this is html so we're doing a combination we're running code and we're dynamically displaying this if it has this show request id so that's an example of how we're kind of weaving together c sharp and html so cool cool all right so we're kind of whizzing through this part we have we have finished the creating it and we've explored it already a little bit so i'll go through that a little quickly i think i actually have some slides for this part so what i did is i generated some slides there we go all right so let's let's go with this the slides are a little bit easier to read we've explored this okay so in examining the project we have that pages folder at the top as we saw we've got a razor page and we have a page model so the the the naming is important so for instance if we want to go to privacy we have privacy.cshtml privacy.cshtml.cs we have our project file i actually didn't point that out that is a very small file let's look at that so here's our project file and that's all that's going on we've we've worked hard to simplify these project files over time so all this is doing is saying what the target framework is if i wanted to pull in some other libraries for instance like a new get library that would go in here if i wanted to configure you know more advanced settings i could do that in here so um and then we looked at the program in startup so program is bootstrapping the application just starting up the hosting and then startup is where we configure the behavior and that's where we we configure middleware setup routing etc all right so [Music] yeah so razor pages and and their paired model so why do we have two separate files there and this this is important because it allows some separation of concerns um but it keeps it at a kind of a manageable level so let's talk about that real quick here i've got privacy cs html i could try and put a bunch of logic i could try and put a bunch of code like say for instance here i've got my error i've also got this is my code behind for this right so here we're starting to get a little more logic going and i could just try and inline that all into my cshtml but that gets kind of out of hand over time and so we really kind of want to separate that logic from the view itself and we want to kind of have those concerns separated out and so by having a paired page model that that simplifies doing that um and we'll see a little bit more about that as we start to build out the forum um so let me see then we also have this page's shared directory and i think i have a slide for that page is shared so in our pages shared we have our layout and that is our common things across the entire site so for this think of the header the footer the navigation so things that are going to be the same on most pages of your site you don't want to copy and paste that you want that in one place funny short story here i worked uh one of my first web dev jobs i worked at a financial company we had a site it was built with classic asp and it was all built by vendors and we needed to make some updates and we found that everyone had just been copying and pasting everything and there were 20 000 files stored on the server stored in source control and everything and they all had copied and pasted the header and the footer the navigation and all this stuff so we had to work to pull that into a template right so you don't want to copy and paste you don't want to have duplicated code throughout your your project and so in this case we want to put that in shared so let's look at that here this is my shared and here i've got my layout so this layout has stuff like you know common things that go in the head for the site it has my navigation at the top um it has my scripts and things rendered at the bottom of the page so that's generally a good practice you want to render your scripts at the bottom of the page they're not you don't want to block the page from loading also a lot of scripts that interact with elements on the page are going to explode if they try and say like hey add this click handler to this html if you haven't mentioned that html if the browser hasn't loaded that yet the script is going to be in trouble so it's it's kind of a general better practice to put your scripts down at the bottom of the page and you'll see here is this magic render body so render body is where the actual page itself so if i browse to the privacy page it's going to use this layout it's going to lay out the navigation it's going to come to this render body and then it's going to say now it's my time to shine and it's going to render this content and then it finishes laying this out and then it goes back after that and it renders the rest of this so my footer my stuff at the bottom of the page so cool all right i'm just trekking along i am trying to get through all the stuff we want to show you so i'm not staring at all the the comments i'm i'm trusting if there's something dramatically awful that jeff will jump in and correct me the dramatically awful hasn't happened yet i'll let you keep going there my friend and and there's there are a couple of really good questions that have come in um particularly as as we're looking at i'll ask this one while we're um while we're taking a look here um there's a question about what's the difference between cshtml and razer files razer is the name of the syntax and cshtml is the file file name so right the i'm i'm specifically referring to places where we saw dot razer files files with the razer extension yeah so so dot rate and actually feel free to if you want to answer this one for me because i think you may be better at it but you can actually create razer components right and so dot razer is what you would use for a component yeah cshtml really is the this is an in an entire file that's going to be rendered and managed by asp.net dot razer is something that's going to be managed by the razer templating engine and typically works with blazer now we can plug the like you said dot razer files in as a component and use it with either blazer or razer pages interesting but a little bit further down on the dot razer files yeah yep awesome okay so i'm gonna truck through i think one last thing i wanted to talk about here before we add in a paper or a form is um our layouts uh no not layouts our routing so routing is done by convention and you can override this you can specify all kinds of different endpoints so if we look at our code here we go and we're right now when you do you know new project it does map razor pages and so that turns on this convention based routing and it's going to handle all those razor pages for you automatically so if i create a new page called pizza it's automatically if i go to slash pizza it's going to go to that so that oops that is the id idea with routing there's one that's just kind of a magic thing dot index so if you have an index file that is going to be the home for your site so you can either use slash index or you can use um you know like or not even include index and then you've got also for subfolders you've got that as well so if i if i do domain slash products it's going to look for an index if i do domain products create it's going to look for create.cshtml so it is time for a knowledge check so here we go which best describes a page model so i've talked around this a bit i haven't done dug super deep into it so this is a little bit exciting we'll see if if you get it so we have the three options abrc a page model encapsulates the logic operations scope down to just a razor page that seems pretty good b a page model provides a top level view template using razer syntax so that's a view template and i remember talking about a view template but i'm not sure it was a page model see a page model is a partial razer markup file used to break up large markup files into smaller components so as always answer away in the comments we'll see how we're doing here oh awesome so by the way if you're watching live on on facebook or i'm sorry on facebook on youtube uh damian edwards is is answering questions there wow we've also got glenn condren okay uh glenn condren on twitch so these are we've got top-end uh developers that are like building this stuff so um ask your questions away and you will get good answers okay so let's answer this which one is it i am going to go with a um and the reason is i'm going to cross off b uh so that top of the template that's actually the layout we looked at that layout that's what what had the navigation and the footer so that's the layout and then see that's a concept called a partial and you can have partials that are pulled in and we're going to use a small one for validation later but we're actually i'm going to go with a final answer got it right okay so going back to where we're at in the project we have just finished that and we're ready to start creating a form so i i'm going to start creating the form we'll see if i get through it now part of the excitement of today is i'm actually jeff is going to fill in for me during that part i'm driving my kid to school in 10 minutes so we'll see how that goes um okay jeff is going to be doing a deep dive into razor syntax at that time and taking questions so save all your hardest questions for jeff at the break there okay so we have explored this we've explored this we just finished that i remember my answer is a i got more points that i don't get to keep so sad let's go on to adding the page so in my application i am going to create a new page and i could do this a few ways um if i was in visual studio like the full visual studio project i could do i could use uh right click and scaffold that in i could also just create a file i could create a dot cs html cshtml file and a dot cs i may be copying the stuff from another page so i could do that however using the cli i can do i can have it build that for me so i'm going to copy and paste this out of the tutorial so i minimize my misspelling so i'm doing dotnet new page and i'm naming my page pizza so before i do this and just to kind of make sure you're following along with me try and think what is it going to create if you're reading the tutorial here you'll see exactly what it's going to create but we're looking for two files okay so i have two files where are those files unfortunately i did this not in the right folder so i'm going to i could just move them um but i'm actually going to delete them and i'm going to navigate into that folder so that's something actually this is a new tutorial and that's something that i need to update that step and i apologize if you made the same error so i'm going to go cd and now i'm going to run that same command so there we go so now we have a new pizza page and a new pizza scs html so let's take a look at those the page itself is very simple uh and let's let's talk through that syntax here so it has an app page directive this is something jeff's going to go into in a little more detail when we talk more about razer syntax but that app page directive just says that it's a page and it can be used with things like routing um and so it gives information but mostly it says hey i'm a page and then the model specifies what our page model is in this case it's pizza model where is that pizza model well for that we need to go to our pizza.cshtml.cs and so that is right here so here's my pizza model and it it um over it inherits from page model okay and it has yep go ahead john i think you may have accidentally deleted your program cs file instead of your p pizza cs html file there okay let's uh thank you and i'm i'm glad you pointed that out because that would have made for some wonderful um some finicky compiling there yeah so what thank you that is the kind of catch that's why i keep you around jeff so i'm going to say program that's what i'm here for yes this is pair programming that's what this is it certainly is okay so now i'm going to go and i'm copying from another one fortunately i did not modify my my other reference applications or grand cs type i named them razer pages pizza it was razor pages pizza i think we're good this is still on okay there it is so wow crisis averted thank you so wow okay so let's keep going here um i have a couple more things we're going to want to add we're going to want to create some backing models and services so i'm going to go cd.bat and we'll do we can do make directory um so i'm not sure oh this is using the um the newer syntax and i'm not using that so instead of this i actually want to do with braces so this is a more um a fun thing but i'm not using that syntax in this application so we'll go here and we're back so now let's add a new directory we'll add one called models while i'm at it i'm also going to add one called services and i'm going to create in my models directory oh i'm at it again okay so i want to delete that okay so i want to have a models and then i also want to have at the top level it's a little fun okay so here at the top level i'm also going to create one i'm not sure actually how else to do that first let's add our um our model in so we'll add in a pizza so i'm going to do a new file go to pizza.cs and for that we're using a very simple class this is our model class and we're also going to need a using for this and let's bring that in so this is using data annotations i'm going to copy that in up at the top here so data annotations are what allow us to get validation um so you're going to see and we'll dig into those a little bit more but we've got required and we've got range so that is that now i also want to create at the top level so i'm going to do that actually here so we'll do it and services and in my services folder i'm going to create a pizza service and our services are our service we're going to use a backing service and i think we call this pizza service and our pizza service this is just an in-memory data store so this is where we're going to be this is where we're going to be saving our stuff to the database so we've got two pizzas uh we're gonna start with a classic italian and a veggie we have it does some simple things it can get one it can add one if you've seen uh we did a recent web api uh with asp.net core and we also use that the same pizza service there so i i think you may have inadvertently put your models inside the pages folder your models folder how do i even type so you're right yeah so we right we can just drag that up one level and it'll move it up so i'm dragging yeah you can take it all the way up keep going up you can take it all the way up to the project and it should have moved it out okay let's see no it's still there all right let's see about this let's close some stuff down okay did it move it out now you can also take it to the bottom where it's just over some of the files in it and it'll uh move it out otherwise you could be like you know elite developer and just move it at the command line do you want to move it yes now it's also going to mess up my name space because of that which is fine okay yeah there we go so here the one thing i'm in oh it already has you're good wonderful all right i'm back on track thanks jeff one day i'll learn to type [Laughter] it's funny because i wrote this whole thing this past week cranked it away you know and as soon as you get on screen it's like oh no and i want you to do a quick time check because i know you have a hard stop yeah i actually intermission so this might be a good time we're most we're a lot of the way through but i think now if you want to take some questions and kind of do that deep deep dive into the razor syntax sure we can do a little bit of that awesome so dramatic uh when we come back after the cliffhanger we'll finish building the form and we'll hook it up fantastic all right all right we'll catch you in just a little bit there welcome back friends my name is jeff fritz uh see it says it right here um and there's a bunch of questions that have come in and a number of folks with some more advanced questions a couple folks with some very specific questions that troubleshooting an issue they might have let's take that offline let's let's get some sample code in from them and we can dig in a little bit further i see folks asking questions from learntv from twitch from youtube let's go through a handful of these questions real quick and we'll take a look at some of the syntax that john was using there and talk about things like directives and some of the other features of razer but i'm going to run down some of these questions the first question i have here from learntv says i see the asp.net visual studio templates and actually it's all of the the net web templates use bootstrap with razer for layout is bootstrap the most used component uh with razer pages in the real world today it's it's definitely something that um it is is very uh very popular there are a number of other css frameworks that are in use out there but for for net developers it's something that we have integrated and we have carried for for many years now as a preferred default uh css framework that ships with our templates so is it is it the um the most used css component probably because it's bundled with it um should you learn more about bootstrap absolutely learning more about our our tools that were that we're using that come shipped with our default templates is only going to help you and you should be able to transition some of that knowledge to other css frameworks if you choose to use a different a different framework with your application next question that came in from learntv is hey where can i download the code for the pizza project that john is talking about so all of the samples that john is showing today are available over on microsoft learn so go to learn.microsoft.com and check out the razer pages uh courses over there i think we have a link that we can share out um that that has more information about exactly where it is this is the content that is being presented in those modules about razer pages um over on twitch there's a question here uh using the command line interface to create a new page would generate the html and the code behind in a specific directory is the question we have coming in from twitch yes you will absolutely find that uh there's a razer resources link thank you so much to to our friends moderating behind the scenes there we go um the the command line is preferred for doing these types of interactions because you will get all the parts that you need to build a razor page to work with it all in one spot with the names all lined up appropriately so definitely recommend that you use the command line interface especially if you're not in a full-fledged ide like visual studio 2019 the upcoming visual studio 2022 or visual studio for mac you're going to get a great experience with the net command line using using the templates that we've made available for you there and of course you can make your own templates if you want to install and work with it over there as well some questions from youtube let me run through these real quick there's a question here can you make email templates with razer yes you can razer is a templating language that isn't isn't specific to asp.net core we deliver it with asp.net core and you can use it and asp.net but we deliver it and you uh have it available to you in the default templates but there are ways that you can stand it up and and use the razer engine directly to render text to apply it to a model and render text there's links and there's references out on the web that you can check out about using razer to format text and use it as a general purpose uh uh templating language it's a great tool for for that type of thing next question here is what is server render versus server pre-render um they're kind of the same thing server render and server pre-render both refer to your you're building your code you're writing your c-sharp you're writing your template in in razer and it's going to be it's going to be created that your c-sharp code is going to be executed on a server and that that execution of the template we call rendering now sometimes you'll hear us refer to pre-rendering of it because it it'll be cached we'll do that rendering and cache the results we'll take the output html cache that so when the next person comes through when the next request to the website arrives instead of going and executing all the code again we'll pull it out of the cache and serve that so you might hear us refer to that as a little bit of pre-rendering there was an event that that was being used in previous versions of asp.net technologies that handled pre-rendering and rendering differently in the scope of razer pages razer templates it's really the same thing you're rendering content another question here what's the difference between the sdk and the runtime downloading so i believe uh the question is referring to when you go to dot.net and you want to choose a net tool to download real easy to to understand the difference the sdk that's the software development kit contains the command line interface it contains the tools for you to build and write applications it also includes the compilers the templates these things that you as a developer are going to want in order to build your application the uh runtime are just those things that you need to execute your application so after you have a compiled application you have a runtime there that contains those things that are actually going to execute and that's really great for configuring your web server so that it has a runtime out there that all of your applications can share and build and run against so you don't have to carry that runtime with you necessarily to to a common web server that maybe you have a a few uh web applications running on you can share your runtime out there and we have documentation about how to set up and and execute using the shared runtime or if you want to bring your own runtime and you want to package it with you and deliver it next question on youtube is what's the difference between asp.net web app and asp.net web app mvc with regards to the razer templates and and creating new projects so asp.net web app creates a project with razer pages and prefers what we saw john demonstrating there where you have your dot cs html file and you have your cs file that contains the model that goes with it that's a razer pages formatted project and that's your asp.net web app asp.net web app mvc uses the mvc framework the model view controller framework to separate all of those those concepts so you have model classes you have view templates that are built with razer and you have controllers that are built that kind of glue those together that handle the request coming in from from uh from the browser from the http server and decide well what business logic should we execute and when it's done executing that logic in the controller and it maybe it gets a model from a database or it sets up some some information and it hands that off to a razer template where it's going to be back to the previous question where it's going to be rendered it's going to be turned into html or maybe maybe some other format maybe maybe excel format maybe csv format and deliver that to the browser lots of options that you have there with mvc but it's a different way to think about it where razer pages is a very page-centric approach to building websites where you navigate to a web page well that web page is actually a file on disk in mvc you navigate to some url and that that's an action on a controller and it's a little bit different concept there next question we have coming through here on youtube there's a question is there a way to display all the routes in an application something similar to bin rails routes from ruby on rails world there's a a sample some of the folks on the.net team have have answered this question and shared some some code for this but um there is some sample code out on github um creating asp.net core route analyzer and let me share this link um this is an analyzer you can install in your project that will um [Music] come on let me post that link nope it's not let me post the link um i'm going to share this by hand over on twitch and i'll share it over on uh youtube where's my youtube there it is there you go and what this will do this analyzer will output all of the routes uh in your immediate window so you can take a look at those there you go there's the link thank you so much for highlighting that friends um hey luce thank you so much for for dialing in another question we have from youtube can we migrate a large.net 3.5 web forms app to razer pages is it going to be worth it or would rewrite be a better approach so migrating from from.net framework 3.5 to razer pages which is a net core net core concept and a different framework is a lot of changes you're not going to be able to reuse much of your user interface code so what i would recommend refactor your.net framework application your web forms application take the business logic as much as possible out of your web forms put them into classes move them out into class libraries that can be shared with your application so that all that's really in your web forms application is managing the user interface once you have that down to just just a bunch of for loops ifs while conditions using asp.net components to build that web forms uh user interface and it's referencing everything externally then you're in a better place to make that decision about going to razer pages it's at that point going to be going to be a bit of a rewrite but you're only rewriting the user interface at that point hopefully your business logic that you've been able to move out into class libraries is in a place that you've been using it and and you know that it's it's solid it's it it works the same as it did before so that when you do light up and you do activate your um razor pages application you start converting start rewriting your user interface you're pointing to and using the exact same business logic i have about four questions here but i think i see mr galloway wandering back in john we've had some really great questions come in here and i've been answering them um i'm going to answer let me see if i can answer one or two more here before you get all settled back in on youtube we have a question is it good is it a good idea to use razer templating engine in a library project just for something like email template generation that's not a bad idea nothing wrong with that certainly something that's possible something you can do and because it's a common format that a lot of folks know how to use i think you're going to find you're going to be able to get to be able to find developers that'll help you and be able to work with that solution going forward any plans regarding a more model view update-ish model for c-sharp i think f-sharp has something called fable um i had to work with swift ui recently and starting to like the model of model view update um it's a good idea our friends glenn it's a good thing our friends glenn condren and damien edwards are here i very much appreciate that question there are some experiments around model view update it's something that we want to we want to hear your feedback and learn more about and and help us make a decision if it's something we should invest in um there is the comet project out there that our friend james clancy has been working on uh our our teammate james clancy has been working on you can find him on twitch streaming and tinkering and ratcheting on that for a little bit um but we're very much experimenting and trying to figure out what makes the most sense for that we we absolutely want to hear your feedback and hearing that that's something that you enjoy i think helps us make that decision and helps us um and want to experiment more and decide uh not decide but go in and pursue more feedback any new features from 2-1 to 5-0 to 6-0 for razer pages gosh john new features for razer pages over the last two three years i don't think there were significant new issues for razer pages i mean so there are a lot of fixes a lot of them go into things like performance um some kind of there are some things that were brought over from blazer that are also um you know popular features like things razor syntax and different um componentization and things like that um that actually kind of goes into the one one of the questions we follow-up questions here any difference between razer used in mvc and blazer yes slight differences yeah um code block versus functions block and i'm not sure if that's on the agenda here today um the the way that we reference and use the components is a little bit different when we're in blazer versus when we're in asp.net asp.net core rendering components there um so a little bit of a difference there not not something that's going to be um significant to scale and cross i agree and i feel like this is an area where a benefit is you're learning a syntax and so well the application will change a little bit and so because of that you're going to you know change the way your your you know what the component or what the file needs to do but the actual syntax is the same and that's kind of the biggest benefit i get is when i'm jumping between uh razer pages and blazer i'm not having to think okay now i'm using you know handlebars or now i'm using you know different like you know let me see is there a bottleneck tax when pre-rendering no no there's no bottleneck when you're pre-rendering html from a razer page can use dot net 5 web api with razer pages yes you can oh yes that's something that that i think folks that are building with uh to your point earlier john building with angular and vue and react who want to build those rich client-side applications they can put some of their base code they want to render inside of a razor page and have it reach out and interact with an api built with built with asp.net core absolutely yeah well you know you mentioned something there with uh performance and just kind of performance in general sure oh yes so we love this topic oh my gosh yes um so this is something this is on the asp.net site and there's a thing where it links over to the tech and power benchmarks and so this is part of you know we're not benchmark driven but we're benchmark informed when we do our development so we really want to be near the top of the scale for pretty much any of these um so it changes from time to time but here you'll see number two can you zoom in a little bit there yeah yeah this is well let's see if i can it's it says it's so they're doing something weird well i don't know uh oh there it is it just wanted to wait there we go there we go so that's pretty good right look look at this right here number two with a bullet so now um there are some some clarifications on this this is for a plain text benchmark this is for a site that's not doing a whole bunch of stuff this is and that's the goals of that benchmark right but even if you get to something like fortunes um it's still and i don't know my zoom is crazy but um you know it still does pretty well across the board and so we've really worked to try and make um to make asp.net like a very highly performing thing and regardless and then when we when you build applications using these different types um you know it's the goal is that you get that performance across across all of them so there's something to be said about um asp.net core the web server raw performance the best available out there when you start layering in your code well okay now your code needs to it it's not going to get 7 million requests per second and yeah i think that's the goal is we want if if my site is slow i want that to be my fault and then because i can fix it right i can i can look and say oh maybe i should cache this page or maybe i should you know think about how i'm managing my data or whatever um can i address the last question that we have here and and i'll let you continue the last question we have here is about uh net six preview seven we saw the templates change as as part of preview seven and and the question comes in hey where'd the program and startup class if the startup class disappeared and it feels like they were merged together and what folks are seeing there is is really some of the the great work that's been done by our c-sharp team uh to make top-level statements and to make it simpler to build applications so we're simplifying and making it easier to build some of that boilerplate code and let's face it the the program file the startup file these things were like my rotisserie grill i set it and i forget it literally i don't remember the syntax of these things because i said it and i never come back to it here's a perfect building a perfect example of that jeff i deleted my program file right and then i just copied one in from the same project another thing and it just worked right because we never changed this i mean you can and and and it's the same with the new minimal templates if you if you want to override the stuff it's available but the things that you're just including in every project that's kind of ceremony there's not really a lot of point even a lot of things in here there's not really a lot of value again i'm not going and changing this very often yeah once once it's built unless you're adding a significant new feature that needs to change the way your application starts don't touch it so i think that's the idea with these and you know people have strong opinions about code and coding styles and things sure but part of the idea with these minimal templates is for most cases and especially for beginners to make something approachable why throw 9000 generated files at them instead make it so that the code that people don't customize very often you don't even have to write and then if you do want to customize it you write the code right exactly so i think and so this this application is built using the net five things because it's shipped and it's it's uh lts and it's you know um but that is definitely something where i'm really excited about is those new minimal templates and the top level statements and all that kind of stuff but to to a little bit of that question the syntax you're showing here does it still work in dot net six yeah yeah it does which is great right so that's that's the point is that the it's a simpler layer on top um and honestly that's part of what i like about razor pages is in a lot of ways it's a simpler layer on top of mvc so i was an mvc developer learned it wrote books on it felt pretty good about it razor pages came along and i was a little scared because i was like it's something new and then when i started playing with it i was like wait this is a simplified nvc for things that i wasn't changing very often so yeah and that's a good kind of part of this for a background if you're an mvc developer or you've used other mvc type systems a lot of the time your controller is not there's a lot of ceremony there where the controller is just saying return view return view return and and so do we really get any value out of that so i like to use mvc when i need it and for a lot of cases razor pages is that kind of right level of abstraction for me sure sure all right we've got a lot to cover still so i should probably jump in and get into this form a bit more and we can take some more questions in a bit sure i will i'll answer a few questions on youtube and twitch and all the places and and prep the best ones the stumpers for you later awesome and aunt oh great and also we've we've reminder to people we've got some amazing uh i saw damian was on here earlier glenn condren there's some there's some mvps i'm seeing here and so like there's definitely if you've got questions this is a great place to not only ask questions but also have a discussion what do you think about this or i you know how do you structure your applications or how do you make a decision we want to encourage beginners to ask questions please there's no judgment here any question is just fine our team's happy to help you awesome all right well let me jump into creating a form so what we had last done we set up our backing sir we created an empty page we created a backing service and a pizza model and so with those parts in place we're ready to customize that page and start building out a form so here this is my pizza page and i actually snuck in a build earlier i think this will run as is let's see tempting fate because that's a good thing to do so what we should see here is another page called pizza we should be able to browse to it using slash pizza and uh when we browse to it we it should be a very boring page that looks just like many of our other pages so far so here notice it's not in the navigation we're going to fix that in a bit but if i go to slash pizza there's our pizza page so it's got no content on it because we didn't write any content yet right so but but the page does exist and we're ready to add that form so what i've done is in the in the uh tutorial i've included all the markup in one block and i'm experimenting with this i i am it's also you know possible to kind of add a bit add a bit at a time for this i'm going to paste this in and then we'll talk through the code so we're going to spend less time watching me make typos and a little more time explaining the code that we have here so some things from top to bottom first of all we have this title and this we're setting view data title to pizza list and why is that important well that is referenced in our um in our layout right here so when we write out the title it's pulling that information out this view data title and it's going to write that as the title of the page so that's going to show up in in the browser tab and stuff and for seo et cetera then after that we've got razor syntax this is a combination of html and i've got some bootstrap classes in here so i'm using a bootstrap card and i'm setting padding to three um but i'm also using these things called uh tag helpers so these are these are this is tag helper syntax and so we are using a validation summary on our form so what that means is when i go through and if i start putting in or if i leave something required blank or if i put in a word when i should be typing in a number it's we're going to need to write out that information and fortunately there is a tag helper for that so there are several tag helpers that are built in we've got and some that i'll be showing here we've got labels we've got partials we've got form input tag helpers so you'll notice here anytime you see this asp4 that's going to key off in my mind that it is a tag helper and actually let's go over it's slightly different in so this is visual studio on windows and you'll see here we actually get this kind of purple syntax highlighting so that's when i'm using visual studio on windows that really keys it in for me any of these that are purple it's html with some magic for most of these right so this is a select tag or a label tag but there's some magic involved and what's neat is with that because there's magic involved this actually is giving me syntax giving me completion so well it looks like just text this is actually this is code these are setting properties here right so let's go back into this so so here we've got a form and this form is going to have uh it's it's a single row across the top and you'll see the things we're adding so we've got a name we've got a size the size is a drop down list so that's a little bit interesting we're doing some things to to kind of set that up we're also using a helper so this is an html helper and it's getting a a select list from an enum okay so here's where that's going to match up to in our pizza class we've got a pizza and it's a size it's a pizza size and here's our eno and that's a pizza size that has small medium and large and then in our pizza cs html this is all that's required to create a drop down select so that's going to get those and display them price this is the price of the pizza it's just an input but there's some magic to it because that input has in the pizza class and we'll continue going through this as we look at validation and stuff but this is set as a decimal and it is a range so where whereas it's just you know in the html it's going to look like it's just html it's an html input this is actually being mapped to decimal input um and then we've got a submit you know we've got a check box for if it's gluten free and that maps to a boolean is gluten free and then we've got an ad so this is our entire form here this is the front end of the form now there's no logic for what to do with this yet so when i click submit what happens when i click that add button what happens that is going to happen in our page model so this is our front end this is our what are we rendering out and then how does it interact where's the logic where's the loading of data that all is going to happen in our page model in a bit so that is for adding to the list now if you were watching earlier you would have seen when we added to the list we're displaying a list of our pizzas down below so we want to write those out and there's different ways to display them i'm going to use the table so tables is a great way to display tabular data it's like so we're just showing a heading at the top and then we're doing a four each now here's the real thing i want you to like to see here this is the magic of razer so here i've got an app for each so this is c sharp code so this bit here is c sharp code this is html and i don't need to do anything well i just opened up the mdn reference in my other window awesome so we don't need to do anything to kind of jump back and forth between c-sharp and html here i'm doing like i i can use at pizza.size so since i did for each var pizza and pizzas then i have a pizza that's in scope for this for each block and i can just do 4h dot size for each dot gluten free text so let's dig into a couple of these here in a little more detail this is using stream string interpolation and it's formatting this price in a currency format so i this is going to be dollars and so it's writing out uh dollars and then what the actual amount is and then here this gluten-free text this is actually something that's going to be handled in the um the form itself or in the back end page model so because i've got a few kind of back end things it's not able to i don't think i can run this at this point we'll see because it's calling that's model.gluten free text etc so i don't think it's going to render and it's it's not supposed to but i'm just going to give it a shot for fun so i'm bringing this up in another window see if anything renders see if the page explodes all right i need to restart it that is one thing by the way i've been doing a lot of development with net six with like visual studio 2022 and the hot hot reload stuff in.net 6 is so great because it automatically is going to update and and run all my stuff for me so now i think if i do.net run i think it's going to explode because we've got references to yeah so we've got some things missing in in our page model and we'll fill those in in the next section so we've walked through kind of top to bottom here's a form it's using tag helpers um so these tag helpers are html plus some magic and then we've got some model binding where we're buying binding to a list of pizzas and then we've got this magic thing down at the bottom that i just want to give a little shout out to and that is a partial so you saw partial mention in one of the quizzes recently and a partial is something where we can inject a little bit of markup and we can kind of call it out somewhere else so this validation scripts partial is a shared partial so i can put this into multiple things so here's my validation scripts partial and all it does is list a few uh few javascript things all right my phone is going nuts i'm checking that's nothing is on fire okay good so here we've got a few scripts now what's nice with this is it is shared and i can include this in any page in the site that i want but i don't have to include it in all of them right so my layout if we look way down at the bottom it has this render section render section scripts and then my pizza has this section scripts and it's got a partial so the way all that maps together is in the layout when it sees render section scripts it looks for in the page do i have a section scripts i do and then the only markup in here is this partial and then that partial is injecting those um that javascript those two javascript references so cool all right so we have created the form i think we are about done with all of that so now we're going to handle interactions in the page model so we've done the front end and now it's time to turn our attention to this so our page model does a few things it handles interaction with the front end it also provides a way that i can make data available to bind to it so what that means is our we're going to need a few things in the front end we're going to need a list of pizzas and we're going to need a single pizza for our form so first of all let's fill in that list of pizzas and um actually i'm going to kind of like we've got several different things so we've got our form so our form to create a pizza we're going to be adding a new pizza and i can do that let's see i will confess i'm more used to see format document let's see how it does there wonderful okay so i'm going to add in a new pizza and look pizza new pizza i typed that wrong if you're following in the doc this should instead say public pizza new pizza like that so this is using a model so we need to bring in a using statement there and i'm going to copy and paste that over so i don't miss type so that is but now what this is doing is razor pages so i probably mistyped that and i think i saw someone mention that in the chat really so this is razer page just pizza see if i can learn to type let's save that to that yeah actually i'm a little confused here using what what is upset did i already have it oh my name space is off so that's something so and this is again because i typed everything crazy so let's instead be this tell you what i'm gonna do you mistype this i'm going to follow what i did on the front end i'm going to paste this in and we'll talk through it and hopefully this will work so pizza close everything and try and save things and see what we're ever on so pizza okay so this was wrong here because we had oh no that was right okay okay so what i'm doing here is i'm navigating through because i think i have my um usings not mapped to stuff uh unfortunately we are not going to handle a download pizza feature we don't get to get to that today so that's unfortunate all right let me see i've got to build and i've got i think some name spaces are thrown off so namespace razer pages pizza dot pages so that is correct and then here and that is correct and then let's make sure one last thing is i want to make sure our pizza and that looks correct so let's try and build it again okay so that's right so i wonder why it was freaking out at me and this also i get a lot of syntax here if this continues to freak out at me let's let's run it if it freaks out i may switch over to my existing running one because i want to spend the time looking at the code okay it's running so it says it's running so it may be a weird thing where it's just trying to give me trouble with syntax highlighting um so let's go here and if that's the case then i can switch back into showing you the code a bit more okay so we're going to go to slash pizza running so we can so the code is valid and now we can talk about why it works and we can ignore the squiggles so oops that's funny okay lego medium we'll say that it costs one dog and let's click add okay so here we got a validation error so that's good that's what we wanted because pizzas do not cost dogs they cost money so here let's take a look at this a little bit more and see what's going on so that this input remember i said that this was using a um an input tag helper and so that input tag helper don't don't bother reading through all this it's actually written in the tutorial what it is but it has things like dataval range min dataval range max etc so that is used by those in page scripts and it's actually processing that and it's using it to validate on the client side so this is client-side validation so it's checking before i even can submit the form it's got to be valid so let's instead look at twenty dollars let's say it's gluten-free and add it so now it's added to the list and then when i click on delete it's going to remove that so now let's dig in a little bit more and if that continues let me switch over to virtual studio because it's just bugging me all right so let's see yeah um i'm going to john did you accidentally move the did you move the models folder there so i didn't and what's interesting is that it's actually running like the code is running and it's valid you know what i'm saying right and to be clear the models folder is is just a convention if you have it still in the in in whatever name space it does get compiled up and referenced properly so yeah there models is is a sibling to the pages folder so that's that's okay that's that's what it should be yeah so it's i think that maybe my moving stuff around convinced the um syntax highlighting i'm going to try actually close and reopen the solution and if that doesn't work actually okay i was going to say you can do a reload workspace oh yeah that would have been better right that's the way i would do it if i was in visual studio but in visual studio code we could say just reload the workspace yeah okay let's see if it's gonna keep giving me trouble you'll notice by the way um that it now has a bin folder and i get that when i um compile and run my application so now let's go into my pages let's take a look at pizza no syntax errors now let's look at pizza.cs no syntax errors so wonderful now we can look at the code okay what i want to do now at this point is look at these interactions in the page model so we looked at how we used those input helpers and model binding on the front end and now we want to look at how we're providing data and handling interactions in the page model so the first thing this on get so the onget method gets handled in a get request so this is what happens when i browse to the page i browse to slash pizza and it needs to render for that i need to get all the pizzas so it's kind of um we just have a magical pizza service that's running and the idea with this think of this is it could be hitting a database or whatever right so um in this case our pizza service is just reading from an in-memory list so i'll just point that out to you in case you're curious so here we have here's our list and get all just says return all the pizzas so it's basically like stub code so uh so that is the get all that's a pretty simple case what's neat with that is i call get all i have a list called pizzas so this is a public thing in the pizza model because of that when i am running in my pizza page when it does for for each pizza and model dot pizzas it is able to bind to that so it's able to bind to model.pizzas is in the page model as pizzas now one thing that i really like about this page model approach is i can have multiple things that i can bind to so previously when i was doing a lot of mvc i would have a bunch of different models and sometimes i need like a list and then i need a new one or you know a new pizza to add and i would need maybe some other information and i'd need to create all these view models so pizza model kind of serves some of the purposes as a view model you can have multiple things that you can bind to here i've got a list of pizzas but i've also got a new pizza so i'm binding to this new pizza property so that the new pizza is used in the form so here we go here's our new pizza up at the top so you'll see here new pizza dot name new pizza dot slice new pizza blah blah blah so there's a few different ways you can bind in this case where i've got both a list and i've got one specific new one this seems to be the smoothest to me is to bind to suit two separate things so i'm binding to new pizza and i'm binding to um a specific one now that's great i filled in the form it's able to bind all these things so newpizza.name all these things are going to map directly and they're being bound because of this bind property to a new pizza so now we need to handle one more thing which is that post to create this new pizza so here's the magic there on post maps to a post request so when i submit my form that's an http post back to the the back end back to asp.net so it automatically is going to run this on post method so here we're going to do two things first we're gonna check if the model is valid we've already validated in the client but it's a best practice to always validate client and server somebody uh for for a few reasons one is someone may have javascript just turned off on the front end but another is that you know people can can try and hack your site or whatever it can try and bypass your javascript validation or you may have errors in your javascript validation whatever we always want to validate it on the server as well so we say if model the state is invalid just return the page again and this will just display the page with the form and they can fill it out again how do we decide if that model state is valid or not well here is where we go to our data annotations so we have two data annotations in use here we've got required and we've got range so there is implied in here also because this is a decimal it's also going to val validate that it's the correct type as well so that's why when i try and fill in dog or something it's validating no this is a decimal so it needs to be a valid decimal so it validates the types and validates my annotations and all i need to do in my on post is say if it's not valid return the page otherwise if i've gotten to here i know that it's valid so i'm going to call two things first i'm going to add the new pizza to the list through the service and then i'm going to do redirect to action why am i doing this well the reason is we've updated our state and we want to basically reload the page now we want to clear out the form and we want to display the list of pizzas and our list of pizzas now includes that new pizza so i do redirect to action what does that do that pops me up to this on get so it just runs this we've already seen how that works it just displays the page so one thing i really want you to notice here is there's not a lot of code in this because of the separation of concerns we're doing just a few things and we're able to write a very small tight on posed or onget method now if you're watching close there's a couple of other methods that i've skipped over and i want to talk through those now so there's this gluten-free text what is this for well we've got this is gluten-free checkbox so that's a boolean if we look at our pizza model is gluten-free as a boolean how do we want to display that in the form we don't want to say true or false in the form that would that wouldn't really make sense to a user so in the in the list down at the bottom where it writes them out we do model.gluten free text we pass in the pizza and then that gluten-free text is going to just do some formatting here this is a real world very useful thing i just this past week was working on a page i needed to do some complex formatting i had started to think oh i'm going to write all this in my razer front end in my cshtml and then i was i was thinking this is not maintainable this is ugly code it's not easy to debug and step through instead i can abstract this to a utility method so i highly recommend doing this like go through and refactor your cshtml if you see a lot of logic in there start thinking about should this be in a page model should this be in a partial so you really want your cshtml to have as little code as possible and you want to put that processing put that logic into your page model so we've gone through a lot of things try and think if there's one main concept that i haven't talked about in that form all right that thing is delete so there's a delete button shown for each item there's a few different ways to handle this i chose to do this as a separate form with a delete button for each one and that makes it easy to handle the routing so this form this is actually a this is using a html helper or tag helper excuse me and it is uh so this asp page handler this is going to map to on post delete so because i called this delete and it's going to be posting a form my convention that goes directly to on post delete and because i hooked up the routing for it asp route id i give it an id and because of that i submit the form and then that on post delete handles this and our logic there is very simple we tell the service to delete the item and then we redirect back and display the page again so we're getting short on time i want to make sure i cover through all that code but i think high level what i would i really recommend seeing out of this cshtml keep it mostly html use your input use your tag helpers to really kind of keep that lightweight and focused you put your logic in your page um in your page model and with your page model as well try and keep your functions as small and light as possible so even if i'm doing something like saving this information to any framework or you know making an api call i recommend if it's you know more than a few lines of code think about abstracting that off to a service there's one other thing that i always do which is just because it starts to bug me if i don't is i want to add a link to the navigation so as jeff starts to jump in and tell me one other thing one other thing what is that so the question that you touched on briefly but um back in that delete method you did a redirect to action at the end of it and and the question is well why redirect to action when you could just return the page at that point you're right and you could but i think i think we want to talk a little bit about the the post redirect get uh methodology why you would choose that yeah okay so well go ahead so right and and to to the question from dukasoft on twitch um if by by returning page on the delete action you can hit f5 and it will repost that same delete action where when we do the redirect post redirect to the get action it's going to send you to the get that just shows you here's the list of pizzas on the page so when you hit f5 and refresh or control r or whatever your browser might be it's just going to refresh that list and it won't reactivate the post to delete again and this is you know what you're pointing out there's a really good good point and it's a reason why understanding how html is working how http is working is important because there have been cases where people would just implement a lot of delete things on a page as a bunch of links and it's possible like for a web spider to hit each one of those right and delete all the things out of the page or it's possible like you said to refresh the page and it actually resubmits something so this post re direct get is really an important and useful way to keep things like from handling those interactions correctly so now if i do it is it's a common pattern that you can use in many applications i want to do one other thing before we jump please you were mentioning links yes so here i'm going to go into the navig the navigation section up in the layout and i'm just going to add in one other thing so this is the tag helper again this is saying redirect to the pizza page and the only reason for that is now when we run this for one last time we're going to see it up in the nav at the top so that's you know just the idea there you want to integrate your thing into the site and what i wanted to show there is that this you know it's very easy to edit that layout and to kind of control things from there so i'm going to bring that page up we'll see it one last time and then we'll talk about some kind of what to learn next stuff so here now i've got pizza list and again we've got you know our i guess we'll add that that's interesting because i'm using there and we'll do uh we'll try and save a dog again to see if no still gonna prevent let's do 10 million dollars and that is unfortunately too much so all our validation is working we go there and then we can go through and delete everything but our new pizza so i hope that you know like it's uh we've covered a lot here but i hope that you kind of run through this uh this tutorial on your own if you didn't get a chance to today and you know take a look at some of that information learn modules you go through you're going to get a trophy when you finish it you're going to it right you're going to have a sense of accomplishment it'll appear in your learn uh credentials as as a lesson as a module that you've completed really easy to go through um we have a couple questions here john that that we can go through real quick if if we're at the end of the unit there we are i think the one last thing that i need to do there is a summary here so this has a link to some additional things um so there we've got a lot of good stuff in the um kind of in the resources link um but then there's also some great stuff for digging deeper this is a kind of scratching the surface but things like tell me more about the tag helpers tell me more about routing etc this is where you go to find that all right let's take some questions all right so we had a question come in from twitch earlier asking about the locale used when you formatted the price it formatted with american dollar sign uh with a decimal between and the two zeros afterwards where it might be different in other locales where's that being configured if we want to change that that is a great question and that is a perfect example of the sorts of things that get configured oops i'm in my wrong there we go that's an example of the sort of thing that's configured in startup so startup is where i can configure and i can go through and i can start doing more like configure my middleware i can configure stuff um for that reading the locale and there's actually a really um let me see that localization it is definitely not a super simple topic it's something where you've got a there's a lot to consider there but there are localization tag helpers there's a whole system for mapping locale that can be come from routes it can come from it can be you know like inferred from the browser et cetera so there's there's a lot of information there as far as that but this is go ahead well it's going to default to my application to my server's locale right so it's going to based on that but i can override that and where i would do that is in the startup i i was going to point out when you go to the the docs microsoft.com website and you navigate around if you look at the url that you're on on the address bar you'll see how the the locale is embedded in there so when john had it up there there was an en us because he's he's reading american english for other folks out there it'll have your locale embedded in there and you can tune uh tune your application to include that feature as well exactly and so this is an example like these sites run on asp.net and that here this is you know like here we saw before like fr dash fr and so you can set this stuff and it'll handle that localization yeah as an example we use localization tag helpers in the.net site the site itself is not totally localized we don't have that those resources but it's globalized so it's ready for localization cool um there's a question here from youtube what freak what what framework do you recommend starting web development with blazer razor pages or mvc i recommend trying razer razor pages and blazer i honestly so my brain thinks i i personally feel like razor pages feels like the simplest and most intuitive but i've talked to other people and i think you might differ with me on this jeff blazer is also pretty intuitive um but so here's how i recommend getting started go through here and you click on you can do any of these but if you click on get started this is going to take you to a quick asp.net thing you can go through this in a matter of a few minutes right so this is a download install create your app um very so it's even more lightweight than what we just covered um so this is in our learning center and then there's also one for blazer so if you go through and i recommend just try both of them and see which one feels kind of feels more intuitive to you so here if i go through this blazer get started and there's advantages to both i feel like the there's some simplicity if you're building applications that are you know talking to a database or doing kind of more backend sort of stuff then razer pages is a little bit of a simpler fit if components and doing kind of front end interactions is what you're going to be building then that front end you know with blazer is a really nice story and we are right at time we have one minute till until we say goodbye to our friends on learn tv but my gosh john there's so much to learn about razer and it really is a great a great base technology to to start your web development experience with net it really is if you're a net developer and you haven't done asp.net dev yet start razor pages and if you're you know new to web development or whatever i think this is a great way where you can within a day you can feel kind of comfortable with building a short you know a simple application absolutely there was a last question hey can you do a blazer session like this we did last month check out the youtube channel for a link uh youtube.com.net and there's information out there all right i think that's a stream i think that's a video here i think that is thanks everyone for showing up and join us next month when we're doing one on iot so internet of things all kinds of devices and kind of fun stuff oh all the blinking lights all right all right well with that i think we can say goodbye alrighty catch you later friends [Music] [Music] [Music] [Music] you

Channel: dotnet

Views: 31,635

Keywords: dotnet, asp.net, razor pages

Id: 5XWgEHcTe4k

Length: 120min 46sec (7246 seconds)

Published: Fri Aug 27 2021