Intro to ASP.NET Core Razor Pages - From Start to Published

asp.net core is the website of dotnet cord development under this umbrella are four major components razor pages blazer MVC and API all these project types can coexist in the same website without an issue and yet they all fill a different role in this video we're gonna look at razor pages the quickest and easiest way to create powerful server-side web applications in c-sharp we'll look at how to set a project up how to capture and display data and how to deploy it now before you proceed I do want to point out that in the description there are links to get the source code for this video a link to sci-fi mailing list and a link to sign up for my patreon page you'll also find links to courses there with more information on the topics we cover today in case you wanna go into further depth now if you haven't come across me before my name is Tim quarry and my goal is to make learning c-sharp easier one of the ways I do that is by teaching context there are live tutorials out there they'll teach you what to do I go a few steps beyond that to show you when to do it why you should or should not do it what pitfalls to avoid and what the best practices are basically I get you rave the real world if that's the type of training you're interested in subscribe to my channel and hit the little bell icon to be notified when I release new videos now let's go to visual studio and where I create a new project and will create an asp.net core web application and this is the umbrella project that then expands out to be multiple different types so let's hit next and we're gonna say this is a razor pages UI and the razor pages demo for the project name and solution name respectively and create but before it actually creates it it's gonna ask you for a few more pieces of data first of all we're going to select dotnet core asp.net core 3.0 so as the video the timely recording of this video this is the latest released framework there is 3.1 which is in preview but I choose 3.0 I'm gonna choose a web application a web application uses razor pages now I did say that these different types can coexist in the same project which means that even though I select an MVC project that can have rays or pages in it and if I choose a web application I can still put MVC in an AP I can have both MVC and razor pages inside of it okay so we're gonna choose web application though which comes out of the box having razor pages setup that's just the easiest for getting started with razor pages now I am not gonna choose authentication for this video just because it adds a layer of complexity that I don't think is necessary for what we're doing I am gonna configure HTTP make sure that box is checked that should always be checked this will allow you to use SSL in development and allow you to enforce SSL in production and that's a really good thing Google actually will downgrade your website anymore if you don't have an SSL version and I believe it SSL version is on by default okay so there's they're starting to crack down that and really push you towards having a secured website even for I would call a standard web application so make sure you have that box checked we're not going to enable docker support we're gonna leave docker support alone and we hit create and it's gonna do is kind of scaffold out for us the basic project which is pretty quick now it is in the background down here that lower left-hand corner is restoring or restore complete and if we do a build here it's actually going to pull down our nougat packages we need so it's actually pulling down NuGet packages and now it's complete so this is our basic template okay read a box clean and fresh this is what we get if we start this we actually have two options is Express and razor pages UI what's the difference well I express means we run our website using what essentially is IAS or Internet information systems or server it's what you would deploy to if you're going to deploy on windows so it's gonna mimic very very closely what you'll get in a real web server environment that's great but there's another even better option and that's the one that goes after the name of our project so razor pages UI is our project name it's also listed here as an option for starting so razor pages UI that means when I use what's called Kestrel and Kestrel is a command-line web server so when we launch this what's gonna happen behind scenes gonna start a console window and it's going to launch our web application from that console window one of the benefits of doing that is we get to see exactly what's going on to and from our web server we see all the traffic what's happening what commands are being rejected what things we missed what errors were throwing all that information goes across that command line now if you choose is Express you don't see that command window but it is in the blue the output window I've got these windows down here computers so many of them but at least the output window will show you those same commands I'm gonna choose Kestrel where I'll launch this just to see what it looks like okay so here is that console application of starting and now we have our website loaded so notice over here it says we've got 200 meaning success unloading the icon and up here we have a two hundred four application JavaScript a two hundred four more JavaScript and for CSS these two hundred messages mean a success message for a call to http okay so we're calling out and trying to get up in this case down here a file up here it's a JavaScript or CSS file we're getting those files and they're successfully coming down if I click privacy notice that we get a couple more messages that come up including three Oh force okay so we're getting messages and seeing what's happening so there's a a browse to slash index well a two hundred message so we see all these different things coming across the wire this can be very very helpful for debugging I just want to point that out right up front now I'm slightly zoomed in here I'm at one twenty five percent but this is the standard look for an out of the box never configured razor pages user interface okay just want to point out what it looks like okay so now we have this let's talk through what are the features well first of all let's look at that page itself so we were loading index which is actually just this because this under shared under layout this is the the actual page okay so under the shared folder underscore layout this is the actual page but then right down here on line 34 it says at render body and what happens is is we inject our razor page into that section that line right there line 34 where it says at render body so we're injecting in the case of the default we're injecting our index page and so it puts this code right here all this code lines one through ten and it puts it in layout right here on line 34 okay which means that if you want to modify the overall page you come to this underscore layout and you make changes like well it's almost 2020 so let's you know changes to say 2020 be ahead of the game and instead of razor pages UI where I say I am Tim Kory something like that okay that's who copyright it alright now that we reflected on that every page because all the pages are going through this standard layout now I'm assuming you've seen some of this before if you've gone through my intro to asp.net MVC which is actually a dotnet framework asp.net MVC you will see pretty much the same stuff as far as the layout page is shared and the app render body and a lot of stuff it's been the same however there's a key difference so I'm gonna point out differences here you know I kind of try and go over everything all over again that video is still very much relevant to today but I do want to point out that dotnet core so asp.net core web applications whether it's razor pages or MVC or blazer they use bootstrap for as their framework notice down here we see bootstrap but the version of bootstrap is four so under WW root looks which I'll explain this a minute if you see JavaScript oops Lib bootstrap and then the dist if you look under the JavaScript here look at that bootstrap you'll see the very top it says this was bootstrap version 4.3 points one well in dotnet framework asp net applications it's bootstrap 3 typically 3.7 so what's the difference can we upgrade and the answer is no not really you really want to stay on the major version of bootstrap that you were launched on okay and the reason why is because there's massive breaking changes from bootstrap 3 to bootstrap 4 so that's why Microsoft has stayed with dotnet framework gets bootstrap 3 and new projects in dotnet core get bootstrapped 4 ok so as this is the latest version of dot of bootstrap available and bootstrap allows us to layout our pages in nice clean ways it's a nice framework that allows us to do a number of things if you're not familiar but strap a pulpit browser here gonna get bootstrap dot-com and first of all I want to highly highly commend the team who makes bootstrap this site is amazing this is that's the gold standard for documentation you want to follow this if you create your own application ok so first of all notice the upper right hand corner says 4.3 well if you're on a dotnet framework project and you're using three point I'm sorry three point three point seven think it was but you dial in the version you want and that's the documentation for that version okay so Lance is four point three point X which I believe ours is four point three point one so with that now we can go to the documentation notice I'm here click the documentation and now in here you can find documentation for practically anything you want do with bootstrap so for example layout how do we do layout well there's containers and here's how it looks and then there's a fluid container here's how that works and there's responsive breakpoints and here are the sizes okay and then you keep coming down here and it will talk about z-index and then go to grid well how's it grade work well there is how the grade would be laid out and there's an example in code and there is the example in HTML okay so here's the options and here's the layouts and here's how you do it okay then you go to content and it talks about typography so what the different size is it is for your age tags which you can modify but here's a standards alright code how you do inline code sections how you do block code sections like this how you do variables user input images here's how you do images I might have look at the whole thing and show you everything but and just so so very happy with this documentation I often find myself just go and get bootstrap calm go at documentation and then look for what I need components usually where I end up because I'm usually looking for something specific but you know forms there you go there's all your different examples with how you do a form in different sizing and stuff like that progress bars boom there you go okay so enough about bootstrap but especially if you're newer to HTML CSS and JavaScript and you're not quite sure what you're doing that get bootstrap comm site will really help you if you don't know you're doing it all just visually scroll through a list see what see what it has and then you'll see options here renders and if maybe you want this you just take their code and put in your place okay so this is all bootstrap style HTML and bootstrap is just a framework on top of HTML and CSS and JavaScript you don't have to use it but it makes layouts and uniformity always kind of things very very easy so it's a pretty common one to use okay so that's bootstrapped that's what we have in razor pages is bootstrap for so just note that that's the version to use okay now I pointed out Bree flea that this WW root folder right here okay this is new to dotnet core projects in dotnet framework projects we kind of didn't have a great story for static resources but yet the web has a lot of static resources we have CSS files and JavaScript files and maybe image files and always other things that we kind of put into the standard Visual Studio project structure and just didn't work that well it worked but not ideally and so a team when they were rethinking how dotnet core was going to work and they're looking at asp.net in particular they said let's create a place for static resources so this folder called WW root every project and in here the root of this folder is what will be on the root of your project so notice the the favicon is just right underneath ww root well if you go out and we look in here it's somewhere in here I thought oh you know what you don't have to specify it it just pulls it sorry so it is pulls it it finds the favicon in the root of your web directory well it's gonna pull that icon because of the fact that it's in the root of WW root okay so it's gonna happen with our razor pages content is this actually gonna inject it into this WW root structure okay so anything you put here will get brought over into the site starting at the root okay so the root slash CSS slash site CSS well we have the root which is that Tildy and then we have slash CSS slash site CSS okay that refers to this file right there okay so that's the basic layout and structure we do have a lib folder and this is where you bring in external resources so bootstrap jQuery jQuery validation and obtrusive jQuery validation you can bring your own in here and drop them in there and that's kind of structure for how you would do that all right now let's talk the bait about the basics of how razor pages works if you notice under pages there is our underscore view imports underscore view start these are pages to help us get started in raiser pages but then we have three pages error index and privacy these three pages are our kind of our intro pages or our template pages to show us what could happen now index is our default page this is the page that will be loaded if you don't give any URL like if you just have a main URL but know like slash this or that then this index page is what Lowe's now if you're loading a regular web server somewhere else with just HTML no dotnet or anything typically your starting page will be called index index dot HTM or index HTML that's a typical starting page in PHP would be index dot PHP typically so for dotnet core it's gonna be index dot CSS HTML all right that's just their version of the the starting point so it's kind of industry standard to call it index now from there we also have privacy we have error okay now let's look at the index page the index page has a few things on it we need to see first of all it has at page at the very top line one this indicates there's a razor page now the @ symbol whenever you see the @ symbol in a razor page or M see they indicates the razor syntax which is a little confusing because the fact that the razor syntax works in MVC not just in razor okay so there's a couple different things called razor one is a syntax one as the page okay so this is a razor page that's using the razor syntax so the at indicates the razor syntax what that indicates is that this is c-sharp code they were running on our web page the nice thing is it also demonstrates for us exactly how to use the razor syntax so you can either do it in line so the app page and app model like so or you can have multi line with these curly braces so a curly brace and closed curly brace and then inside you have C sharp code all right so either way works it depends on your circumstances what you need so we have the app page saying this is a razor page app model this says index model what what is that index model this is the the data that's associated with this page you'll only ever typically have one model and that's actually the what we'd call the code behind if you're thinking about WinForms or web forms okay that's what it looks like it's actually the page model that's what's called page model and it's the this right here okay and we're looking at some just a minute but that's that model is now if you're familiar with web forms which is from asp.net and these this is going way back in asp.net webforms came out I believe it was c-sharp - okay so way way back I don't think it was out for one but I'm not positive but it's very very early on in the see sharp lifecycle that that webforms came out and this was this model where you had web code on the front end and then right behind the code you had c-sharp code that would run the background and do c-sharp work it was kind of the the goal was to have something very very similar to WinForms with that easy drag-and-drop and a code behind model but for the web that's something that has it is dying that's going away so a lot of people still love web forms it's it's a technology you need to move away from but it's one that people still have an investment in web forms is not cleaning moved forward in a dotnet core it's done as of dotnet framework four point eight that's the last major change or even minor change to web forms the only thing gets from now on is security fixes okay that's it so move off of web forms that's we gotta do okay but they had a similar model to this however this page well it looks very very similar is under the covers radically different because it's actually an mvvm framework style so we have our view which is this index page and we have our view model which is called our page model okay and that's that's this page right here the cool thing is this is just a class which means that we can actually do unit testing on this code behind what I call it code behind there really is the view model for our view okay so that's a really big benefit because we can have better code coverage all whip through our user interface okay so we'll look at what this model does in just a minute but that's this model is associated with this line number two here model index model lines three through five is associate the the text home page with the title property of the view data which view data is a it's a dictionary it's basically this dumping ground where you put key value pairs okay so in this case we can put title and we can say home page which if you go back to the shared layout you'll see up here title we're pulling from that view data the title and putting that value here so every page you go to it will change that version of the title so changes the layout page even though we're on the page that's just getting injected right down here okay so that's what's happening here and then we have just a little bit of HTML and CSS right just enough for the the the welcome message okay so that's what a page is in the friend that's the view set let's look at the view model side of it the page model on a page model is just a class so public class indexed model it inherits from page model and we have a constructor here that's asking for an ilogger so if you've watched my video on logging and dotnet core this is a logger you can look up but whatever logger you want like if you want Sarah log cool go ahead and do that if you want n log hook that up whatever you want to do that'll be injected right here we can use that to for example log whenever we have a get request to this page now raise your pages are typically pretty simple that's their goal is e very very simple so unlike MVC which has a wide range of verbs and you can have multiple verbs and mult like for example multiple different posts on the same controller and you can have multiple different views in the same controller this page model is just for this page and typically you have one or two get and post that's typically all you do get the on get right here what this does is it's what renders this page so this is the c-sharp code that gets run when you ask for an index page the post which we don't have yet I'll put in just temporarily public I'm gonna say void for now but on post like so that would be run whenever you post data to this page so those are the two verbs we normally have on a page if are a missing one will be missing the post will just have the on yet because you may want to show a page but not actually capture information off of it for example the index page not really reason to capture information off it is just showing us the the index page just showing us hey here's some a welcome message that's about it however if we were say let's say a signup page or a page that capture information about my my address okay that page would have an on post as well so to have it on get that displays the form and then on post the captures are data from the form we'll see that in just a minute now we typically in fact we don't pass data across the get or the post methods not directly instead we use properties so if I had this property let's call us ID this property can be read by the index page so if iris a at model dot ID that's gonna pull the ID notice it's an int it's gonna pull the ID from this property right here so whatever properties you have in your index model you can display on this page if you want to write to them then you have to mark them as writable and I do that you say in square brackets bind property okay let's just say this is a bind property and if I leave it just like this the only way I can write to this ID value is if I post that data so I can't put it in the URL that be a git so I can't say given the index page question mark ID equals four that wouldn't work because this is post only I had to a form that I hit submit on that post the data however if I wanted to put the ID in the URL that gives put in parentheses and say support supports get equals true now I can either post to this data via form or I can put it in the URL I can say question mark ID equals four and now when you call the on get method the ID value leave for let's try us real quick so I have changed this property let's do first name okay and you know what let's change nowhere I'll leave it right here so we have first name and we'll leave it supporting it and that's all we'll do we're gonna change notice now I have a red squiggly saying ID does not exist but up here it says welcome we're gonna say welcome adds model dot first name and so say welcome and my name hopefully let's run this and see what we get see if it actually works okay so it's launching kestrel Castrol starting up now our page starts up and that says it's welcome why is it say just welcome well I never passed a value across so if I say question mark first name equals Tim hit enter welcome to him it captured that value off of the URL and said oh that's a parameter and its first name property and if we go to first name we'll see that yes that supports get as we have put the value into that property now on the page we can read that property and display a value okay we could get even a little more clever and say on the on get if let's just say string dot is null or white space for first name so if it's null or empty on first name whereas a first name equals user so hello user or hello Tim let's rise again and hopefully now it says welcome user I know well actually it's first-name equals Tim hello Tim okay so we can start with a default value and we can change it if the user overrides it with a parameter in the URL that's how you do a get bind property now we're gonna do a post in just a minute but I want to show you just a little bit of how those properties work now for Security's sake you do not know I emphasize this very very clearly you do not want to post or I'm sorry send data across that URL that's in any way sensitive absolutely no passwords no credit card information no social security number really probably not even their name typically we just do IDs just to say okay give me this specific record and that's it do not put information on the URL that's in any way sense and my sensitive I mean personally identifiable information okay I was way very very clear on that typically this is just an ID but I use this as a demo because it's very clear and easy to see okay now I want to show you how razor pages layouts work meaning how does it work to know where to get a page or how a page URL layout is well right now we have everything on underneath pages so error index and privacy if we launch this site and look at the privacy link it says slash privacy okay it's right out the root so this is the root of the URL this this part right here where it says HTTPS knows we're testing in SSL mode HTTPS localhost colon five thousand one that's the root URL but then here I have slash privacy and what this does is it says this is the path to that specific page notice not private these dot CSS HTML it's just slash privacy this is how razor pages routing works it works based upon the path from pages in relation to pages which means that if I add a folder here and I say this is going to be forms and then inside here I'm going to create a razor page it's ready to pay me empty I'll add and the page name is going to be let's call it add add address okay we'll use the generate a page model class checkbox make sure that's checked that's going to generate this code behind file that's the view model we're not going to use a partial view or not create a partial view we're a full view between a full page essentially not a part of a page now I use this layout page or leaving this blank which uses the view start file which is down here which that points to our underscore layout CSS HTML page so we hit add here it's going to create a page called add address alright we're going to use this as our sample for how to post data it takes a bit to restore the package as necessary to scaffold out our first form okay that's why it's taking a little bit just it actually download some new get packages but inner add address there's not much here and we can put a space here and it says add address that's it you can put a space there as well so let's start our web page backup or application we're going to browse to this add address page well if we just said slash add address we get a page cannot be found that's because it's in the forms folder and everything is relative to the pages folder so pages is the route so I say that's forms slash add address and there's my add address page because it's relative to the root of pages so it's inside of forms folder and then there's add address if I wanted to change where that page was located I could just move it to a different folder and I've changed the URL for it obviously that's not something you want to do very often because it break a whole bunch of links so let's let's figure out how to create a form here that will take in a user's address street address city state zip code just those those values normally we would start with just create a form here but we're gonna wire this up to our model which we don't have yet so we could put in the code-behind let's close all of this we could put in the page model the all the properties we need so street address city state zip but that's not really how c-sharp works normally instead we normally have a c-sharp model then mvvm we have model view and view model this is the view model the form or the view is this form page and then our model itself is going to a separate C sharp object so that's in the root of razor pages UI I create a new folder I'll call this models inside of here I'll create a class and I called this my address model it's already public so I create a few values here string street address prop tab tab string city prop tab twice state and prop string zip code if you're not familiar with the u.s. zip codes they are strings even though there's only numbers in them so the United States we do not have letters in our zip codes or our postal codes they're just numbers however there are some zip codes that start with 0 you cannot have a number that starts with 0 it's being stored without that leading 0 because that's not valid for a number it's not a reason to have a leading 0 so therefore a zip code is not a number it's a string that's one of the many reasons why the string there's other reasons as well for example you don't add and subtract zip codes so that's the address model now we're gonna do is in our what I call our code behind our page model where I create property so prop it's being of type address model control dot to add our using statement for that location and I will call this address I'm going to make this a bind property I am NOT going to make it a bind property that supports get just a buying property I'm get I won't do anything on post I'll capture these values but let's go back to our view and let's create a form now I'm not gonna make this all pretty I often debate this but the reality is this is talking about razor pages to make this pretty is more a conversation about bootstrap so I try and not do too much extra stuff beyond razor pages so we're just gonna make a basic form so form method is post this is important because this tells the form tag here's how you submit this so when you hit the submit button which is a key button then it's going to send this as a post which we have on get typically and on post if we have data well that's how we're going to capture is the on post so make sure that is sending via post okay I have a few inputs input and this is gonna be type equals text and next this is a really nice feature AS ASP - whenever you're in an element in HTML pretty much any element it probably has something that is a helper from asp net so what you do is you type asp - and if you notice in the intellisense what's going on now ASP notice it says dot dot dot after the dash that's because it's in relation to this element so it's gonna load that list once you hit - you get - now these are the things you can do with an input item these are all helpers I want the asp - for what this is going to do is allow me to point to a specific property in my address model and say that's what this relates to us what this links to so if you have data in this property display it in the form if you put information in the form and post it that's where it goes in this in this property so in this case I'm gonna say address notice I don't need the app model first so address dot street address okay so I've linked this not just to a property but to a property inside of a property so I have the address property but inside a street at or an address model there's street address property so that's what I've linked to here now I'm gonna say placeholder and I'll say street address and I will close out my input let's do this for more top or three more times and we'll have city state and zip code don't forget our our placeholders like so so now I have a form that has four inputs for a street address city state and zip code we have a button now the type equals submit that's that special type that's going to say when you click this send all this data back to the page model to our kind of code behind and it's going to do that via post so now back over here we need to capture this information so let's have a public eye action result this is the typical output from a post because we do some type of action when you submit a form whether is go a different page go to a different site or even refresh this page and clear out the form whatever it is we have some type of action we do on post and that is a keyword so razor pages looks at this and says okay I am going to see and on and then the action the verb so get this is a get call so on and then post this is the post method now it's Jung Lee right now because I I have no return value so let's create a return value let's do a little bit of model validation so if model state is valid is false so if there's something wrong with our values that came in maybe you didn't fill out a field that you was required then we're on a return page otherwise return and for right now we're going to redirect to page and let's redirect to the index page okay so dot slash index okay and that's well do will redirect to that page like so let's put a breakpoint right here now our model state is going to be valid no matter what because there is no validation on it right now we can change that omit but for right now we're going to leave us alone and say yep we want to add an address using the slash form slash add address page I don't want to type that every time so let's go back my shared page go layout and up here you see this navbar where we have two navigation links the really cool thing is they've already done the work of demonstrating how these work just copy a li section which stands for list item in HTML and paste it now just follow the instructions essentially where it says index or a change that to forms slash add address and where it says home where sa add address now we have a link directly to our form click the Run button to run this let's make sure you did put that breakpoint we did now we have kestrels starting up and we have our page we have this add address there's our address form really not pretty but it works street address city state and zip code let's put something in so one two three oh Ave in Scranton PA and one eight I've something like that okay that's close enough so there's an address may hit submit I just hit the is valid and it says the locals say that the is valid is true but let's expand this out a bit and look that's the address this is the the value the property right here one two three Oak Ave Scranton PA one eight five five one there's our address in our model I didn't have to pass anything in to this on post I have to put any values in here have a model and have JSON posed to it nope none of that stuff that's all handled by the compiler that figures out how to link those things up using this bind property also note we're using that bind property without the get which means it can only post to it but we did just update it okay so that's that's working and now if we were to hit continue that page is saying oh oh I can't find index okay so we have a bad URL there I think it actually might be just dot let's try again and find out now I can submit this form without any values in it because I didn't require it so income here hit submit and nope alright one more shot before I actually Google it just slash this one let's see if you don't use it okay I typically don't redirect to the index page so if you don't use it for a minute then you forget how to do it yep I'm googling this alright it was simple slash index not dot slash index I think that may have changed over time I believe it used to be dot but add address submit that goes back to the beginning but what if we wanted to make a change to our our page here in Satan's instead of saying welcome user we're gonna say welcome to Scranton based upon the user's city where they lived well we could do that let's go over to the index page and go to the page model and here we're going to change this to be city now if the city is null then we're going to do is let's say we'll say the web so say welcome to the web if they don't have an address so here instead of first name it's going to be city and where I say welcome to so welcome to Scranton welcome to Philadelphia welcome to the web if you don't have anything let's try this well launch this up casserole is starting and now the web page is started it says welcome to the web and an address I'm just gonna put a city in just Cranston hit submit welcome to the web nothing's changed so far well I suppose we didn't actually pass a values back how do we do that well we can come over to our add address we have is redirect a page we do a ctrl shift space here we notice we have the third of eight overloads and one of them is object route values so we can add a route value so I'd say new empty object or a new anonymous object let's say City equals address dot city so it's an anonymous object that we're creating now it's gonna gray us out because this address dot city this city property can be the name it's assumed to be the name of the property in the anonymous object I'd make that explicit here and said oh it's City but if I did not include this then what it would do is it create a new property in the anonymous object called City and put this value into it let's try it again let's run this it's starting up Kestrel this is welcome to the web I'm gonna say Scranton and I'll hit submit welcome to Scranton notice up in the URL let's do one on that it says question mark city equals Scranton so as its posting of or it's of putting the value on this page using a get which means you have to have that marked as allowing a get command to display this on the page however by doing that we can now customize this index page based upon the address you add it now one of the questions I always get asked is okay Tim now you've done this how do you do data access with raiser pages and then the next question will be okay now you show me how to do data access with raiser pages how do you do the MVC how about API how about blazer and the answer for all of those is the same because I want to emphasize this very very clearly your data access should not depend on which user interface you use your data access to be exactly the same regardless of which user interface you want to use I just did a foundation c-sharp module whole course on data access and for most of it I used console applications to show us how to work with a specific data access type because it wasn't actually the user interface that mattered all that mattered was the the class library code I wrote to talk to the database because then the console could call it or a razor pages application could call it and in fact I showed that at one point where I create a razor pages application and called a very very similar class library that was called by a console application I called it was razor pages same did access did not matter so here we're talking about the ad address and we're saying okay we've got this this model I'm not doing it in this model yet save model to database okay that's we'll go that's where the code goes right there but I have this address model do you know what I would do with that I would give this to a class library and say hey you save this to sequel where a MongoDB or cosmos or an API it doesn't matter you save it and then I don't care what happens I've given you a model you take the data from there and save it that's what happened on the other side let's say the index page where we have this on git maybe I want data from a database maybe I want to pull this city based upon who's logged in well I wouldn't actually talk to the database directly I would say okay data access layer which is in a class library you give me a the user city and I wouldn't have to worry in this application about where it's getting it from in the class library it would worry about okay I need to get that from sequel and so call sync will do the calls and return a model that's all in return so if the user interface it does not matter which data access you use and for the data access it doesn't matter which user interface you use that's how a disconnected architecture works you really really really really really do not want to tie your database directly to your user interface that means you have to replace your entire application when you change one of them that's not a good thing because user interfaces change a lot so do databases you don't want to just swap out your entire application for a new one every time you want make a change with one of them that's how you get stuck with the same user interface 20 years after it's out of date with a same database structure or database system 20 years after it's no longer supported because you tied everything together don't do that okay I did say we're gonna publish this so let's do that now I do have a course on the application life cycle design which is where we take a web application with two different database types one is entity framework and one is a Strahler sequel server and we deploy all three of those to three different environments development staging and production I have a course that builds out a complete architecture for that in Azure DevOps and shows the CI CD process that continuous integration and continuous deployment that's out of scope of this video this video is about just RAZR page applications so I'm not gonna go that far instead we're going to right click on razor pages UI and click publish and here we have a number of options we can publish as an app service to Windows to Linux as a virtual machine or we can even publish to IAS or a folder a folder will give the published files that you can then copy to an is installation or something else we're gonna publish to an app service in Azure now I could select an existing or you can create a new one what I'm gonna do instead I'm gonna take you to the portal this is the azure portal now a sure is not entirely free and that's something I try really hard to avoid showing you things where I say ok here's a really cool thing you can do but you have to pay for it ok I really try hard to avoid that which is also why I don't use plugins that are paid in my visuals to your environment I try to avoid that so you don't feel like you're less than if you can't afford something that's also why it provides so much free content on YouTube because not everyone can afford my courses I understand that you don't have to you can take the free courses and put together your own education these I'll provide you a ton of great resources but Asher does provide you with a lot of free stuff I believe when you sign up there's about $200 they give you in free credit then there'll be some services that are free for a full year after that there's I think 20 or 25 services now that will be free for life one of those services is a app service ok app service is typically a website alright so we're going to create one of these now the free version is the very very base tier and I will show you what that is you're not gonna be running your business off of this but I clicked create a resource web app now just when you can't run business off it doesn't mean it's not great for testing this is a perfect place to test so this is a new web app that's gonna ask you a number of things one of which is what is my subscription now just know I believe you have to have a credit card in order to activate the free subscription they will not charge you however you do have to have that card and so it does cause some problems in some countries if that's a problem because of your country you can contact Microsoft sometimes they can work with you and get you set up anyway okay so don't let that stop you ask nicely for help alright so we have as I have a visual studio Enterprise subscription which gives me a hundred and fifty dollars worth of credit every month if you have an MSDN or Enterprise subscription or if you have a few other options from Microsoft then you'll also probably have some free credit just find out so you have to you have to link it to a subscription but then you have a resource group resource groups are names they are not they're not paid they're not they don't cost you anything I encourage you especially when you are doing demos or doing learning create a resource group around what you're learning or your demo group and then at the end you can delete that entire resource group and make sure you don't have anything charging you it's also good to group things in general okay so always Korea resource group if you already have one you can select it from the list but I create a new one here and it's just as easy as giving it a name in this case I'm going to call this my razor pages demo resource group yeah it's a little long but it's descriptive and I always end it in resource groups so I know that that's that resource that thing is it's a resource group now I need to give this web app a name this is unique across all of a sure notice it says dot as your website's dotnet this will be the public URL for it so if I say razor pages I get a green checkmark evidently no one's taken the razor - pages name so I'm gonna leave that if you don't get a red checkmark if you get a let's go test you get a this name is not available okay so you razor somehow I took razor but razor pages is not taken I can claim that now publish you want code or a docker container we're not going to do docker we're doing just code and I want a runtime stack of dotnet core 3.0 the cool thing about dotnet core is even if your stack is not available let's say you chose dotnet core 3.1 which is not available yet on Azure you can publish net core 3.1 with your web application and get to run on Azure but in our case is easy because we have dotnet core 3.0 already supported I'm gonna choose the Windows operating system because that's what I'm publishing from and I'm gonna choose that I want a region of East us because that is that's where I'm at ok that's that's my location is the East Coast therefore this will be closest to me if you have a audience let's say that maybe you're in Germany but your audience is mostly in South America then you would choose a region that's closest to your audience in South America ok that way it's fastest for them alright now down here we have our windows plan I already have a windows plan so I have just one in this region so it's the region it's the operating system type and is the publish type all three of these have to be the same or correct in order to match up your windows plant ok so if I chose docker this list will be empty because I don't have a docker windows system in the east us but since I have one for code in Windows in East or in the US then that shows up I'm gonna say create new this app service plan is going to be called razor app service plan I hit OK now I create a new one it seems like oh cool I'm done stop don't hit next because you are now being charged this amount for a standard s1 sermon let's hit change size here a standard ask one server in my region cost 43.8 e cents US dollar per month now honestly that's no big deal when you're talking about a production website 43 dollars a month is just over a dollar 30 a day and if you're doing testing that's probably also not that big a deal because it's a dollar 30 a day if you have two hundred dollars in credits and you're a test this for two days the rest spend two dollars and sixty cents of your credit that's not a big deal however if you want the free site notice up here it says production we want dev slash test and there is f1 that's orange one that says shared infrastructure one gigabyte up memory sixty minutes per day of compute as free that's what you want now 60 minutes per day of compute does not mean it only runs for 60 minutes a day what it means is that if you you click on the website and it takes a minute do a lot processing that's one minute of compute you do that 60 times and the website stops obviously that's not great for production but it's great for testing because you probably will not use 60 minutes of compute per day and again it's free for life hit apply and now we're on the free f1 plan so make sure you it says free f1 unless you're willing to pay for it we're gonna skip the monitoring that's the monitoring tab tab and the tags tab wrote right to create and review and/or create and write hit create now again this this video is not about creating web apps but I do want to show you this so you'll see how to publish our very very simple but yet still functional web application so what's happening right now is Asscher is deploying for us a server and it's getting it all set up and configured so we can deploy our our code right to this server all right and just finished a plant a little bit I pause the video for cement but now it's complete and if we click this little bell icon we can see that the deployment succeeded we can pin it to our dashboard click that and I can close this out it can also close this out and go to our our dashboard where we have RAZR pages web app click this and we'll see we have a URL up here razor - pages - your website's net you can click on that let me go to our razor pages application which right now is just a placeholder notice we can deploy just about anything to this location no Java Python PHP Ruby or dotnet core let's now take us down and what we were back to our published target we can say select existing hit create profile this is gonna talk to my subscription and it's it's okay where are we where are we talking to and it says the resource group and I have a resource group here razor pages demo resource group sound familiar inside there is razor pages that's the new thing I just created now I can hit OK what this will do is it will create publish profile that publishes to that location I can configure it for example the dotnet core framework well its dotnet core 3 deployment mode is framework dependent or self-contained by default framework depend that's much much smaller a footprint however if this was a dotnet core 3.1 app I would select self-contained to take dotnet core with my application when it published it but I can leave that as it is you can also select other options like database if there was one file publish options for example remove additional files at destination that could be good may save and hit publish now this is not the way to do a full development cycle this is just for testing if you wanna do a full development cycle again that application life cycle design course I have talks about how do you do this so it automatically builds for you and it automatically does checks and then automatically publishes now our publish has succeeded it's already refreshed the page to say welcome to the web notice RAZR pages - your website's net add address if I were a say notices are got a pre fill here so if I hit submit now welcome to Scranton so our web page is operational on Azure that wasn't very painful at all now as you watch this demo this page will not be here because I don't want to keep paying for it now it's free I'm not actually paying for it but I might demonstrate to you what do you do when you're done with this stuff well I use a resource group notice in my razor pages I could hit delete here however it says resource group razor pages dental resource group if I click that everything associated with this razor pages application is listed here notice it's not just an app service it's also application insights an app service plan all three of these were created when I created my app service I didn't realize that I was creating one thing I created three things however since I tagged that one thing with the resource group it tagged everything that it created with that same resource group now that I've selected the resource group I can come up here and say delete resource group if I click this I have to type in the resource group name which I can copy from here but this is to stop you from just hating delete accidentally because once you delete this it's gone gone you can't bring it back okay so therefore now that I've typed as NER and I hit delete it's gonna delete the app service plan the razor pages insights page and the app service page as well it'll all be gone I hit delete this is gonna take a bit it's not immediate thing but this will make sure that this no longer shows up on my bill again I use something free but if I hadn't if I'd use a sequel server or if I use cosmos TB or other things that that are charged to me when I'm doing demo it's fine because I'm just demoing it it'll cost me a couple dollars two or three dollars a day depending on what I'm getting however I don't want to keep being charged day after day after day so once I'm done I delete the resource group and all the resources inside of it and now they're all gone and so are any future costs okay so that page will be gone very very shortly once has gone note that this publish profile won't work anymore so I'm gonna delete this publish profile that way is gone it's not associated and you don't actually publish to it so that's an introduction to asp.net core razor pages I do want to show you that just like any other dotnet core program there is the program dot C S which does do a little bit of configuration and the biggest thing is it points to start up which is where for example dependency injection is configured if you want to add some ended up dependency injection you would do it here just like you've seen with other dotnet core projects there are a couple of things that are additional for example use exception handler and it send it to a slash error page which that's the default our page right there and we have map raiser pages right down here so there's a couple extra entries here but for the most part this is a standard startup page so if you're familiar with dotnet core in general this is very very familiar it just has a few additional pieces okay so that's it for an intro to raise your pages and how they work hopefully got a picture of how to work with these are very very quick very easy to use especially compared to MVC which is a little bit larger and bulkier has a little more overhead but we could bring MVC into this and mix the two and have MVC and razor pages depending on how we structured it okay so that's an overview hopefully you got something out of that if you want to get further I do have a few courses that might help also some videos on YouTube that might help for example there's an azure DevOps video on YouTube that will show you more about how to use a web page with Azure DevOps for continuous integration and deployment if you're going to step further that's that application lifecycle design course right there's also an intro a dotnet core which does some introduction to Razer pages as well as MVC and API among others and there's other content as well if you want to go to I am Tim quarry calm ok thanks for watching so much as always I am Tim quarry [Music] you

Channel: IAmTimCorey

Views: 180,705

Rating: 4.9374824 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, timco, asp.net, .net core, asp.net mvc, dependency injection, asp.net core 3.0, asp.net core, razor pages, asp.net core web application, .net core 3.0, mvc, blazor, c# web app, azure web app, azure website

Id: 68towqYcQlY

Length: 76min 44sec (4604 seconds)

Published: Mon Nov 25 2019