ASP.NET Core Series: MVC and Razor Pages

you don't want to miss this amazing episode where Dan Roth starts from nothing and builds a full application backed by a database with full editing validation and everything using the magical powers of razor pages and asp.net core MVC [Music] [Applause] hello and welcome to another episode of on dotnet we're running a special asp net core series and today i have a very special guest with us his name is dan roth dan welcome hi Thank You Jeremy it's great to be here tell us what you do at Microsoft and then we'll jump into it sure you know I'm a program manager I work on the.net team specifically on the asp.net team and I work on all of our web UI frameworks so MVC razor pages and most recently I've been spending an awful lot of time working on Blaser we will definitely get the Blazer that's an exciting new technology but first we want to talk a little bit about razor and MVC so my understanding is these are some options that you have within asp net core applications but what is really the 30 second elevator pitch if you will if someone says I have no clue what these things are what do you tell them yeah so NBC has been the workhorse of web development on dotnet for a good long while now NBC is actually a just a UI design pattern you know model view controllers what MVC stands for and this is a UI design pattern that's been around since like the 1970s with like small talk but basically the idea is to decouple the concerns from the view that the part that the user sees from the rest of the app it's it's pop logic and its data and from how user input gets gets handled so the controller handles the user input the controller then uses that to manipulate the model you know the actual data and logic that makes up the app which is then used to update the view which is what gets shown to the user and these three parts should remain reasonably independent so they can be updated independently so MVC is a framework a speedo net MVC is a web UI framework that has existed for a long time on the dotnet framework for for building applications that follow this design pattern and then more recently we have asp.net core MVC which our high-performance cross-platform implementation of NBC that you can use to build your web applications it looks very much like the earlier version of NBC asp.net MVC but re plotted on top of asp.net core and also dotnet core so if I'm doing file new for a web project today that's the latest flavor that I want to go with is the asp net core MVC that's right if you if you want to follow the model-view-controller paradigm a snack or MVC is is what you're gonna want to use its really great for productivity it's great for keeping things decoupled so you can do things like testing you want to unit test your your controllers and the MVC pattern and the MVC implementation makes that really easy to do and then we talked about Razer where does Razer fit into this whole picture so Razer is used for the V part the the view part of your of your application Razer is a language for creating dynamic UI generating dynamic UI the language is a mixture of HTML and C sharp so you author the the logic that you want to use for rendering that that particular view using c-sharp intermix with the actual HTML markup that you that you want to render it's very much like existing like templating engines but it's quite a bit more powerful because you have the full flexibility of c-sharp at your fingertips while you're trying to define your your razor logic razor as the language typically is used in a dot CSS HTML file if you're doing MVC or razor pages based applications or if you want to build UI components that get used on the client they can also be used in a dot razor file well if you happen to be developing with laser okay and then I I just have to ask this because I know developers are inundated with web frameworks and someone's bound to say well maybe I'm interested in angular or view or react or one of these spa framework how would that relate to SP net core MVC and razor yeah so if you're talking about a framework like angular or react those are frameworks that run client-side on the user's machine in the browser using the JavaScript runtime that comes with the browser so that's a client-side model for dealing with UI know not that dissimilar from like a desktop app like the the process that's actually manipulating the pixels on the screen lives on the user's machine those applications angular reactor are being also written in JavaScript with framework like asp.net core and NBC and razor pages these are server rendered UI applications so what I mean by that is the browser instead of doing all the UI manipulation locally it's sending requests to the server where your dotnet code then runs it then executes like a controller and updates the model and then uses some razor to generate a view which at the end of the day is going to dynamically produce like a bunch of HTML which gets sent down in the response back to the browser so that it can be rendered to the to the screen so it's a much thinner model for in terms of the what you're requiring the users device to be able to handle because you're doing most of the hard work for generating the UI manipulating the UI on the server and you get all the flexibility of having your being able to use dotnet and being able to leverage the the power and the environment of the of the server ok that's great so I was gonna ask you sort of what decisions would drive a developer to decide to go with a client-side framework versus asp net core in VC but it sounds like you've addressed that now it also sounds to me like you know in your description of Razer pages it's something that's probably easier shown than said maybe do you have anything you can show us so we can see what this feels like as a developer yeah I mean before we show Razer pages like there's actually and this can be a little confusing I know this there's there's Razer the language but then there's also Razer pages which is another pattern that we support and asp.net core so it's probably worth talking a little bit about like well what is what does razor pages then once you know a razor is razor pages is a page based UI model for building web UI that's it's again server rendered you're gonna render the HTML from from the server and in response to requests but instead of setting up a full controller and the you know model and a view you just create pages in the application for handling those those requests if you are familiar with older net web frameworks like asp.net web pages or even to some extent asp.net webforms this may sound a little familiar to you and those frameworks you're typically very page centric in terms of how you build out the UI so rages razor pages gives you that page centric pattern but it's actually built on all the same infrastructure as the MVC support in asp.net core it's actually not a separate framework it's it's built on the entirely the the same pipeline so when a request comes in all the same MVC infrastructure is actually being used to eventually dispatch or route that request to a page which then renders that page is written in Razer just like an MVC view would be written in Razer and that returns the the response we get asked because we have these two different patterns an MVC pattern and a razor pages patter and a lot of times we get asked well when should i when should I use which one and and and when if you are familiar with the MVC pattern and you like it and you're used to it then you should keep using it I mean the MVC pattern is great it's very flexible razor pages we think is a little bit more approachable for a new dev like if you've never done a speed on that or asp.net core before and you're trying to build your first web app razor pages has a few less moving parts so it can be a little bit simpler just to get started with but both are built on top of the same technology so they're pretty much equally flexible there's no like technical limitations of one versus the other it really just becomes the preference a personal preference at that point nice so would I be correct in assuming if I'm used to a desktop-based model like working with say WinForms or WPF is there one type of design approach and in the web that's going to be easier for me to transition to or not you know that's a great question though the web is a bit of a different beast particularly we write about server rendered stacks some of the client UI patterns like when you when we start talking about something like blazer and which has a component model and a component based mode of composition there are thing more things there that then start to feel familiar if you're coming from a desktop background because the desktop developers really in the mindset that they're you know my process is right here right everything I need to do on this machine and I can maintain state right here in the user's process that's that's super easy because they got memory I can use that whereas when you're thinking about a web app that that server render do you have to think about well often that that apps gonna be stateless you're gonna make a request it's going to generate the response and then any state you were dealing with either got persistent to a database or it's completely gone away those types of differences will exist whether you're picking MVC or or razor pages because they're both fundamentally running on the server but when you start talking about something like blazer though I think you you find things start to feel a bit more familiar because stages is it's just more of a stateful programming model you're dealing with components just like you would deal with controls that type of thing that's good and we'll be doing an episode on blazer so we'll get more into the details then let me show you a little razor pages let's take a look all right let's go ahead and get started with razor pages so I've just browsed here to the dotnet website if you don't know how to get to this website you can just go to dotnet and that will bring you right here there's the get started link for you know if you want to build your first console lab if you if you've never done you know it's Donette or c-sharp development before if you just scroll down a little bit and get started with the web that will bring you to the asp.net page and now click get started and that will bring you to a nice tutorial that walks you through how to build your first razor pages based application I'm gonna go ahead and do that so I've got Visual Studio installed on my machine let's create a new project and I'm gonna create an asp.net core web application using c-sharp click Next and let's call this razor pages movies click create we'll create a little app lets us maintain a like a catalog of movies okay and then in the ACE the create a new asp.net core web application dialog there's all sorts of options here you can create a very simple empty app an API we're just gonna create a web app web app is going to be razor pages based if you prefer the NBC model like with controllers and views then you want to select the model-view-controller template but I'm gonna do razor pages and we'll go ahead and create that and what Visual Studio is going to do is set me up with a basic asp.net core project that's based on razor pages it will wire up some some niceties like bootstrap for handling styles and a couple of basic pages just so that it's easy to get started with now you remember I said razor pages is a page based model so you can see here in this there's this pages folder that has a bunch of CS HTML files those are all razor pages like here's the the home page for my app and you can see it's got normal HTML in it but we have the ability to stick c-sharp code blocks into the razor for dynamically generating some some HTML all right I'm gonna go ahead and just run this so we can see what this app does I'll let it build and start the server so that we can host the application and there we go okay so not you know pretty Spartan app not not not too complicated we have a home page there's a little privacy page if you want to stick your your apps privacy policy there some nice styling all based off of bootstrap and these are all pages so if we go back to the application you know there's the privacy page HTML file we can add a little bit of code now to this app let's um which we do here so let's add another P tag inside of our little div here and let's say the current time is and then I'm going to switch to c-sharp here and the way you switch to c-sharp and in Razer is using the act sign so now that I've typed the @ sign the tooling and the compiler now knows that this part is supposed to be EC sharp so let's say I want to put the the current time here so date time you notice I'm getting nice and tell a sense they timed that now and save that and let's go back to the application and we should just be able to refresh Visual Studio should detect that change and rebuild the app chart down and start it up again and you can see that now we have the current time is and the string form of that date time now so we're we're mixing c-sharp logic with with HTML nor to dynamically generate some some UI so that's your like your most basic getting started experience if you want to try that that's what this little tutorial will walk you through creating your first up and getting it running and then editing some code so you can display the current time once you've done those basics you can probably then jump to a more involved tutorial this is the Razr pages getting started tutorial and what we're gonna do is well creating a bunch of pages by hand that's cool you know it's it's fairly lightweight model fairly easy thing to do but what if we want to connect those pages now to some data like I want to read some data out of a database and be able to edit things with forms and save stuff back to the database how do we do all that well we could hand code it all but fortunately you don't have to hand code everything because razor pages just like MVC supports scaffolding based off of a data model so if we want to generate some of our UI based off of a data model we can pretty easily do that so what I'm gonna do is let's just add a simple data type to our our project I'm gonna create this little movie type that you can get out of the docs I'm just going to copy that let's go back to our app and I'm a models folder that's got missing models and let's add a class to this models folder and I guess we'll call it movie since this is going to be a movie set in there okay and we'll take a quick look at this model notice that so this is a class just a normal C sharp class it has an ID so it can be uniquely identified in the database it's got a tire it's got a release date the genre of the movie and a price there's this interesting data type attribute that's on the release date what is that all about well this is a data annotation which is just an attribute based programming model for decorating your your your data models with additional information that can be used for validation or for UI rendering and here we're saying that even though this release date is a full-day time you actually only really care about the date please you know don't don't provide a UI for this thing that lets the user specify the time there's no point the only thing we care about really is the the date okay so now we just have a class we'll just save that and now we want to scaffold some pages based off of this class so I'm gonna go into my pages folder that's where all my razor pages live and I'm gonna add a new folder let's call it movies or eight that's add now a razor page so clicking this will then bring up the scaffolding UI and Visual Studio there's also a command line version of this if you want to run scaffolding from the from the command line I'm gonna select razor pages using EF and we'll select add okay and then we can just pick our model type that we created previously there's the movie type and then we need to select a data context class this is the the type that's gonna represent the connection to the database this is all handled through any framework or which Jeremy you know plenty about this and so that's the technology that you work on we don't currently have a DB context in our application so we're just going to click the plus to create one and that looks like a lovely name for a dbcontext and everything else we can just leave as the default this the generated pages are gonna pick up the apps layout and they're gonna include some helper script libraries so we get things like validation so all those goodies will just leave select its go ahead and click Add and then Visual Studio is gonna write a whole bunch of code for us so that we don't have to that's the beauty of scaffolding is you can quickly create a whole bunch of UI that's very functional without having to do a whole lot of work so Visual Studio is installing the appropriate generators for this project so that it can create razor pages or likewise you can do the same thing with MVC views and controllers and then set up the project with all the pieces that it needs to use those new pages should just take just a second and by using entity framework when you are dealing with the database you're not gonna have to deal with sequel script and and all of that DBA activity shutter doesn't it yes okay so in our movies folder now we have a whole bunch of razor pages that just got created for us we've got this index page this means that when we browse to slash movies the path to these razor pages that's what's going to determine the route for these pages and index is kind of like the page that gets rendered at the root of this of this particular path you can we can see there's like a whole bunch of HTML markup in here as well as some c-sharp code like these at HTML display name for this is basically taking our model and getting information out of it to display the data from our from our from our database so we're getting the title the movies release dates displaying all those headers and then displaying the this is actually displaying the header names and then displaying the actual data values dumped below no to get the staff to run we actually have to do one more thing if I just ran this it would the server would would have an error and say like wait there's no database like how am I supposed to get all these movies and there's no database so we need to create a database and the way we can do that is by using migrations so I'm gonna just pop up a the moral equivalent of a console I'm gonna go into the new manager console right here be nice if we just had a more first-class citizen for this but this is this is what we get in Visual Studio and we're gonna say and migration and you do get completion so you can just hit tab and we'll say initial create this is just giving the migration a name now what is this doing this is gonna look at the DB context in our in our project and we'll set up some code that can initialize the database based off of the the structure of that dbcontext so we'll go ahead and add that migration code and then when we run update database after this succeeds there goes update database that will now run that migration create the database for us so it's all ready to receive our our movies date hustle update database and it's the project for us and that looks like that's going to succeed go in there perfect okay so that should now be be ready let's go and rerun the application all right so we still have our basic homepage but now we should be able to browse to movies and here's our scaffold of UI and we don't have any movies yet cuz we didn't populate the database with any data we just set up its schema but we already have UI for creating new movies let's see what we should do like you know all the best movies were made in the eighties like like this is true IMDB like all the best movies we were done in the eighties so may I think I actually looked this up because this is my favorite movies as a child I was a short circuit I think it's 1986 is when this was made it it's like the robot that gets hit by lightning number five alive number five yes no disassemble there we go and then you can like go click on the details to get like a master details view we can edit it and so forth now one of the nice things about razor pages is it handles you know forms and validation for us like if I want to update this and say no actually short circuit was a horror movie this was a terrible you know we can save that and what is what's what's gonna happen there well that works you can see now it's a horror movie how was that all handled if we go look at the Edit Page which is what we just had that form on it this is all the UI logic for that that form so it's just a normal HTML form and we have divs and inputs and stuff for actually editing the the movie but we all got all this other cool stuff in this dark purple these these are called tag helpers these are little decorators on the HTML that allow some dotnet code to run and modify those HTML tags they can even be you know custom tags if you want there these are tags that run on the server not custom tags that run on the client but it's a way to author your HTML in a very natural way so you'll notice that we have a div here at the top with like a validation summary tag helper that's saying you know if there's any problems with the the form that you're about to submit display the validation errors here and then we have each of the different fields that we're sending like the the movie title we've got the label the name of the label is gonna be generated for us based off of our model the input text typing and UI will be generated based off of our model and then we have a you know a validation span for each of the fields so if we go back let's let's edit this again let's say I do something inappropriate like you know type 'abc for the price like that's not a real price and I tab off of that you can see I'm getting validation errors right here even client-side in the browser everything's been wired up so that a little bit of JavaScript can run and check that you know that's not a valid value for a price you can't do that so we change it back to $29.99 and we're back to being kites and that that will be valid and the validation will kick in not just on the client but also server-side Wicklund me when the form is actually submitted that will then go to the page model for this page which we should have a on post page handler down here that this is the code that will actually run when that form is submitted to the server and you can see that the model state will be checked to see if it's valid and if it's not valid we just rerender the page with all the validation errors this is one of the nice features of both MVC and razor pages which is the ability to bind data from the form in this case all the data is being bound to this property this movie property if there's any problems with it the system can validate that that bound data that model bound data and provide nice error messages back to the to the user so that is a little bit of razor pages and you can see we got an app up and running or superfast able to connect to a database Wilson data out has some UI that does model binding and validation really really simply so that was a great demo not only were you able to very quickly stand up a full website and thank goodness for things like bootstrap so people like me who have no design sense whatsoever can can look it out of the gate but all of that code is generated in a logical way so that if I need to tweak it or customize it I can easily go back in and make all the changes I need to know the mysteries of CSS like if only we if only so must knew how that works good yeah yeah bootstraps great and the code once it scaffold it like it's yours like you can tweak and modify that code tear to your heart's content it's now part of the project well I feel like if I was asked by my boss to write a quick admin page over some some tables or even spin something up knew that this is one way I could get it done quickly and be a hero so I'm pretty excited about the prospects thank you so much for coming and sharing Razer pages and MVC with us and as you mentioned dot dot net right dot net is the place to landok and then click there on the web get started and you're good to go [Music] [Applause] hi I'm Jeremy lick nice you've watched another episode of on dotnet thank you for joining us be sure to LIKE and subscribe so that you don't miss a show and if you're interested in more shows check out the link right here thanks

Channel: dotNET

Views: 16,546

Rating: 4.9475408 out of 5

Keywords: .NET, .NET COre, dotnet, dotnet core, ASP.NET, ASP.NET Core, Web, Web Development, Web Dev, Razor, Razor Pages, MVC, ASP.NET MVC, ASP.NET Core MVC, Azure, Microsoft, Visual Studio, Programming, Web Apps, Software Development, Developers, C#, Csharp

Id: 6GRFDkeCv3k

Length: 27min 36sec (1656 seconds)

Published: Tue May 26 2020