.Net Razor pages full course | Razor pages for .net core

razor pages is fast and efficient way to create server-rendered web applications with DOT net core in this course we are going to learn all the essential parts of dotted core with razor pages we will also learn how to create and Implement your own designs to your applications with the help of bootstrap and boot Swatch boots watch provides you some cool bootstrap templates at free of cost and we are going to use one of them in this project we will also learn how to interact with databases how to add record to it fetch from it update that record and delete that record we will also learn how to add images to database hey there everyone it's ravindra devrani if you find this video helpful then please hit that like button if you haven't subscribed this channel you can subscribe it so let's get started before starting this course let's talk about the prerequisites so first thing you need to know is she sharp you should have at least intermediate level of knowledge of C sharp so first thing we need is C Sharp second thing we need is HTML and he should have a knowledge of HTML because we are going to talk about and learn about the web development and HTML is the core part of web development so you should have a basic knowledge of HTML HTML third thing which is not mandatory and it's optional you should have a knowledge of bootstrap since we are not going to use any CSS in this project and we are going to use bootstrap which is which provides you to create your designs without having a knowledge of CSS or I'm not saying here not having a knowledge of CSS with least amount of knowledge of CSS you can create the great designs with the help of bootstrap so these three things are the prerequisites for this course so for starting development we need a visual studio IDE and a SQL Server manager so installing the visual studio IDE we will write here visually Studio install okay so we have this link here of the Microsoft website and here you will find a lot of version and we have to use this community version it is a free for the individual user not for the corporate one so once you get that thing we will click on this installer and run here let's click on the continue then what you have to do you have to check this thing ESP dot asp.net and web development and if you want Windows development then you can check this thing also and if you want another thing that you can also install it from here but in our case we only need this ASP net and web development so check this thing and install it okay so now you need another tool and it is called install SQL management Studio and you have to install it from also from this Microsoft website and here you will find you will find a link free download for SQL Server management studio and you have to install it from there and read all of this thing what they are saying and install it from here once you have installed this thing in your PC you will have this icon Visual Studio 2022 and SQL server and mine was little bit older 2014 and you will have latest one so these two things you will need for the development okay okay so let's create a new project click here in Visual Studio 2022 and what we are gonna do here we are going to create a new project then here let's search this razor pages so we have to create this asp.net core web app click on this click on next now what we are going to do here we are going to rename this project so let's name it razor pages tutorial okay and change this path if you want I'm gonna change it definitely Okay so now nothing needs to be changed click on next after that we have to select here framework and which is dotnet 7.0 in my case it is the latest one if you have six then you can select it from here now let's check it configure for https and nothing else we do not need any authentication type in this project so let's create it okay so it is our project so let's see how we can run it you can run it from here from this icon this so click when you click here you will see this drop down list https HTTP http stt sorry IIs server and if we select this then our project is going to run in IIs server but if you click here or even here then your project is going to run in Castrol server and we are going to use a Castrol server in this project you can choose either as this IIs express it doesn't matter but Caster server is an open source and cross-platform server that is very lightweight so let's click here okay so it is our default application here this is our home page this is our privacy page if we click here we will again move to the home page so let's close this application and let's see what's inside the solution Explorer inside this solution Explorer we have our project solution so right now we have only one project in our solution so this is a razor Pages application or web application here you can see this multiple folders and files here so if we click here in this properties then in this launch setting.json file here we are con we are configuring our the launch settings so here you can see that in the case of IIs it is our application URL if we are running this project in our this Castle server or so it is our application URL so these two URLs are for our application first one is https one this localhost 7075 and the second one is this HTTP localhost 5184 so let's see if we click here in the run Icon so you are seeing this default URL for your application local https localhost 7075 and it is set here localhost 7075 and we have another URLs for our HTTP it is for https so if we click on this URL or run this URL you will get the same result okay so I hope this thing is clear to you now so it is our long setting dot Json now let's go here the www root folder or we will move here later first of all let's talk about this app setting dot Json now here it is a Json file and we write some configuration or some some information here that we needed in our project so like this if we write here this connection is string so we are going to Define our connection string here okay so it is how our application setting dot Json and we can even provide some provide some personal information here like my personal info and you can put down here and later you can use it in your project with eye configuration that we will see later okay so now we are here in this root folder so inside the WW root folder we defined some static content like CSS files with CSS file we are going to use in our project with JS file we are going to use in our project and it is libraries that we have pre-installed in this project like this bootstrap Library jQuery Library jQuery validation and jQuery validation and obstusive Library these two libraries are used for client-side validation so it is our WWE root folder it is here the now we have this Pages folder inside here we have all of these pages in our application so these are the shared pages that are going to be shared with multiple pages and we have these Pages now we have these Pages here error and index and privacy so let's see how our routing mechanism work here if we Define here directly inside this Pages folder we can directly execute or we can directly execute those pages and okay we will talk about them later first of all let's move here in the program.cs file so here it is a main file of our application everything runs from here so here as we can see these things are middle years these are called middleware's this app dot use https redirection this use static files use routing use authorization map Fraser pages so middleware are the piece of code that controls the flow of our HTTP application so from the request to the response and in between the in between the request and response these middlewares will work so if you request you if you request for a page then first request move here in this middleware after passing this middleware it will move to this middleware then this middleware then mils middleware then this middleware and then you will get a response after passing from all of these middlewares so whatever middle base you use you will Define here and now we have this service section and we Define our services here so everything every service you need in your project you will Define here it means you are resolving your services here in this Builder dot Services section so here you can see we want that Razer Pages service in our application so we are defining it here so this program dot CS page is typically divided into two parts in the first part till here to here we configure our services okay and Below there we configure our middleware so let's close this thing and now let's see how routing works so let's run this project so here we are seeing nothing in our route and if I click here we will see nothing here in our route and it is our default route which is set by this application by default which is this index.csstml so by default we are looking this page or seeing this page so if I right here hello world if we go there press refresh we are not getting any changes here right now and we have now this hot reload feature so if I click here and this hot reload on file save whenever I save this file this changes should be reflected here okay now you are getting the changes so either you can directly hot reload by clicking on this icon or you can select this feature hot reload on file save then whenever you change your file or save in your file those changes will be reflected to the browser so if I click here sorry write this hello world again then these changes will be reflected automatically so this is the default page or default route for our application which is this index.cs HTML page now let's see and if I click here in this privacy then you are looking this URL the Privacy the localhost 7075 slash privacy and it is the Privacy page we have defined here so if we directly create our page inside this folder then we can directly access it like this but what if what if I create this folder here and name it name it person okay and now we will create here a new reader page reader page empty and let's name it the create okay so how I am going to access this page let's see let us run this project so now we can access that page within with this folder name which is person and the name of the page you have created that is create and it is not a first person sorry I have mistake I have done a mistake person slash create so here we can see this create page and right here create person or just add a person okay so here we can see this changes add person so it is how our routing works and we will see more about writing in later part of this series so let's close this right now and let's see what I am going to say here now if you look into those pages it is called or reader page and we have this thing here if we click here in this icon and expand it you will see a file here this create csstml dot CS file so let me zoom in here so if we click in this create.cs html.cs file and what it is and way back in the in the era of web pages or web forms we call this file code behind but we do not call it code behind it right now in this razor Pages scenario it is called the page model so if I close this file and Shrink this one and if I click here go to page model we will go into the same file so it is called our page model okay so here as we are seeing this class create model which is inheriting this page model now we have this on get and on post method so when the page gets load this method is called and when we submit a form or submitted data from the web page then this method is called this method is called on the post and this method is called on the get and we have one more thing here get on get async and on post async both are the same these are the asynchronous method or asynchronous replacement of those method so we cannot do like that we cannot execute the both get and get a sync method actually both are the same either use this one and this one if you are using asynchronous methods and asynchronous functionality in your project then you have to use on get async otherwise this on get is fine okay so let's see if I write here and ID okay and just let us see how we can okay just move it here now we will see that how to pass the values from here this code behind our page model to the this HTML page so let's create here a string name equals to blank and public string name Okay so let's create here async okay let's leave it like this and get that is fine we do not need async method here right now and this thing also so if I write here then let's change this name whenever this page gets loaded okay so right here name equals to John Doe okay now how I can fetch this name variable here in this create Dot csstml Page so we can do it like this and we can access it from here with this model this create models so we can access it like this capital M o d e l dot name okay so if I run this project and let's see now type here person slash create so we are seeing here hello zondo so that's how we get how we pass the value from this code behind our page model to this HTML page okay and we have talked about the app setting.json here so let's define that variable here my name okay and let's put it here John Doe and John Doe one let's name it John Doe one so let's see how we can access this name from there so for that we need to do this ctor okay it is ah shortcut or we can say the snippet for creating our Constructor so now we need a dependency injection if we want to use any service in any component we need a dependency injection so for that we need this eye configuration service okay so we write here private read-only I configuration config now right here this thing and this thing okay so now we can access this configure I configuration service here in this page so that's how dependency injection work in dotnet core we can directly inject our services here so let's use it and now we are fetching the name from our configuration file so let's name it get value string and if we go there in the app setting.json copy this my name and paste it here or you can directly write it also I just forget about that key so I just didn't remember what key I have defined there okay so it is how we are getting the name so let's see are we getting the name John Doe one or not so let's change this route person slash create okay hello zondo1 and it is coming from the app setting.json so that's how we can use our app setting.json in the dotnet core reader Pages or dot enter user Pages project so let's close it for now now we will create everything from the scratch we are not going to use these boilerplates so what I am going to do I am going to delete all of these folders yeah yeah I am crazy actually otherwise you are not going to learn how to create your own projects so if we delete these all of these files boom okay now I also do not need this index.csstml page I do not need it okay I do not need even this person folder we will create it later and here I do not need this layout Dot csstml Page we will create our own later and I also do not need this validation script part we are going to delete it and here we are not going to delete this view Imports page what this view Imports page does we Define all the using statement here that we are going to use in our project or in our pages so suppose we we create a page and we have a Razer page that is using these tag helpers so to use those tag helpers we have to we have to import this thing in our project so it is that kind of thing if you need any functionality in your razer Pages you have to Define here and those changes will be applied globally in all the pages so you do not need to use this using Razer Pages tutorial again in any page because we have defined in here so do not delete this view Imports Dot csstml Page because the Global Imports are declared here so keep that thing in mind do not delete this premium ports Dot csstml Page now this view starts.cs HTML page let's clean this thing okay let's remove this thing and we are also not going to delete this page because we have to add it again now this error.cs HTML page so here it is our error page so let's keep it as it is what why do need why do we need to delete this okay so I also do not this privacy page but leave it like that okay now we have deleted only the index page from here the layout file from here okay now let's create our own index page okay so here right click here in the pages and new reader page back is very fine now select this reader page empty and keep it as it is index.cs HTML page okay now we have nice and blank HTML page so let's click here hello there okay so let's run this page so now this is how our application look like and I know it looks silly right now we will make it better and later part of this tutorial do not worry about that I will teach you everything so how we are going to deploy a design or Implement a design actually we are not going to do any CSS part here I'm simply gonna use the bootstrap so type here bootstrap okay and this website get bootstrap.com we are going to use our bootstrap cdns and bootstrap design with cdns so click here in the docs and here the quick start guide we are going to copy this thing actually not this thing we need also a CSS file and GSS files in this project so copy this thing and what now paste it here okay now we have this default template for application here we are linking the bootstrap style seat from the CDN and it is much better than using it locally because it provides you caching and it is much faster than the local ones so if you have your local CSS file then you have to link it like this link href equals to name of your folder that will be defined here in this root folder and name of file dot CSS and here we will write relation equals to style sheet and this is but we are not going to do it right now we will do it later okay so it is ah script file and we are using the bootstrap script here okay now what now let's run this project and let's see do we get anything definitely we will not get anything right now because it's just a hello word in this application again we are not seeing anything here what we are going to do here we are going to use the functionality of bootstrap so if you scroll down here then we will find something very useful that is called navigations and here click on this nav bars now which network are we are going to use Let's see we are going to use this one and let's use this one so click here in the click here and it will automatically copy it for you then minimize this tab go here and paste it here that is definitely fine now we are going to put this thing inside a div Dave class equals to container that is a bootstrap class that will centralize everything that will keep your content in the center of the page okay so you can see we have applied this navigation bar here now it is very basic design and what we are going to do here we are going to use an amazing feature like we are going to use this boots watch boots watch and it is amazing website that provides you bootstrap themes so let's go there let's see what theme we should use and I'm gonna use this for Arts it is very colorful theme I know it doesn't look that much great on the form sections because you are from our inputs look like this it isn't that much great but it's okay we are definitely going to use it in our project so what should we do right now now let's move back there and click on this download now it has downloaded a bootstrap file for us let's cut this bootstrap file or copy this bootstrap file go there and in the www.folder let's create a folder and name it CSS first of all let's stop this project and now let's rename it CSS that's paste or files there inside the CSS folder so paste it here now what we are gonna do we are going to remove this link and we do not need it right now paste it here okay let's change the title here and name it reader Pages demo okay we are looking very good right now and remove this character what is it what it is called tilt tilt character now let's run this project again let's see what are the changes we are getting right now now we are seeing this thing and what we are going to do we are going to remove the previous navigation bar okay let's refresh this page now we do not have anything right now and how we are going to do we are gonna get that navigation page we will click here and when we go there we can select anyone from here and in a bar from here so I'm gonna select this one and I'm going to copy this code so let's paste this guy here and I hope we will get everything fine now it is our page so let's move here and do a little change here also and this container section we will write this P4 and it will create padding from every side tops left right and bottom and now our page will be look like this okay which is not that much fine I guess two will be much fine P2 okay so it is not even that much fate so let's write here p x star p x 3 let's see p x three sorry py3 what y means it will create a padding from the top and bottom from both both top and bottom okay we are looking much better right now okay so if I click here I'm not getting anything because we do not Define anything any route so let's define so let's do one thing now I'm going to teach you about the partial views what are the partial views we will talk about it later first let's create how to create partial View so click here in this shared folder right now let's do this but before moving to partial views we have to learn about layouts we will talk about it later so first of all what we are gonna do here right now what we can do here first of all let's define some linking here so let's talk about the tag helpers so we have two ways of defining our urls first one is this either we can Define this index okay it is our uh HTML way of defining links or we can Define it like this ASP page equals to index so this ASP page is called tag helper okay and it is Anchor tag helper you can see it here so tag helpers are defined in esp.net core before the sp.net core we have HTML helpers in ESP dot at MVC with dotted framework so we have multiple type of tag helpers we have some form helpers also we will see it later so do not worry about the definition part just keep this term in your mind it is called tag helpers and it is a way of binding our normal HTML components to the server side things okay so it is called attack helper so we are gonna use definitely gonna use the tag helpers here so let's use here ASP page equals to and we have another page here which is called privacy so here it is called privacy okay let's change it to privacy now and we can write here also SP page equals to index okay now let's run this project and let's see the changes okay so if I click here in this privacy page we are not seeing anything okay so here we are seeing something we have applied this design only in this index page so what I have to do that this design will be applied everywhere automatically we have two ways either I can copy all of these things in the privacy page okay it is a one way but it's not a very good way because if we have to change our links here in this index page then we have to change those things here also in this page but right now we have only two pages it looks much more feasible but what if we have the hundreds of pages do we need to change this do we need to do changes in all those pages no it should not happen like this what is the solution for that I'm Gonna Save You so we have called a layout Pages for that so what layout page is it is layout for overall website and this layout content will be put here and we have some section where our content pages will be rendered okay so click here in this shared folder fine if okay first we need to stop this project now right click here add new item okay and we have to select search a layout View so let's search it here layout so it is our layout page okay fine so what is going happen here it is all layout and all the pages will be rendered here with the help of this render body method and all other pages will be rendered inside this div section so now what we are going to do we are going to cut all of this code and leave this index.cs HTML page nice and clean okay and we are going to remove all of this thing from here and paste everything from the index.cs HTML page okay what I have done here I have copied all the things from this index.cs HTML page and replace all the contents of this layout page with this HTML now where we need to render our body so we are going to render our body here so we write here this render body and every page will be rendered here inside this div container okay every page will be rendered here so if we click on index page it will be rendered here if we click on the about us page it will be rendered here privacy page it will render here and every page that is linked to this layout will be rendered here so keep that thing in your mind okay so let's write here S2 hey it is index page okay okay so that's it now how we are going to link our index layout this link layout sorry link this layout page here so we have to write here layout equals to just name of that layout which is layout okay keep one thing in your mind if we have defined our layout page inside this shared folder we can directly use it but what if you have defined your layout page in the other folder let's see if you define your layout page in this layouts folder then what we will have to do here we can not directly access it like that we have to access it like this layout sorry Pages slash layout slash layout dot cssdml so we have to give the full path if you have defined your layout page other than this weird folder and we are not gonna do that we are going to Define our layout page only inside this shared folder okay so we have our layout page here inside this here folder now keep that thing in mind do not put here anything any extension like dot CS HTML page just write the name of this page which is layout without any extension okay so we have to do it here also inside this privacy okay so we can paste it here now we can see that it is our privacy page and it is our index page in the index page only this content appears index page and in the Privacy page we have only this much content everything other we have defined here so let's run this application okay so if I click here in privacy we can see this layout page so I hope you got a better understanding of layouts right now I hope now we are going to talk about the partial views what are the partial views they are the normal CS HTML Pages without any this page model okay so our partial views does not contain any page model so these are our partial views view Sports view Imports Dot csstml and view start.cs HTML these are are partial views okay but I forget one thing to tell you sorry about that one thing has remained right now we are defining layout page here we are linking right like this layout equals to layout and layout equals layout and we have to keep that thing on every page but we have a solution for this so let's remove it from here okay we are not linking every page like this like this okay we have removed this layout from here how we are going to Define our layout page we have this page called view star.csstml page and it is rendered before every normal page or every Razer page so we can Define our layout here okay so it is it should be like this fine so let's run our project so it is also working fine okay now what it has done we do not need to Define our layout page here we do not need to do in every page okay we have got total freedom right now so we talk about the topic which is called the shared sorry the partial views so partial view does not contain any this page model they are the pure Razer pages so these things view Imports and Views view star Dot csstml Page are the partial views and you can see that they do not have any page model like it have the error.cs html.cs file this one also have this file this one also have this file so these are the Razer Pages not the parcel Pages these are the partial Pages they do not contain any page model file or code behind file so how we are going to create our cursive views first let's create this partial View and click on this new item now if we click here reader p is empty and it says it gonna create a razor page with a page model and we do not need that so what we are going to select this razor view empty so let's create with underscore it is a naming convention for layout and partial pages and let's name it nav okay and what we are going to do here let's open all layout page where it is shared layout and what we are going to do we are just going to cut all of this thing from here and move to this nav Dot csstml Page now we have moved all of our navigation in nav.cs HTML page so how we are going to call that bar here first of all we will talk about why do we need a partial fuse partial views are great way to minimize your complexity in your code and here we can break our code into multiple chunks so that our code or our web page or HTML page looks much more cleaner and it has one more benefit if you have a code that you are going to use in multiple places then you avoid the repetition of that code we simply put that code into a partial View and we can call it whenever we need that in our project so it avoid the code repetition okay so it has two benefits avoid code repetition and avoid the readability issue of your code it means we are not going to put everything in a single page okay so we have a tag helper called this partial name equals to and name of that partial page that is nav okay so that's how we can call this parcel page here so now you can see how our layout page is looking it is looking much more clear right now it is very it have very less code and we have moved these navigation links into this partial views okay so let's run this application let's see everything is working fine or not so here we can see that everything is working as expected everything is nice and fine so let's close this application and talk about the topic so right now this home page is looking we have nothing here and let's redesign this home page so what we are going to do we're going to use some bootstrap components here and let's use this card and here so we are gonna use this component call card and we are going to use this one let's see do we have some better ones yeah this one looks fine okay so what we are going to do just click here copy or copy to clipboard and let's paste it here okay first we need to move to the index page so here is our index page okay now we will paste it here that is fine and just right here welcome [Music] fine let's see how it is looking okay we are not seeing any change let's see this hot reload okay now it is fine so we don't have any pictures here because we haven't defined it here so what we are going to do we are going to find some random images from the internet and let's click here and I'm going to use this API for that pick some dot photos so I'm gonna use the random image and let's paste it here everything is looking fine and I'm I can also tweak the site so I'm gonna use it 150 or maybe 140 it should be 22 okay now we can look here okay it is looking fine and what we are going to do next we are going to copy these cards but before that let's create a div class equals D flux and flex what we say justify what is okay intelligence was not working justify content Center I hope it is right yeah justify content Center and okay now we are putting this card inside this Flex box now let's paste it here and here okay it should be between then it will look much better and let's see how is it looking okay it is looking perfect now our home page is looking a little better but let's do one more thing here and now let's paste this thing here okay and width 100 let's remove this thing from here okay let's leave with a body and we also do not need that body okay let's see okay and we need p y four that should be perfect not py m y and let's leave it like this MB margin bottom four is too much let's leave it with two okay two is enough now we need some padding also so we need P2 okay P2 is fine so let's put some content here I have picked some random content from internet and that was a lot some content so I'm gonna paste it here it is just a random content and let's see how it is looking okay so it is looking like this and now our page is looking much more better so it is our home page and you can design on your own choice it is just a simple plain home page with some images and some text okay actually I don't need to do this thing but I am just showing you how to create a basic home page so that you can create your own home pages whenever you are creating a website or something like this so you can do it on your own and I'm just telling you how to use the bootstrap components in your bootstrap project Okay so apart from designing let's move to our original content Here and Now what we are going to do now we will create our own component our own page so let's create a percentage here and click on this region page select this one and let's name it sorry before before doing that we need to create a folder here so let's create a new folder name it person and we have done it before in this project so I'm just repeating this thing and click here and click on this new reader page create a feature page and give it a name let's name it create okay so now I am showing you once again that it is our CS HTML page here we will put our design designing part and here we will do some backend C sharp coding and we will write some code part here C sharp code part here and we will write the HTML part here Okay so now what we are going to do we are going to do some database connectivity with it and we are going to create some basic cred operation now so we will learn all of these things and all of the concepts with creating some actual code so what we are going to do here I'm going to create a folder data inside that we will create class and it is our model class so we are going to create a model class so let's name it person okay now we will have some properties of this person like ID person should have a name and person should have an email that's it and we do not need any other information but put here a question marks now after putting this question mark our property is become nullable it means you can assign null here so this question mark is the sign of nullable property okay now what we are going to do we are going to put some validation logic here for that I'm gonna write here required it means this property is required and you do not leave it empty so press Ctrl dot here click here and press Ctrl Dot and I don't know why it is not showing any any intellisense here it should be so sometime this intelligence does not works so I have to write it manually here system dot component dot data annotation and let's paste copy it here and paste it here so I'm gonna need one more validation logic here this email should be a email address it means you cannot put any wrong email address it should be a valid one ok so let's close it now our model has created now what we are going to do here we need a database context class and should be name like this database context okay now let's define a Constructor here ctor but before that we need to install two packages so if we type here gist.github.com rd003 which is my guest or git repository here I have this file and I have copied all of this code from the Microsoft doc how do we create a entity sorry the default database connectivity with our application.net core application so first of all we need to install these two packages from the nuget package first one will be this Microsoft efcool.sql server and we have two ways to do this first one if we go here inside this tools and nuget package manager package manager console and we directly write here it is one way and one way is this like package manager console from this manage new get packages and here click on this browse section and search this if we search this it will take a while and it will bring you a result with this Microsoft Entity framework code.sql server here you have to select this project and click install so here I am using the latest one latest framework which is dotnet core 7 or dotnet 7 if you are using the sixth one so you have to select this 6.0.12 so in our case we are using here the dotnet version 7 so we are going to use it so click here in install and it is the second package we need in our project so just copy it also I'm gonna show you another way of doing it but first we need to install this one okay just close this guy for now okay now we have installed it we have another way of doing it and like I said before with this package manager console but with this what we have to do we just have to right here install packages install package and this Microsoft EF code.tools and this package is needed to run our migration commands and that what we will see in later what are the migration command so do not forget to do not forget to install this package okay so this CLI version of installing is much more quick it takes too much time from here go there and then search that package then install and it takes too much time so it is very quick and efficient way of installing things from nuget package okay so let's close this right now now what we are gonna need we are going to define a connection string so I'm just gonna move here and I'm going to copy this connection string okay just paste it here and press comma and put this connection string here so name of our connection string is c o double n and you can put anything like here like default or anything but and then August I'm just gonna go with con so it is our data source and you might be wondering from where you are getting it so I am getting it from the SQL Server so it is the instance of my SQL server and you can find the actual instance here like this and your SQL Server might have this instance and if I paste it here like this it will also work so if we have this direct name then we can use this ravindra here directly or sorry dot here directly but if your instance is like this SQL server and something like this then you if you have this kind of server name then we have to write here with that instance Okay so I hope you understood this I think it is getting little bit confusing right now so we will go just with this either we can write here dot or we can select this name from here and paste it here so both of both of will work fine okay so let's close it for now so it is our name it is the instance of our SQL Server here inside this initial catalog we are going to name off we are going to write the name of our database so let's name it raise a pages tutorial okay so it is our database name or let's say it is DB okay reader Pages tutorial DB or we can sort it Razer Pages DB that is also fine Integrated Security will be true because we are using a Windows authentication here if you are using this project in your server then you need to remove it from here and put a username and password instead of this and here the tested server certificate whatever it is it should be true and that's why it is our connection is string now connection string part is done here we have to do some connectivity right now first of all I need to try it here DB context and it will inherit this class DB context okay here I'm just gonna write one more thing which is this so we are gonna replace this thing with this now because we want to add that class inside our database and we want to enter this person class into our database as a table so for that what we have to write here public DB set okay person okay and let's name it person that is fine so after adding this line this table or this class is going to be say in our actual database if you don't write this line the changes will not be reflected into database and this person class is not going to be your table in the database so keep that thing in your mind okay now this database context part is done and we have last section here inside this program dot CS we have to copy this code and let's close this for now okay and let's paste it here we need this service in our project so here it is our name of the context class and here it is the name of our connection string which I have defined here c o double n and it should be the same c o double n so please keep that thing in your mind this name and this this name this name and this name should be same okay now we have done our connectivity so what we are going to do we are going to create some migration commands and migration commands are used for creating a database so first add migration init okay it is going to create a migration file for us so after creating a migration file we will look into that file and see what it is Okay so it is taking a little bit because okay build a field and we have some error in our project so we are gonna look into it name space directory contained members such as field okay so it should be here inside this class not directly inside the namespace okay now we are fine I guess let's build this project and remove those errors okay now we are fine okay so let's run that command again add migration in it okay now as you can see here it has generated a migration file for us so first here in this up section it is saying that what are the changes that are going to be reflected into database first of all it is going to create table for us that is person and it have following Fields like ID name email and it has a primary key and etc etc so it is the migration file and when we write this update database command it is this command is going to look for the latest migration file that we have created right now it is the latest one but in future when we do some changes in our code then we will have multiple migration files and this update command is going to look for the latest one so right now we have only one which is the latest one so this command is going to look for that migration file so press enter here and it has started build then build is succeeded now it is creating a tables tables or database for us so now it has created a database for us okay so we can look into our SQL server and see that is is this database is actually present in the database or present in the SQL server or not so we are going to log into the SQL Server and after that now if we look here inside this database section we have multiple databases here and it is our database that we have created wizard Pages DB we have this migration history files and we do not need to worry about that but it is the person table that we have created so let's expand this and these are the columns ID with primary key name and email okay and these fields are not enough because we have we have put the validation logic there so that these fields are not going to be null okay so let's close this thing and move back to the visibility Studio okay now let's close this migration file we do not need it now and we do not need this context class also so let's move here inside the create.cs html.cs and query.cs HTML file so let's see first of all what we are going to do here we are going to create a bind property so first of all let's see how I can get the data from this View to this csstml.cs file so let's define this view first so for that I'm gonna use a bootstrap code so let's type here first of all we need a div here so div k here let's refine the add person very good now we are gonna use a form and it have a tag helper like ESP accent which accent method is going to use and it is a create the same page okay so inside this we have this div with class form group okay now we will Define a label here an esp4 it is a tag helper and I guess P4 this what it is create model but before that we need to define a property here that we are going to bind with our form so we are gonna write here bind property and let's define that property it will be uh person and it should be data.person if I write here only person then it is going to confuse that if it is a person of this name space we have a two speed name spaces like it is confusing with this treasure Pages Pages dot person and with data.person so we have to clearly specify that we are using the data dot person right now and let's name it person okay now we are absolutely fine so here what it is saying that is an on the level it's okay so now here we are gonna bind that person dot name here okay and here it will automatically generate a label with name now we need input asp4 person dot name okay and it have class which will be form control which is a Buddhist trap class okay now we need a validation message here so it will be a span class equals to text is danger it is also a bootstrap class and here what we are gonna write validation SP validation for name okay now let's copy these guys and paste them here and let's change your name with email okay with your email and it should be like person dot email and here should be a person.name okay now now we have defined our two properties now we are gonna Define a button here so it should be like this div class equals to m y 2 and here we will Define a button class equals to VT and BTN primary okay and it should be a save now we are looking much better right now and here we will Define uh error message so we will Define it later okay now move here so let's talk about this method on get a known post so if we have these two methods on get and on post on post these are the simple methods and if we have this async methods then we have to write async at the end like this so now these simple methods are not gonna work here because here suppose I want to return return anything like written page then it is not gonna work because this method has not any written type so for this scenario we need a accent result so I have we have to write here X and public IX and result on post public action result on get now our methods has a ability to return anything from here and I X and result is a generic class that contains so much kind of classes like we can return are not found from here okay which is also good and we can also return a page from here which is also good we can return the content from here if we like so all of these kind of thing we can return from this this method so these are called accent result and okay basically what we are going to write here public async task i x okay it is fine public i x and result on get that's okay and here we are gonna write public as sync task i x and result and it should be on post async okay and if it is a ixn type of method action visual type of method then it's shooter it should return anything so it will return just a page okay now we are absolutely fine now we will also written a page from here and we will Define the functionality later now connecting to the database we need to connect we need to use a what we say here we need to inject our database context into this class so for that what we have to do here just write here ctor press double tab it will create a Constructor for you and what we are going to write here actually let's write here database context CTX okay press Ctrl Dot and create and assign field CTX okay but it should be look like this and we will we are going to differentiate this variable or this parameter or this field so this it is called a field and it is called a parameter if you put your mouse pointer then you will see it is a field it is a read-only field and if we put our pointer here it is a parameter okay so if a variable or anything like this is defined inside a method it is called parameter if we Define it here it is called a field so we are gonna distinguish the name of field and this parameter so I put a underscore here and it is also a naming convention for defining the fields so now we can put this put away this from here now we do not need it and we are fine so now we are going to Define some functionality here so first of all let's write here try catch exception EX okay first of all we are going to check if our model is valid or not so it means whatever data our form is passing is valid or not for that we need to write here model state DOT is valid and I put a negation sign here it means if our model's create is not valid then we will return a page from here it means we will move to the same page from here now here we are going to put some logic here so we are going to check here if context sorry if person equals to no then return not found okay now we have done a little check here now we are fine now we can write here CTX dot person dot hat Dot person and we can also write here cdx.save changes now our changes will be reflected to database and we are gonna write here a temp data it is efficient way of transferring data from the Cs file to this HTML file or CS HTML file so we are gonna write here success message and temp data dot success equals to saved successfully okay now it is fine okay saved successfully now we will write here temp data dot error and ah you're just going to write here error has occurred in the case of error we will not move to the page we are going to redirect to this page so return redirect to page and it is going to be null here or blank here because we are redirecting to the same page that's why we haven't write anything if you are moving to other page then we have to write the name of that page here like ABC slash x y z and Page name like this okay but in our case we are moving to the same page so we are not gonna write the name of the page okay so our get method or post method has created and now we have to write here div class equals to alert alert no not like this first we need to check a condition if temp data if time data success doesn't equals to null then what we are going to do we are going to display that success message inside this alert success so it should be like this and we are gonna display that temp data dot success here okay but if what if we get error message so we will write here term data dot error does not equal to null should be error and it should be alert Danger okay but this thing we are needed multiple times in our project so if we have a error create page and edit page and it is the case of person but now what if we have the multiple Pages like person like products category everywhere we need to display this success message or error message and for that what we have to do we have to write this code everywhere in the project but we are not going to do it and we are going to re we are going to create a partial page for that and we are going to implement a reusability code reusability so we have that facility we are definitely going to use it so create here and create a new item and create a new partial new razor View let's name it to message fine let's put that code here and we are going to call it like this partial name equals to message okay now let's test this project okay and let's see do we have defined a link here so now we are going to Define person link here so let's define it create person or just person this person is fine ASP page equals to persons slash create okay let's click here now we are able to see a person link here let's click on this and here we have moved to there add person so let's add a person let's name it person one person one at the rate gmail.com let's save it okay so it is saying error has occurred okay that is absolutely fine so now what we are going to use at how to what are we going to learn here we will see that how we can track error and how we can use the functionality of breakpoints so we are going to debug our code and use the breakpoint so click here and if we click here now we have put our breakpoint here so our code will be stopped here okay so let us go there and let's enter the values again person person two let's click on the save now as you can see we have stopped here now click here in this step over button here in the top here you can see or either you can press the F10 button it is the shortcut for that so either press the F10 or click here on the step over so click here okay fine model is valid that is perfect person equals to null okay person is also not null here we can see that we can also see the values we are getting here so if we move our Mouse here in this person and we will expand it we can see what values we are getting so we are getting ID 0 that is absolutely fine it should be zero it will be automatically generated inside the database and name is present one it is also fine and here it is the email a person two at the rate gmail.com Okay so let's move further okay so please also fine the saved successfully and that error was happening because of my system is getting little bit slow and if your system is slow then the the code is not going to work and it will display an error of weight or something like that weight operation field or something like that so there was not any error we have debugger code now we are fine we can click here in continue now okay so we have seen here saved successfully now we can remove the breakpoint from there and just click here and it will remove the breakpoint so if you want to put breakpoint here you can put it there and wherever you want so so I'm gonna teaching you how to debug your problems and how to use the breakpoint functionality okay so let's add one more person two person two at the gmail.com let's save it okay person three at the read Gmail person three if I click here that is saying that please include at the reading emails okay this person 3 at the red gmail.com okay it is fine so if I do not enter anything then it is showing a service error message okay so let's name it John let's click on save it is saying email field is required so let's write here Zone the red xyz.com okay let's save it now what we are going to do we are gonna add a button here and let's name it it should not be button it should be anchor tag it should be default and it will have a name all records okay now it will have espxn equals to or ASP page equals to we will create this page later so let's name it display all now what let's see okay all records but it is not looking that much well so let's name it BT and info let's see how it is looking and okay it is looking yeah okay okay if I put here BTN dot do we have this button let's see yeah it is looking much better okay so first now what we have to do we have to Define this display all page where we are going to display all the records so go here and right click in the person folder at a razor page and name it display all okay display Hall we are good so now we are going to move inside that display all so okay it should not be a C sharp class my bad it should be a display also right click here in the right click here in this person folder add Razer page it should be laser page empty and it should be in display all okay and it's gonna take a while now we are fine now what we are going to do we are going to move here in this code go to page model okay what we need here we need to define a model so p r o p double tap it should be I enumerable and let's name it data dot person let's name it people okay here we are going to Define this Constructor private read-only database context CTX okay and here we are going to define a parameter database context CTX and this CTX equals to CTX now fetch the records from the database for that I'm going to write here person a people equals to c t x dot person dot to list okay fine and here we do not need any task as oh sorry accent result because we just have to set this people's field and we are going to fetch it here so it is going to work fine service right here public and deal okay table class equals to table bordered table is stripped stable T head T had and inside that we have a TR which is a row TR it will have name and T sorry inside the TR we will have th name email action now we will have a loop approach where item in model the odd person or people let's name it person now here we will have this D body inside that t body we will have this for Loop now we will Define a rho TR inside that we will have this DD person dot name person dot email and here we need a two buttons so first one will be a h RF uh something like that a class equals to ptn b t n success it should be edit and asp page equals to add it okay ESP root ID equals to add the weight person dot ID and we will create this edit page later so then I will show what is the meaning of this ID okay so we are looking here very good now we will create okay this T head is moved here so it should be closed here and this Dr okay now we are fine so it should be a delete page delete and we are going to remove this thing from here right now we do not need it right now we will Define it later BT and danger and it is giving us error so let's remove it from here for now okay now we have these two buttons so let's test our project so here let's click on this person tab click on it's this all record and let's see person slash okay this create page inside this page all record person so if I put it like that person slash display all should it be fine now okay now I am getting there because what we have done here we have done a terrible thing here actually we do not have it I have this terrible error and I accidentally created this name it should be like this display all okay so uh I guess it should be display all and now we are fine now if I remove this person from here it should be work fine right now we are getting error and it is saying display all public okay void okay now what it is saying database context CTX equals to CTX okay display all and it should be changed here also I guess now we are fine let's try to build it okay we have lots of Errors so what I am going to do right now we have only one option here and okay so what I'm gonna do I'm just going to change everything so let's find where changes are needed so here it should be also display Hall person slash display all okay so here it is that is our class display all which is a page model which is sign and here is our display all okay we'll find here what it is saying non-allible property people must have container normal value okay it doesn't matter right now display all let's build this project let's see okay we do not have any error right now so we are fine so these kind of thing happens always in the programming journey and what's important is do not get afraid and face the error and try to solve it okay so let's run this project again okay so click here in this person and click on this whole records page and right now we are here inside this page and we are getting this nice grid and actually it is not looking that much great how it is the option we get in this template so we do not complain about it okay now everything is working fine now we need to Define this edit functionality so close this tab right now and let's create a page edit okay let's create a page and name it created page and name it edit fine so edit page should be similar like the create page so what we are going to do we are going to copy this HTML part of the create page and paste it here okay and it should be like this edit and if we go here inside this edit page okay let's open this create Dot csstml.cs Page also so let's copy these things here and paste them here also so name of the Constructor also need to be changed here it should be edit okay everything else will be similar and now what we need to do just go here and we can also copy it but we have to do some changes and we will do it okay so we do not need that create Pages again so let's paste let's remove this thing here and paste it here first of all we need to update this get method so when we click on edit we our URL will be like this edit question mark ID equals to 2 or 1 or whatever like it so we are going to fetch that ID here so we are gonna this ID from the URL parameters so okay now what we are gonna do where person we're gonna find that person here where person equals to CTX dot person sorry CTX dot person dot find ID okay a person equals to know then return not found otherwise written page that is fine otherwise return page but before that what we are going to do we are going to assign that person equals to person okay now we have assigned this property from here from the get method now what we have to do we have to change this upgrade method only so we have to replace this add to update now we are fine Okay so now we have defined or now we need to change it here like this if we have successfully updated then we will move to the we will move to display all page display all otherwise we are gonna stay here return page okay so what this written page will do it will leave you remain in this same page and the state will not be modified here so whatever value you have put in your text box those will not be lost if we write this page but if we write here return redirect to page then it will redirect to this page and all the text box or input values will be reset so we do not want that so I'm gonna write here just paste so that we want to lose our values okay okay I guess I need to do one more thing here and what is that thing now we do not also sorry do not now we want to provide the ID so ID should not be 0 round for this I'm gonna do here asp sorry input type equals to Hidden and it should be person dot ID okay and here this tip should be closed and it should be a date person and let's change this button to update other everything will be same we do not need to change anything right now okay so let's let's move this thing let's copy this thing and also use it here in the display section because after edit we have to move here now let's run our project okay so let's move here inside this person all records and here if I click in this person one okay so we are not going anywhere because we need to change the route here is p pH ASP route Dash ID because we are going to provide ID and okay ASP it should be like item ID I think at the rate person Dot ID let's see it's right or not okay changes are successfully saved so if I click here and so that should not be Item ID that should only be ID because the name of our parameter is ID if it was named then it should be like this name right now the name of our parameter that we are using here where here it is ID so if this parameter is name then it should be name okay so right now it is ID so it should be ID okay so let's click here now we can see this page here and let's name it Max at the gmail.com saved successfully okay now we have this Max okay so these changes are persisted in the database and here it should have a heading like this H3 persons are people okay so it should be changed soon yeah people okay now what we need to Define here we need to Define this delete okay so one thing I want to say you that okay but I have accidentally closed that display all page what I'm gonna show you actually these things like this on get and on post are called Handler these are not methods these are called handlers so we can have multiple handlers like on get and on post but we can have other handlers like on post delete so we are going to use that on post delete here so what we are gonna write here on post delete async it should be a sync task I action result okay now we need to change this to I accent result and it should return a page here it should have ID okay on post delete async so where we are gonna find first person so where person equals to CTX CTX dot person dot find ID if person equals to null then written not found otherwise we are going to delete this person CTX so first of all we need to Define here try c t x c t x dot person Dot remove I sorry person CTX dot save changes and temp data dot success equals to deleted success fully okay otherwise here in this exception sorry cat section otherwise CTX Dot not CTX temp data Dot error equals to error on deleting record and we will return redirect to same page so return redirect to page okay so it is our own post retesting method so let's see how we can call this method from here okay so first of all to call the handlers we need to define a form okay here from an asp xn equals to display all now this link should be pasted here and it will be a button and it should be a submit button because we have to submit a form but before deleting it will fire on click event on click and here we will just call the written and it will be confirm method window dot confirm method it will ask us are you sure so first of all it will Define a confirm dialog that are you sure if we click on yes then it will delete the button otherwise it will not delete the record sorry not button okay now let's remove it and remove this comment so it should be display all an SP route ID is not all right asp so we need to Define here actually we have to remove this guy and we have to use the DSP page Handler equals to delete because we are using the delete Handler so we need to Define here is PPH Handler equals to delete okay okay so let's put every Point here and let's see is this method is actually hitting or not so let's put a breakpoint here and okay let's remove it let's put it here and let's run this project but but before that what we are going to do we are going to move here the person and here the nav section first of all we are going to change it to display all display all okay now what we are going to do here we are gonna put a button here like this one and just paste it here okay and let's add a class my two BT and info and BTN dark add more okay and it should be a create so this button will move us to create page okay so let's see if we click here we add the control of this project we go okay we will move here if we click here we will move here if we click here we will move back to the same page I know now design has little bit messy but it's okay so right now what we have to do we have to delete some records so let's click here let's click on cancel okay but that's fine if I click on OK so I moved here and if we move our Mouse pointer here we are getting ID equals to 3 that is a good sign so let's see we are finding person yes we are finding a person with ID3 person person three person two at the rate gmail.com okay so we are moving removing that person saving changes and initializing the temp data and let's remove this breakpoint now we do not need it and it will redirect to this same page okay it will take a while so here we have the deleted successful message and we do not have that record okay so uh division has successfully completed now what we will see we will see how we can make changes in our database and how we can add some more tables in our database for that what we need to do if we want to create a new table then we have to create a new class and let's name that class let's name it has a category dot CS and it is nothing related to person so keep that thing in mind and I'm seeing here breakpoints so let's remove it from here okay so let's do the same thing again create an ID okay that is nice so let's write here again a string name and this field will be a required one so we will put a required here and okay again I am not able to use intellisense so what I am going to do here I'm just gonna move here and use this line and paste it here okay usually when we click here and press Ctrl dot then this line is automatically updated and for some weird reasons it is not working right now that's it so now here we will put a question mark okay fine now what we are going to do we are going to add uh field and let's name it to profile sorry person yes profile picture profile picture okay so we are going to add this field into database so because I have I have to add a new table so I have to define a DB set here it will be a category it will be a category again and we are good okay now again what we have to do we have to open this package manager console and here we will write a command add migration and added new let's put inside the double quotes added new fields and table okay let's enter let's press enter and it is gonna take a while because first it will build a project then we will update our database after that my system is little bit slow so that's why it is taking time database now this update database command will look for the latest migration file and where we can find this migration file here inside this migration folder so it is our latest one so that update database command will look for this one because we have the multiple the multiple migration commands it is it is our initial migration file and this one is our latest one so update database command will always look for the latest one okay so what we are going to do now we have successfully updated those field into database so we will add a profile picture for that what we are going to do now we will see how to create our services so for that we will create a new file let's name IT services okay here what I'm going to do I am going to create a new interface so let's name it I file service fine now we will create a new class let's name it file service okay now what we will do we will inherit that interface here file service and right now we are not focusing on any code here what we are doing just we are creating this interface and hit this file this class file and we are inheriting that interface here now if we have to use those services in our project then we have to register them here for registering them here let's write Services dot add transient and we have multiple ways like this at transient at trans ad scoped and add Singleton Singleton and we are not going to discuss about that here so please find it find about it in the internet and they have little little bit difference so we are going to use a transient version here I can sorry I file service fine comma file service okay good now we have successfully registered our services now we have Digital Services then we can inject them anywhere in our project without that we cannot use the dependency injection of that service it means we cannot inject them anywhere in our project okay so now we have to Define some methods now let's move to my guests so we can you can go there gist.github.com rd003 it is my GitHub profile and here you will find this I file service and here I have some methods so first let's copy this name and let's move here very nice good okay and we have another method here for deleting image it is a Boolean type okay so it is an interface not class fine so interface does not contain any body of the method so we are not defining anybody here and of course we cannot Define it at all so these two methods are going to have in this file service now it is showing me error and it is saying that please Implement those two methods so what we are going to do here we are copying this whole code from here to here and replace our file service code with this okay so now let's understand this code what it is doing first of all we are creating a field here of a web host environment what it will do I will show you later now we are creating the Constructor here and we are assigning that parameter to this environment field what we are doing here we are injecting this I web host environment as a Constructor injector here in this file so we are basically just injecting this iweb host environment service and we are going to use the methods of this iov host environment so here it is a method for saving our file first of all we are getting the file from this iPhone file and it is returning a tuple but it will return it will return two thing integer and string integer will return the status code which will be 0 or 1 0 4 error one for success and string will return a method message so here WWF part first of all we are finding the path of this project with the help of this environment variable that's why we have injected this iweb host environment here okay and now we are getting the path from this code path dot combine and we are combining this www dot path with this uploads folder right now we do not have any uploads folder so it will check that if we have this path right now if we have this path so where this path will be it will be it will access it from here so if we have a folder here with uploads then this directory dot exist dot path is true it means it is finding the path here it is finding the uploads folder here so what this means it is just finding upload folder here so we should have uploads folder here what if I do not have that upload folder then it will create one so if we do not have that folder it will create one so it will create a folder name uploads here right now it is not here it will automatically create it when we execute this code okay so keep that thing in mind it will be created here now we are getting the extension from the file which is we are getting here image file we are getting the extension of this file and these are the allowed extension for the file our these are the allowed extensions and we are checking that is the file is the file that is coming from the user contains this extension these extensions or not if these are the valid extensions then we will move forward otherwise we will return from here with error message and status code 0. so here what we are doing we are creating a unique file name for our image which will be this guid dot new guid.2 stream new file name will be new guid plus extension of the path so our file name would be a random string plus extension it means if we have a JPG file then our file will be a random string dot jpg now we are combining the path with new file name and we are using this file stream service here to create that file inside that folder and we are copying it and we are closing that stream and we are returning a true okay we are returning as 1 and with the file name here so if we have successfully created a file then we will return it to the user with status code one otherwise it will return a 0 and error has occurred same thing is happening here so we are deleting a file here so we are only getting the file name from the user side and we are finding that file in this uploads folder if it's fine it's if it finds it it will delete otherwise it will return false okay so that is how this code is working I hope you understood all of this thing now how we are gonna upload the file from the user and so let's click here let's click here in this create section okay now what we have to do we have to copy this thing here and we will paste it here but before that what we need to do okay so where are we right now in this create section now what we have to do we have to click here and go to definition okay let's create a not mapped property what this not mapped will do this property is not going to save in the database okay so if we write here not mapped then this property is not going to save in a database so it will be I form file then file let's name it image file okay now we are good so move we are moving here so watch here very carefully for uploading file we have to include this thing here ENC type equals to Multiverse slash form data otherwise you are not able to post the file back to the server okay so keep that thing in mind please include this line do not skip this part here okay now what we have to do we have copied this thing here from here now we have to change is I from I image file good just paste it here and here okay we are good now but it should be input type equals to file okay and okay it's fine now move here in this section and move here what we will check here here we will check if this person dot file doesn't equals to null okay if file is not null then what we are going to do first we need to inject that service here so we can do here I file service file service and if we press Ctrl dot here it will say that create and assign field file service okay now press underscore here right underscore here and we are good to go now we can remove this this from here okay now we can use the file service here so what we are going to check here if where file result F result equals to file service Dot save image and it will be person dot image file so if file result if result Dot item 1 and item 1 is integer value equals to 1 or 0 first we will check for 0 okay let's check for one if we are getting the file result okay then what we are going to do We Are Gonna Save it into database so here let's person dot image file equals to F result Dot image sorry item two okay and we are not going to check else condition here because we can update that profile picture from the edit method if we fail here okay I guess we are doing everything right so let's put a breakpoint here and let's check it first of all we are getting some error here so let's check it where we are getting those errors so let's see okay warning warning warning so here's the error and it should be profile picture person.profile picture equals to item Dot and it is the name of the image okay so let's build this solution okay we have one succeed zero field now we can run this project so now here we can see in this page we have this person let's name it Jack check at the Red X Y z.com let's choose a file here okay and here is Jack let's save it and so image file is not null very nice now what we are getting from the result this this Tuple we are returning it is returning item one equals to 1 and item two is image file okay so let's add it here here pressing dot add next save changes and here we have this exception see the inner exception invalid column name profile picture okay so why why it is happening we will see it right now not later right now so when I moved here in the SQL server and I'm not seeing anything like this column name profile picture and a table category so it means the changes have not successfully updated first of all let's look on to our migration file and it is your migration file that we have created add column okay fine and it has created a table okay then why it has not happened so I guess update command was not successfully executed that time or we haven't pressed an update database command so we will write the ad update database okay update database we are not using the add migration command because we have already created this file before so that's it I guess I forget to run this command Actually I don't even remember it so what's happened here okay so let's see come on time out again supported so now if we see here if you look here then we have this category table and now we have this column okay so that is fine name email and profile picture good I guess now we are good and now let's run this project okay let's enter those field again so it will be Jack Jack had the red xyz.com and check it is drag okay so let's save here and let's move from here here here here here here here okay let's move forward okay everything is fine so let's remove this breakpoint from here and so you can see the success message here so we will move here and what we can see here right now we will have this upload folders and it have the two images this one is created before when the when we have failed to save these entries into database and this one is created right now okay now how to sew these records here in the display all section so let's create here let's go here and add a new column here and let's name it profile pick okay now below email let's add a new TD and let's check here if if person sorry if a string dot is null or empty if profile picture is not null so person dot profile pic is not null or empty then we will show a profile picture here so it will be like IMG SRC images sorry not images it was uploads and person dot profile picture alt equals to profile pic okay and we are going to apply some style Here style equals to width width will be 100 and okay 100 will be enough and height should be 50 p x and it will be pixel also okay and else what we will get here otherwise we are gonna display here not available okay so why we are getting error here right now okay anyway run this project and if there is any error it will show sometime this Visual Studio goes crazy so here we can see that all of them have don't have any profile picture but this one have so it is displaying here and we can change its widths and height so let's change it to 150 and its height should be 100 let's see how it is looking okay it is looking much much better but its width should be like this 120 okay now it is fine so that's how we add and display the images we will do same thing in the edit so for that what we are going to do we are going to move into this array.cs HTML page and let's go there and create Dot csstml Page and copy this image file from here and let's close this guy let's move here in the cssdml page and paste it here that is fine now here we also need to change this form and we have to add this thing which is called ENC type okay why it is not working he and C type equals to forms sorry multi Parts slash form data and here what we are going to see let's copy some of this code from here and let's copy this guy Okay so what we are going to do we are going to put it here and we are going to check if model Dot and model Dot what do we have Okay so edit model and we have this page model here is our edit model okay fine model dot person okay so we have this property name model dot person dot profile picture and it will go same here person Dot sorry model dot person dot profile picture so it is our path for the image file so if we have this image here it will be displayed okay now is how it's going to save and yeah that's fine I guess we have done here in this razor pitch section so let's move here in the page model okay so let's move here in the post I think section and let's see first of all why it is giving me this error because I am not using any await here so not here okay we have to use it here a weight save changes async press sync okay we are fine now we have removed this warning message so we have to do same thing here in the create dot CS HTML so here this on post async save changes async and here it should be a weight okay now let's move here and let's update that profile picture let's copy some code from here and go there in the post method okay so let's copy this guy from here and paste it here okay not here but here okay so we need to inject that file service here also so let's go there and let's copy let's copy this guy High file service file service paste it here comma file service press Ctrl Dot okay create and assign field file service that is fine put underscore here and remove this okay oh we are fine now we can close it so let's go here and so if what we have to do here we have to save the image and first we have to save the image and remove the holder image from folder for that what we have to do here first we have to remove sorry store the old image equals to and it should be retrieved from this person Dot okay so person dot profile picture okay now we are retrieving the older image from here now we are calling this file service save image method and it is returning as a new image after saving it to the folder now our image is saved to the folder now what we are going to do we are updating our profile picture person dot profile picture here and we are updating our record okay after that what we are going to do Okay so let's call this method here okay so let's remove this old image section from here to here because we are going to use it here so here we will check that if old image doesn't equals to profile sorry person Dot profile picture it means we have updated our profile picture okay so if this old picture and the person picture profile picture is the same it means we haven't updated that profile picture so what we are going to do here then we are gonna call that service file service dot delete image and we are going to pass that image file name here so we will just pass this old image there okay so let's put a breakpoint here and let's try to update this sorry let's try to call this method so now we are in this display person section and here what we are going to do we are going to edit this Jack field and what we are going to change its name what we are going to do we are just going to change its name and email and right now let's let's change this profile picture okay and let's put it here and click on the update section so we have updated it successfully and why it haven't gone here the main question is why it haven't gone here so let's see okay let's see where I have put that breakpoint on post async okay what it is saying that Liberty Point will not be hit the source code is different from the original version okay I don't know why it is saying let's run this project let's build it thing again sometime these kinds of things happen and let's see okay let's run this project again so here as we can see the breakpoint did not hit but we have updated our profile picture with name so let's let's update it again let's choose a different file the image 2 uh right now let's move here so it is null okay okay okay now here person has updated changes have been saved okay so now it is the old image let's see old image equals to null and profile picture equals to this so why do we not have any old image foreign but it has saved images for us let's see but right now what we are doing here we are not deleting any image and it is getting saved here multiple times so as we can see this image already has updated okay so we do not need it right now so let's move here in this folder and let's see which image we have been using here okay this one so let's remove these three images manually okay so first of all we need to check that why we are not getting any profile picture here and let's see why it is happening person.org profile picture person dot find okay so I got it why we are not getting this profile picture because we need another field that will hold that profile picture so it should be like this input type equals to Hidden SP folder profile picture and it is going to hold that profile picture so let's build this project again and let's check this functionality and let's see where we have put that Pro Point Break point first of all let's move that breakpoint okay like here here will be fine now now let's run this project and let's see the result so let's click on this edit button and let's try to update this image again and let's change it back to this one let's hit the update button let's move further and let's see that we are getting old image or not yeah we are getting the old image okay so this one is our old image now we have updated the profile picture and let's save it okay now it is not the same so we are gonna delete the older one right now we have these two images this one is the current one and it is the old one so let's see let's move further now let's see it has deleted that image and replaced it with this one okay so we have successfully achieved this functionality at least so let's see let's call one more condition here so let's do not update an image okay so if we are not updating any image so why I am not hitting any breakpoint because I have put it here so let's put it here in the try section Okay so let's try to update it and let's see here we are not getting an image so we are just going to update so this condition will also be false and we will move further and everything will be fine now we have to check one more condition so let's go back and let's let's change this person to to Jill and let's change here 0 at the rate yahoo.com okay so let's try to add image to zil and let's update it so here image file is not null very fine and right now we do not have any old image that is absolutely right so actually how it is going to delete that old image because we do not have it right now so here here is a little bit of buggy code right now because because first I have to check that null condition so if old image is not null let's see let's put it in this way if string dot is null or empty and old image okay so if old image is not null here so let's test this code again so now let's update this record with name Max and here what we are going to do we are going to put this image here and we are hitting a breakpoint that is absolutely fine right now we do not have any old image that is absolutely right and here we are going to update the image and now it will not move into this section okay so we have success in this test case okay so let's try to hit the update method without any update so here what we are going to see that okay so it should not move here fine and this condition is also fine and let's try to add sorry update and existing image so let's try to update it to this image and let's see now we have the old image and New Image also so here here it is our old image very fine and here we have entered into this section and we have deleted the old image successfully okay so now let's change its profile picture also so let's put this profile picture here and okay so we are absolutely fine here Okay so we have completed the section let's close this guy and remove it from here now we have seen that how to add new record in the existing table and how to add table to existing database now what we are gonna learn We Are Gonna Learn to scale fold or item so stop scaffolding is a way that create things for you automatically so in this case we are creating the pages automatically here so what we are going to add here the category folder okay inside this folder we are going to right click on this folder and add and now click on this new scaffolded item and here in the last you will see razor Pages using Entity framework grid so click on ADD it is asking us few things which model cars we are going to use we are going to use this category okay and the context class will be database context and here we have to select this use layout page and it is going to be our pages and share this is our layout page okay and it is saying that leave empty if it is set in reader view start file and we have set our layout page here in the view star.cs HTML page so leave it empty and click here on ADD and it is gonna take some time so it is done and if you see here you can see it has automatically generated these five pages for us and these are these five pages so we have some little bit error here because we have to change this category to this data dot category now we are good to go okay so this section is done so now in delete pages and we have to do same in all the pages let's do here and close this page let's do it here also we are done here and let's do it here also okay we are good now let's do it here in this page also okay we are good so let's close this guy and let's open this shared folder and open this in the app section we are going to create a navigation link for the category and what we are going to do we are just going to write here category and ASP page asp [Music] page equals to person sorry category slash index okay let's run this project so here we can see this category section and okay so let's click on this category fine till then we can do one more thing let's remove that junk from here and right now we do not need this thing so let's comment this and if you don't know how to comment this thing so just right here go here and you will find something here actually I'm not seeing anything here right now so leave that thing just select this section and press Ctrl K C it will comment this thing out and if we select this thing and press Ctrl k u it will uncomment this okay so it is the shortcut for commenting and the long way is go select this thing and go here edit in advance and here the comment section comment selection so here Ctrl K Ctrl C for uncomment control K control U so click here okay now let's see this thing has removed or not it should be removed okay okay now we are fine so if we click here in the create new button let's create this thing and it have some messy design issues and we can change it later if we want so let's add a category let's category name its clothes fine let's create one more thing here and name it accessories and let's name it shows something like this last name another category and put it something like that let's put some random category category one so it is working fine clothes category one so let's click here in edit section and we can change it to category two it is working fine let's create okay if we click here in details we can see this detail go to back and if we click here in delete section it is asking us do we want to delete it yes we want to delete it so it works fine and design always works fine with the default bootstrap design that is provided this page but we have changed the design so we have to change these things also so it is not very useful in all the cases we always create these things by ourselves so it is an option in the in the dot net core or dotnet area so that's why I am showing you these things okay so here that's how our scaffolding works so right now I am seeing a little bug here if I click if I click on this link then if I click on this home button privacy and this category nothing is getting changed and why it is happening so if I remove this link everything is working fine but if I go there in privacy then I try to move back to the person it is working fine but after that if I click here are here I'm not able to move into those pages so why it is happening because we have to add this forward slash in the beginning of the page name or URL so let's add all of these things here into all of the links and I have forgot in the beginning to add these forward slices so let's put it here and let's save this project okay so it is getting saved and it is saying us to rebuild again so here the heart load option failed okay so sometimes this hot reload when works it's really amazes me but when it does not I really hate it and it is not a very very accurate feature right now it needs lots of changes to be done so now let's click here in the person tab let's click on this privacy tab now go here and here and everything is working fine right now so let's move back here here okay so everything is working just fine so now we have completed this course I hope you have enjoyed this course and I will put down the link of the source code of this project in the description box so you can find the source code in the description box so if you find this video helpful then please hit that like button and let me know in the comments how was your experience with this project or this course if you have any suggestions you can also put those in the comments and if you haven't subscribed this Channel Please Subscribe it so that you won't miss any content from this channel so that's it for now see you next time

Channel: Ravindra Devrani

Views: 8,361

Keywords: asp.net razor pages, razor pages course, razor pages tutorial

Id: QmoCAjYDYSI

Length: 181min 59sec (10919 seconds)

Published: Sat Jan 07 2023