C# Razor Pages - Complete Tutorial

hello and welcome to tutorial to you my name is Yannick and in this video I will give you a brief introduction into Razer pages so if you know about asp.net core MVC or if you have never created a single application in asp.net yet stick around until the end of the video to understand how you can use Razer pages to create web applications now let's get started [Music] thank you if we open up visual studio and we simply go ahead and search for ASP let's do that we can find several templates right and that one here aspnet core web app is a template that includes Razer Pages now we also for sure have an empty one and we have an MVC one that one is definitely also very famous right so you have that folder which is called views models and controllers and inside there you have all the related c-shelf files now a lot of people are also using razor pages and we wanted to make this video for everyone out there who's interested in weather Pages or who is now facing an application developed in Razer pages and wants to understand what's going on so let's create an application from scratch let me just hit next here let me just call that tutorial to you pick dotnet7 we don't use any authentication right now and let's create the app awesome there we go so this is our project and let's take a look at the template structure that we have right here so we have a program.cs file where a lot of our applications configuration takes place so we for example have a service container where we can add new services like database context and all of that to our dependency injection you can also see that we have here add razor Pages registered nothing too special going on here and it's not really related to Razer pages so let's skip that because that's the same as in every other ASP application now we also have an app settings Json and now the main difference comes we don't have an MVC folder so we don't have a model folder view folder controller folder no instead we have one folder which is called pages and inside there we have so-called page models so let's open up that folder and let's take a look at the index.cs HTML right here you can see that we have some HTML or where some CS HTML which is a Razer Syntax for sure going on and we have an attribute which is called or decorator which is called add page which indicates that this sees HTML document is literally a Razer page also we are binding a model we are binding the index model which we will take a look at right now and then we have some other simple HTML elements right here so what's that index model let's just open it up now I want to show you where I can find it if you take a look at the pages again you can see that indexes HTML has a drop down menu so let's open it up and here you can see the index use HTML dot CS file so there is another c-sharp file which is related to that CS HTML file right now let's take a look here we can see the name now index model and it's inherited from the page model and the page model is offering a lot of MVC functionality so let's take a look let me just hit F12 that takes a second and now if I just open up that here you can see bad request again you can see 4-bit you can see local redirect we got partial and all of that so a lot of MVC stuff is going on which we can also use in Razer pages right great so now as you can see we also have a Constructor here which allows us to grab well injected services from the dependency injection if you have no clue about dependency injection make sure to check out our video only on that topic in asp.net core because it's super important when it's popping up right now at the top right corner also make sure to subscribe to our channel so that you no longer miss any upcoming videos and if you are serious about your c-sharp career check out our c-sharp progress Academy it's a unique self-paced course that teaches you a sp.net core for full stack development with angular test driven development and c-sharp design patterns I'm absolutely sure that this is the fastest way on how you can progress as a c-shock developer and we offer 14 day money back guarantee so if you are not fully satisfied you can simply get your money back no questions asked so go ahead check out our c-sharp progress Academy and become a developer that can bring True Value to the table now if we start our application we will just see some default styling as you know it from the MVC template right or even if you don't know it that's why I'm showing it right now because maybe you have no clue about the MVC template right so let's just give it a second to load yep and there we go this is the well default template we got a home page which we are at right now which is also called the index page and we have a privacy page right here and now we want to extend that we just want to give it some functionality so that you understand how the Razer pages are working we want to be able to add persons and to display them now the thing is that we for sure let me just close that here that we don't have a database right so later in this video we're going to add Entity framework in memory just to store the information about the people that we are creating for the lifetime of the application so that we can really see changes when we load and reload pages and all of that but we will get to that so one last thing about this page right here we have a method which is called on get well guess what this method is getting executed in the moment where we send a request to this URL so this Index right here it's our index page right so the URL is just slash but let's just assume it would be slash index as soon as you send a get request to the slash index URL the on get method will get executed and the same applies for the on post method and the onput method and there are several others so if I send a post request to the index page right here then a method which is called public void on post like that would get executed just for you to understand how this is working for sure a browser when we type in let's say Google right so www.google.com in that moment we are sending a get request and we are getting the actual page layout from Google for example right great so this is why it's called on get it's not just only because yeah I want to get the page content now it is because it's related to the real HTTP requests okay so now let's get started let's create a new folder let's call that models so let's add a new folder here let's call it models and inside there I want to create a new class which is called person now I want to make this video as exciting as possible and also as short as possible so I will now create a class and see you in a second okay there we go this is our class we got three properties first of all the class is called person and we got three properties int ID string name and end H so I chose to take an INT ID for Entity framework later on so that we also move directly will immediately have a primary key right but it's not really necessary but for sure in any real world application you wanna have a unique identifier for your entities so having an ID is definitely a good practice now next up let's create our first page for those people so I want to go to pages I want to right click on pages I want to add a new Razer page and I want to call it people so I want to pick an empty one now let me hit add now I can select the name I want to call it people and the dot CS HTML will get attached automatically now we can see here again is the add page decorator so it's razor page and we are binding it to a people model class which you can see right here now as you can tell if we have our people.seize HTML right here we now have again that code behind file that peoples use html.cs now let me let me open it up here you can see people model again now inside here we get an on get automatically provided which is quite fine now let me just close everything else here which is not necessary right now just so that you can see which files are open right now awesome so let's try to first of all navigate to that page so if we open up that shared folder which is inside of the pages folder we will see a layout.cs HTML let's open that up if we scroll down we can see the nav bar at the very top which is getting displayed so here we get home in privacy let me just open that up let me copy it over and let me say slash persons uh Slash people I'm sorry and let's say people now if I save that it will redirect to the ASP page with the name people and our page is called people so this is why this is working now I want to show that real quick so here we got our project and I can see people now if I click on that I will get to the people endpoint and right now I'm setting in sending a get request right so the on get already got invoked it already got executed but unfortunately there is no content inside it right so nothing is happening now if we want to display something let's say we want to display some people we want to make use of some data binding but first of all if I go to that people.ccml and I want to show some content here let's say H1 for example and I want to say people that's no problem right as soon as I start the application you will now see an H1 showing people so if I again navigate to people you can see that H1 here so that's not the problem as I already said inside of that sees HTML we can write raise the syntax right so we can add for each Loops here and all of that we will get to that in a second awesome so now inside of our people model here I want to be able to add a new person and I want to show a list of all existing people right now we have none and we need to store them so we will now include Entity framework in memory database then we will take care of a form to create a new person then we will save it to the Entity framework database and afterwards we will take care of this playing the list of all the existing uh well person records in our in-memory database right so let's move to tools I mean it sounds like we're doing a lot but it's not really a lot so it shouldn't take too long you get package manager here let's manage the packages we need to install two of them the first one is for sure Entity framework core first of all right so that we get access to the database context class and all of that so let's select it let's hit install and the second one is the well Entity framework core in memory database provider so Entity framework core dot in memory search for that and here we got it Microsoft Entity framework or the memory I also want to install that let me just scroll down here let me hit install awesome so basically this allows us to create a database context we also created well other videos on that topic we also have an introduction into Entity framework which is popping up right now so take a look at that if you have absolutely no clue about Entity framework but it's basically an orm an object relational mapper and it makes it super easy for you to well get access from c-sharp to any kind of database now we don't want to use an SQL database or no SQL database right now we only want to use an in-memory database because it's super easy to set up great so if you are a little bit familiar with Entity framework core you know that we need a database context right so inside of our models folder let me add a new class to be honest this is not really specific right now to raise the pages but I always want to make sure that you get as much as a real world scenario as possible and that you always get well as much knowledge as possible from our videos so please go ahead and try to follow along or just watch the video and follow along later or whatever but I'm absolutely sure that you will learn something new every time you watch our videos to the very end now I want to call that mydb context it's not not the best name maybe but that doesn't matter too much the fact is that we need to have any kind of context that we can register in our dis in our dependency injection right so public class my DB context and we want to inherit that from DB context class now he doesn't know that yet because we are not using the correct namespace so let's just wait a second show potential fix this use Microsoft Entity framework core awesome and now we can add a property here a table right that should be really easy to understand so let's add a prop here public DB set as I said it's just think of it like a SQL table what data do we want to have in our database we want to have person there and we want to call that table people awesome so we are nearly done but we need to create a protected override void which is called on configuring and inside there we need to provide a DB context options Builder there we go let me just zoom out a little bit and inside that on configuring there we can really set up well our in-memory so what we want to do is we want to take that Builder on our show it again and I want to just make that a little bit smaller here options Builder I want to take that one and I want to just write down memory right and you can see use in memory database we want to take that and we can simply provide any name let's say my DB it doesn't really matter because the database is only existing during runtime so as soon as you shut down the application your in-memory database is gone for sure awesome so that's basically all we have to do from that side now just register that database context in program.cs so that it gets injected or that it gets provided for our application so Builder dot Services Dot and just write down context let's see what we get you can see add DB context right he wants to have a type and our type is called mydb context the class that we have just created now we have added it to the container and we're done so we have now entirely connected and memory database which is awesome cool now let me close that now that said let's move to the um well people model how can we get access to our database well we make use of dependency injection let's create a private read-only mydb context let's call the context with an underscore let's create a Constructor because we are getting or we are grabbing the injected elements from the DI using the um Constructor as you can see it right here so let's just do it exactly that way my DB context that's provided from the dependency injection here that one awesome and we're just assigning it to our private read only my DB context right here so that we can access it in the entire class awesome now for on get we could now simply say that we take everything from our context.people and show them but so far we don't have some so let's just stop here for a second and now let's switch over to creating our first person so if we want to create a person we need any kind of property to bind to so since we know that we want to create a person it also works with primitive types so let's say simple strings or whatever but our person class is for sure a more complex type we however take the bind property attribute that you can see right here now we create the property of type person what we want to create and let's call it new person so this is now bound to our cshtml file I will get to that in a second let's create a public I actually result I will explain why we take that I actually result in a couple of seconds or minutes let's say on post and then return redirect to page there we go redirect to page and that will basically just redirect to the on get again right so we take our actual result because if we want to return to another page we have to take that if we don't pick item result but void instead we are not able to return and redirect to another page just saying now let's switch over to our HTML so here we got our people now let's create a new form and guess what that form is for submitting data and we want to set the method of that form to post great now let's create any kind of input it could be a button or whatever let's let's add a button here let's simply say button let's call it add and important enough we need to set the type to submit so that it submits the form so I don't want to care too much about styling we got bootstrap implemented automatically so you can for sure use any kind of bootstrap class if you want but I don't want to well blow up the code just to make it look nice in the end because it's really more about what's going on here in Razer Pages not about the styling right okay we know that we have three properties ID age and name so let's create our inputs for that accordingly so input there we go and the first input is for our ID so what I want to do is I want to set the type to number since our ID is an integer I'm going to set it to number and very important I want to bind it using the name attribute that we have right here and I want to bind it to name is equals to ID so that's the name of our property right now I want to copy that over two more times now for the second one it is text because this is for the name so this is really like the property name of our class of our person class now input type number again for H great so now let's see all of that in action let's just try to add that to our database so the values will now be stored in the new person and this is because we added the bind property so ID name and age will get assigned to the properties of our bound object which is that new person here so what we can do is we can simply go ahead and say hey context which is our database context right dot people dot add we want to add something and we want to add our new person so there we go a new person it's the property at the top right and always make sure in Entity framework core to save the changes once you modified your database awesome now this is Saving right great let's just take a look at that let's just start the application and let me just set a breakpoint in line 31. now let's hit run if we now switch to our people site right here you can now see that we have a form well for ID it's for name and it's for age now let's hit add our breakpoint should stop the application now there we go now let's simply hover above new person let me just open that up and you can see h30 ID 1 name Yannick so now we have successfully verified that our binding works properly so let me just close that application again Entity framework did not complain about our context so that one is working fine it's configured in the correct way now for on get we don't want to well basically repeat the stuff but the other way around so let's again think what we want to do we want to show a well a table of all the people in our database so we want to show a table right now inside of that table we have a list of people so let's create another property let's write down prop let's create a list of people so the information that we really want to show on our site now the list of people list of person I'm sorry list of person right and now let's call that list people there we go now we can definitely initialize that so let's say it's a new list of person now let's scroll down in on get what we want to do is we want to set the value so our people list is equals to the context our database context the people table dot to list so all the records that we have stored in our database right great so every time you send an on get request we will assign all the people that we have in our database to that property because it's a list right keep that in mind now let's switch over to our people.cs HTML again so this is for creating something and right here we want to create a table now I just want to use one single um bootstrap class which is called table with really it makes it look so much better so I want to use that and inside the table we got a t-head inside that table that we have as a sibling a tea body inside that t-hat we have a TR which is a table row and inside that table roll we have a th which is a table well a heading you can see that in a second it's our ID let me just copy that over three times or two times so there we go I will just adjust the formatting in a second so we got ID we got name and we got h awesome if you want to adjust the formatting or correct it Ctrl K and D okay so that's our table hat awesome inside of our table body now the magic happens so we want to create a row for each person so what we want to do is we want to create a for each Loop right so let's write down add for each because it's razor syntax let's say VAR person oh let's make it easy to read let's say person person in model dot people there we go now what is model let's take a look again model so you can see that right here is our people model and then we got model.people so let's go inside of our people model again right people model there we go and here we got our people list so this is what we are referring to now he doesn't know person because it's outside in a different name space so let's show potential fixes using tutorial CU model now for each person we want to create a table row as I said inside that table wall we got table data so I want to create table data and I want to put in the value for person Dot and I want to put in the value for at person dot ID name and age for sure make sure if you are in razor syntax and you are referring to a c-sharp object like person here make sure to use that add sign if not it's just plain text and it will just get rendered as well plain HTML so add person name and that person h great let's take a look let's start our application one more time so here we got our application let's move to people you can see that table here ID name and age let's create something ID one let's say Yannick let's say h30 let's hit add you can see our breakpoint is stopping that's fine I can just remove it I can hit on continue you can now see our record got added and afterwards we redirected to the same page so that the on get will get called again which then updates our list rate so that we can see the latest records that we have added now I want to add the second one now we're using Entity framework so ID is our primary key so don't uh so make sure that you don't use one again because it will well create a conflict so second let's add Dennis for example let's set H to 34 whatever let's hit add here you can see again we are adding something and afterwards once we really saved something to our context we redirect again to reload the page to get all the latest information from the database and to show it here awesome and that's basically well the introduction into Razer pages I hope it makes stuff a lot clearer for you now if you were struggling so yeah Razer pages is also very cool and a lot of people use it and if this video helped you out give it a thumb up write down into the comment section if you want to learn more and know more about Razer Pages subscribe to our Channel and definitely check out our c-sharp progress Academy if you're interested in becoming a highly demanded and sought after c-sharp full stack pep developer thanks for watching and I'll see you next time foreign [Music] [Music]

Channel: tutorialsEU - C#

Views: 35,332

Keywords: Tutorials, Tutorial, Programming, Course, Learn, Step by step, guide, development, programmer, learn how to, how to, c#, .net, .net core, dotnet, core, code, asp, asp net, c sharp, coding, csharp, programming, asp.net, html, tutorial, razor, azure, aspnet, mvc, web, web dev, backend developer, dependency injection, framework, blazor, entity framework, pages, asp net core, entity framework core, what is mvc, razor pages, asp dot net, create website, asp.net mvc, razor page web app, asp.net core mvc

Id: pmWFzzU_NB4

Length: 25min 20sec (1520 seconds)

Published: Wed Feb 01 2023