Learn ASP.NET Core 3.1 - Full Course for Beginners [Tutorial]

Hi guys, and welcome to the course on introduction  to ASP dotnet core 3.1. My name is Megan and I   will be our instructor on this introductory  course, we will understand the basics of   ASP dotnet core, the reason behind its evolution  followed by the new files and folder structure   that have been introduced. Once we understand  that, then we will take a look at new concepts   like middleware, routing, tag helpers, Razor  syntax, and much more. Now, with ASP. NET Core,   there are two ways to build a web application.  First approach is MVC application. And the second   approach is razor pages application. We will  be building projects in both the technologies   to understand how the basics work. Both the  projects will be built with a basic crud website,   which stands for create, read, update and  delete functionality. So we will understand   how to connect with database and playing with  Entity Framework in our ASP dotnet core web   application. Now, before we start, there are some  prerequisites that you should be familiar with,   I would say about three months of coding in  C sharp and familiarity with basic SQL will   be sufficient. Also, if you're stuck with the  course, my code will be published on GitHub   repository. So you can always follow along with  each lecture. And if there is something which   still does not make sense for you, you can always  raise a question, and I will be happy to answer   that. But the first approach you should take  is compare your code with my version on GitHub,   and try to identify the differences. This way, you  will try to identify the errors yourself. Now this   would be a basic course on ASP dotnet core, but  it will give you have a solid foundation before   you dive into deeper and complex courses. At  the end if you are interested in more detail,   and in depth courses, I have courses on both MVC  as well as razor pages with ASP dotnet core. And I   will also show you how you can enroll into those  courses for the lowest price. That being said,   let's get started on this exciting journey to  explore the basics of ASP dotnet core. And I   will see you in the next video. In this course,  we'll be building two projects, first will be   a simple Razer project. And second one will be  our main project which will use MVC. So let me   demo the first project that we'll be building.  It's a simple book list raiser project in which   if you select the book tab, it will display a  list of all of the books. Now here in the list,   you can see two types of tables. That is because  at the end, here we are using data tables, which   makes call of API. On top here we have a simple  table using th en tr tags here, when you create   a book, if you try to enter without anything, we  have validations once you enter the details to   create a new book, and you hit the Create button,  it creates the book and displays in both places.   here when we use data tables, if we click Edit  here, and if we change something that will make   it a capital W and updated, there you go, you can  see it is updated. If you try to delete anything,   it will display a suite alert to you. That being  said, we have multiple ways. As I was saying   before, in the Create new book, you will see a  new page called create. But if you go to absurd,   it will be the absurd page. And that will be the  same page that we'll use to edit. If we go right   here. You see it's absurd. And if you look right  here, it will be again an added page. So this is   more of a simplified view. And then at bottom,  what we see is more of an advanced view. That   being said, we are performing CRUD operations  on our book. But this project is not just that,   we'll be learning razor pages and how page model  and page view comes into the picture. So even   though this is a small project for crud operation,  that is lots of basic functionalities and basic   fine overview that you need to understand. That  being said, let's take a look at the demo of   our final project, which is way more advanced  than what you see right here. In this video,   let me walk you through the small project that we  will build using MVC. This will be a very basic   project to create CRUD operations on book list.  So right here, if you go on book list, we will   be using data tables to display all of the list  from the database. You can add a new book here,   you can fill in the details. But let's say if  you do not enter a name, we see validations that   have been enforced here. That being said, you can  create a book and once it is created, you can edit   any of the details here. And you can also delete  book. When you delete we have nice alerts that you   can display here. And once it is successfully  deleted, you will also see nice notifications.   So this is a great project to get started with  the MVC journey and learn what ASP dotnet core   has to offer. In this video, I want to give you  a small introduction on ASP dotnet evolution.   asp dotnet core introduces probably the biggest  shift the platform has experienced so far,   but let's take a look at how it has evolved over  time. In 1996, Microsoft released framework known   as ASP, which stands for active Server Pages, or  classic ASP. With classic ASP Microsoft made it   possible to have server side scripting to dynamic  web pages. The biggest revolution came when   Microsoft released dotnet framework. Microsoft  introduced ASP. NET webforms in 2002. This made   creation of web page similar to the creation  of Windows form. There are a few downsides with   web forms, web forms, tried to make stateless web  stateful. And in order to do that, it had to make   lots of changes to make sure web pages retain  their state or their values automatically. View   states contained those values, and that resulted  in a lot of data being generated and transferred   with each request. Sometimes even if it was  not required. webforms was the first version   to introduce code behind code behind is good, but  it makes testing difficult. Because in one line,   we are reading from the database, and in the next  line, we are updating the UI. Another common issue   was page life cycle. When requesting the page,  number of events were getting fired. Getting to   know all of these events was quite easy to get  it wrong. Although there were a few downsides,   web forms were generally successful to get site  up and running quickly. Couple of years later,   in 2009, Microsoft released the first version  of ASP NET MVC, and they tried to overcome most   of the problems with webforms. It had emphasis  on separation of concern. MVC code is typically   much easier to write unit test for MVC was the  first edition where they released it as open   source. Now a lot of developers did not like MVC  framework because it had its own flaws. When it   was created. It was built on top of the components  already created for web forms, because of which it   was closely tied to system dot web, which was tied  to IIS and eventually windows. On the other hand,   web is evolving quickly. And hence Microsoft had  to keep MVC with everything that was changing.   Also, MVC was built before cloud came into the big  picture. Even though a lot of MVC applications are   still running on cloud, but it is still not build  with cloud in mind. Finally, in June of 2016,   Microsoft released ASP dotnet core and this was  the first version. Now ASP dotnet core is built   on top of the new dotnet core framework dotnet  core is the very first platform version of dotnet.   And hence, it is not tied to just wait knows ASP  dotnet core as compared to the old version of MVC   is not tied to the dotnet framework assemblies  like system dot web. asp dotnet core team has   been very active with the new versions. And then  in 2017, they released dotnet core two followed   Buy 2.1 and 2.2 in 2018. Finally, in September  of 2019, ASP dotnet core three has been released,   which we will be using in this course. In this  video, let me show you all the tools that we'll   need for this course. The first and most important  is Visual Studio 2019. This is the ID that we'll   be using. You can go on Visual Studio dot  Microsoft comm forward slash Bs, and you can   download the community version for free, make sure  you download the 2019 if it is 2017 dotnet, core   3.1 will not work. Next, what you need is you have  to download the dotnet core 3.1 and install it. So   if you go on the Microsoft website for dotnet  core 3.1. Here, you can download the windows 4x   64 and install it. Once you install it, then when  you create a project in Visual Studio 2019, you   will see the dotnet core 3.1 option, which I will  discuss when we get there. But make sure both of   these are installed. After that, you will have to  install the SQL Server 2019 you can use an older   version of SQL Server but I would recommend the  latest one, you can download it for free for the   developer version. Once you install SQL Server, I  also want you to install the SQL Server Management   Studio, which will be a UI to your SQL Server. So  make sure you install all four of these features.   And that are all the tools that you will need. All  of these tools are free, so you should not have to   spend anything to install these software's on your  laptop or desktop. In this video, I want to show   you where you will find all the code that we'll  be building. For that one place will be you have   to go to brogan.com. in there, I have courses.  Right now we are on the free course, if you go   on the details, if you click course content,  it will download the completed code. But if   you want lecture by lecture on what was changed,  you can click on GitHub code. Here, it will open   up both the projects that we'll be building in  this course. here if you see the comments, they   will be based on the lecture name inside raiser as  well for each lecture, you will see what exactly   was changed or updated. And you can make sure that  you have those same things If you face any issue   in a particular lecture. So procon.com and in  there, you have to go to the courses to find out   what course you're on. And in there in details,  you will find the GitHub link. In this section,   we will be creating our very first project, it  will be a razor project. And then once we created   we will take a look at the files and folders that  are created. With this we will also understand how   an ASP dotnet core application is started. And  what are the files that are involved. So let's   get started with all of that from the next video.  When you open up Visual Studio 2019 it displays   a nice page on the left hand side you can see all  the projects you were working on. And on the right   hand side you can see options to create a new  project. So right here, we'll click on create   a new project. And once you do that, it will  display all of the templates that are available.   Out of this, we will select ASP dotnet core web  application. If you do not see on the top view   options, you can always search for that template  on the top. Once you find the ASP dotnet core web   application, let's hit the Next button. And we  need a project name. Let's call this book list   razor, and we'll change the location. I'll paste  the location where I want to create this project.   After that, we'll hit the Create button. And  we'll have more options for our project. In here,   the first thing to notice is we have dotnet  core and the dotnet framework. We will be   using the dotnet core and what version we want to  use, we want to use the latest version, which is   ASP dotnet core 3.1. Once you select that, then we  have few templates here. We can go with an empty   application and API project, a web application  which uses the razor pages or we can create an   application with MVC. Our main project will be  built using MVC, but the first project I want to   give you an introduction To razor pages, here, I  will display a CRUD operations so that you can get   comfortable with razor pages, because that will be  used inside the identity in our MVC application.   So we'll get a basic overview when we build this  project. Next, we have the authentication here,   you can select individual users account for  authentication. But right now, we do not want   to do that. Because if we do that some of the  things will already be configured for us. But I   want to start from scratch in this project. So  we'll just create a web application with razor   pages. Then before proceeding, we'll make sure  the source is dotnet core 3.1. And we'll hit   the Create button. Perfect. So with this, we have  created our project, and we'll be taking a look at   all the files and folders that we created from the  next video. In this video, we will take a brief   overview on what are razor pages, Razor pages have  been introduced in ASP. NET Core 2.0. And since   then, they have become the default way of coding  with ASP dotnet core stack. razor pages is a new   feature of ASP dotnet core that makes coding page  focused scenarios more easier and more productive.   They provide a simpler way to organize code  within ASP dotnet core applications. Keeping the   implementation logic and view models closer to the  view implementation code. razor pages is not just   for simple scenarios, everything that you can do  with MVC, you can do the same using razor pages,   like routing models, action result, tag helpers,  and so on. Finally, Razor pages have two parts.   First is the UI, which is more like the view in  MVC. And then we have the page model, which is   a combination of models, as well as view models  and the controller action methods. Let me switch   back to the application that we just created and  give you a quick demo of both the component. So we   are on the booklist razor. If we go to Solution  Explorer, inside pages, we will have the razor   pages. Let's take a look at the Index page. If you  see the Index page has an arrow, and there is dot   CSS, HTML, and dot CSS, HTML dot CSS, if you open  the dot CSS HTML, that is the result view all the   UI of razor pages and then the dot CSS, which is  not same as the code behind file, it is just a   naming convention. But this is actually the page  model for our index razor page. You can see it   extends from the page model class. Inside this  page model, we will define the model for this   view. Right here you can see it is index model.  And if you go on index, you can see the class   name is index model. In here, we have handlers,  which are like the controller action method. Right   now we only have the get handler that is defined  here. But we will be adding a post handler when we   want to post anything from our view or the razor  page. Another thing to notice is the name for the   get handler it is prefixed with the on keyword.  Similarly, if you had a post handler, it would be   something like this, in which we'll have public  wide on post, and we'll have the implementation   within the brackets. We will undo the change that  we did because I just wanted to show that right   now. But as we proceed, we will be implementing  the handlers for our razor pages. In this video,   let's take a look at the project configuration  file. In order to open that you can right click   on the project not on the solution but on the  project. And you have the Edit project file.   Or all you can do is double click on the project  name and it will open up the project file. The   file name would be the project name and then the  extension.cs project. project file has been there   since a long time but the format of the file and  how it works is different in ASP dotnet core three   in the initial versions of ASP dotnet core, we  had files called Project dot JSON and extra large.   The new cs proj file replaces both the file. Now  right here you can see within Property Group, we   have the target framework, which is NET Core app  three dot O, which is what we are using for this   project. The target framework here is also called  a node. After that we will be adding more packages   into our solution. Let me show you a quick way  we go to Tools nougat package manager solution.   And if we go on browse, let me install any first  package that we have. We have Newton soft JSON,   so we just installed that, don't worry, we'll come  back and uninstalled this. But I want to show you   for demo purposes, how the project file will be  affected. Perfect This is installed. If you go   to the project file again. Now you see a package  reference with Newton soft dot JSON. So every time   you add a nougat package, a package reference  entry would be added here. Right now we only   have one of them, which we just added. And if we  uninstalled this, it will go away. If we go back,   this should be gone. Whenever we need to add  more packages, we'll be adding more packages   as per our requirement. Now, if you have worked  with previous versions of ASP. NET Core, there   was a new good for meta package. And let me switch  to the presentation for that. And here we will be   discussing what was the meta package and what is  done with that the package has been discontinued.   And now it is a part of the dotnet core class  library. They are now updated automatically   when you update the version of dotnet core. Prior  to three dot o as I said before, the meta package   was included as a new get package. But now when  you install dotnet core on your Windows or laptop,   that meta package is installed automatically.  Also, some of the packages have been moved out   from that meta package like Entity Framework core,  which has been moved to its own nougat package,   which we will be installing in the future videos.  So that was a brief overview of where the meta   package is. Now with dotnet core three, you will  no longer see the meta package Microsoft dot ASP   NET Core dot app, it has been moved within  the dotnet framework. So it is installed   automatically when you install dotnet core. So  that gives you a brief overview of the Cs proj   file. Mainly it is to reference all of the nougat  packages and the target framework. In this video,   we will be taking a look at the properties  in our folder. If you expand the properties,   you will see a file called launch settings dot  JSON. This file tells ratio studio what to do when   you press the Run button right here on the top.  By default, we have few profiles here. By default,   we have few profiles here. The first one is the  IIS Express, which will launch IAS Express, which   will host the application and start a browser that  will hit the URL. It will also set the environment   variables to development. In this case, we can  detect the environment variables and make changes   based on that example, if it is development with  a load the full CSS and if it is production, then   we will load the minified version of CSS. There is  also a section to configure the IIS Express here,   you can set the launch variables here if you  scroll down further, we have another profile   called as population raiser, which is the project  name, it will run the application as a command   line application. So the internal castril which is  internal web server would be used, then a browser   would be started which hits the URL. These can  also be set by going into the properties of the   project, not the solution. And if we go on debug,  we have all the profiles right here. And you can   set the environment variables URL, SSL, and other  configuration. We will not be altering any of this   but I wanted to show you an overview of what it is  and where you can change that. Also inside the run   here, you will see all the profiles. So you can  select anyone to run your application. The next   thing that will be Taking a look is the www root  folder. If you expand this, you will see folders   for CSS JS level. This is a new thing that has  been introduced with ASP. NET Core. And this   has been created automatically. In this folder, we  will be placing all the static files like images,   CSS, JavaScript, and also static HTML. This folder  is the root folder for our website. None of the   code files that we'll be creating will go inside  this folder. So you shouldn't be placing any C   sharp or razor files here. This folder has been  created with an idea of having a nice separation   between code files, and the static files. Since  we created the application using MVC template,   we can see that Visual Studio has already placed  few bootstrap, CSS and other static files for us.   If you expand CSS, you see site dot CSS, with  GS, you have site or chairs. And inside the lib   folder, we have bootstrap, jQuery validations,  and some other scripts. Now the reason we have   all this CSS and JavaScript by default is we  created the web application as a razor page. If   we selected an empty application, we would have to  add all these files by ourselves. If you want to   explore that option, you can go ahead with that.  But with believing right is when we'll be adding   more CSS or JavaScript will always do that inside  our www root folder. So that is the one place for   all of your static files. In this video, we will  be taking a look at the pages folder inside our   razor project. So the main folder inside any razor  project is the pages folder. In here, we will have   all the pages that we want for our website, inside  the pages folder using a shared folder. And if you   expand this, we have underscored layout and  validation scripts partial. Now the name of   these two razor pages starts with an underscore,  which means they are partial views. Now partial   pages is something like user components, which  means you can reuse them in multiple places in   your website. The first one here underscore layout  is the default master page for your application.   So if you open this up right here, you see we have  the header for our application. You scroll down,   we have the main part, and we have the footer. We  also have the scripts that we want throughout our   application. And if you scroll up right here,  we have the CSS files. You can of course change   the default page that you have for the master  page. But we will keep it the same. And right   now it is underscored layout. Next, what we have  is validation scripts partial. Here we have just   included the JavaScript or jQuery that we will use  for validations. And in the pages where we want to   include that, we can just include this partial  page. After that outside of the shared folder,   we have the view import. Now with dotnet core  2.0. When above, we have tag helpers. And we will   understand in detail about tag helpers in just a  little while. But in the view import, you define   that you want to include tag helpers in your  application by adding this one line, which starts   with x tag helper. You can also add custom tag  helpers here if you create your own tag helpers,   and you want to register for this application.  You can also add your custom tag helpers that   you want to be used in your application. If for  some reason, you only want to use tag helpers for   some features, rather than defining this at global  level, you can also define it at individual page.   But I like to define it at the global level in  underscore view inputs so that when I need it,   it is already present. After that, we have the  underscore view start file. And here we define   which is the master page that we'll use for our  application. Right here you can see underscore   layout has been defined. After that what we have  the rest three are the actual razor pages. So   you can think about whatever we discussed so far  are more related to configuration master page and   user component. Then we have the Edit page, index  page and the privacy page. Now if you open up the   index dot CSS HTML right here you see the UI, or  the user interface with HTML and CSS. But where   is the page behind or the model defined here?  In MVC, we used to have controllers, but we do   not have that anymore in the razor pages. So if  you expand this, you see there is index dot CSS,   HTML dot CSS, and this is inheriting from page  model. And the name here is index model. If you go   to the Index page, you will see the model is the  same name. So whatever we define inside the page   model here will be used as the model for the index  razor page. This page model will be a code behind   for our index page. This is nowhere as close  to what we had in the classic ASP dotnet code   behind. This is completely rewritten and in a  completely different format. And we will call   this.cs file as the page model. And the.cs.  html will be the view or the razor page. Now   that we have a brief overview of where what code  goes, let's see routing in the next video when   we will see the index privacy and the application  coming along. One of the top level considerations   for the developer of a server side web application  framework is how to match URLs to the resources on   the server so that the correct one processes that  request. The most straightforward approach is that   you map URLs to the physical files on the desk.  And this is the approach that has been implemented   by the ASP. NET core team for razor pages  framework. Now there are some rules on how razor   pages framework matches URL to files, and how  rules can be customized to give different results   if needed. The first rule is that razor pages  needs a root folder. By default, the folder has   been named pages, and its location is inside the  root folder of the web application project. You   can configure another folder as the root folder  in the application configuration services method   inside the startup class, but that is beyond  the scope of this course. So we believe that   as the default page, if we have any requirements  that we had to change that, we would of course,   take a look at that. Let's switch back to the  application that we have. Right here you see the   root folder is the pages folder, and all of the  pages resides inside that. Of course, we can add   areas here and we can add pages inside the areas  folder, then that will become the root folder for   the application. Another rule is that the file  extension should not be included inside the URL   bat. So right here you see index dot CSS, HTML  inside the URL will only mentioned index. Then let   me switch back to the presentation. And the third  rule is that index dot CSS HTML is the default   file. Which means if a file name is missing from  the URL, the request will be mapped to index dot   CSS HTML inside that folder. Now let's take  a look at few examples. In the first example,   we have www.domain.com This will map to the pages  folder and then look for index dot CSS HTML page,   since we have not defined anything in the URL  index is the default page. In the second example,   we have www.domain.com forward slash index.  Again, in this it will look for the same index   page inside the pages folder, because we have  explicitly defined the Index page. Finally,   we have www.domain.com forward slash account.  Now here it has two ways to find the page. First,   it will try to find inside the pages folder.  First, it will try to find inside pages folder,   a file named as account dot CSS HTML, if it finds  that it will render that if it doesn't find that   then it takes that account could be a subfolder  name under pages. So it will check inside the   pages folder if there is a folder called account.  And inside that it will try to find index dot   CSS HTML. So we have few examples here for  routing. Let's see this in action. Let's go   to our project and run the application. In here,  you can see the URL is localhost, and we do not   have anything else. So that means by default, it  is loading the Index page. If we go back to our   application Solution Explorer, double click index,  you can see the text is welcome. And that is what   we are seeing right here. If we explicitly defined  index here, it will still load the same page. Now,   if we click on privacy, here, you can see it is  adding privacy. And if we go back to the solution,   privacy is inside pages, so you can directly  access that. Let me stop the application and   show you something else. I'll add a new folder.  And I'll call this with my name, again here,   and I've been moved privacy inside again.  Let's run our application and try to access   the privacy again. If we click here, it will not  load anything because privacy doesn't exist in the   same location. In order to access that you have to  type again, forward slash privacy. And with this,   it loads the privacy page correctly. So that  way, you can see that the linking of all the   pages is exactly what you see here. I'll move  the privacy back inside the pages folder,   and I'll delete my folder, not renamed. Perfect.  So this was a brief overview on how routing works.   And we'll be using more tag helpers and routing  as we proceed with the course. In this video,   we will take a look at tag helpers. Tag helpers  are brand new to ASP dotnet core, Microsoft looked   at the success around the other libraries like  Angular JS, react, and others, and decided that   implementing an Angular directive like experience  in the new ASP dotnet was so important to the   adoption of ASP dotnet core, and because of which  they decided to create tag helpers from ground up.   Tag helpers enable server side code to participate  in creating and rendering HTML elements inside   the reason files. Do there are similarities  between Angular directives and tag helpers,   there is a major difference. Tag helpers are for  server side rendering, while AngularJS directives   are all about client side rendering. Now you might  be wondering how tag helpers are compared to HTML   helpers. If you have worked with previous versions  of dotnet core HTML helpers are really just   methods throughout your razor markup. Tag helpers,  on the other hand, are very focused around HTML   elements and much more natural to use. Now let's  switch back to the application. And let's take a   look at few tag helpers that we already have. In  here, let's go on the Index page. And we do not   have any tag helpers associated inside here. But  if we go on underscore layout, there should be   plenty of tag helpers. Right here you can see the  tag helpers ASP area and ASP page. When we have to   redirect to any of the razor pages, we will use  the tag helper ASP page, and then we'll define   the path. Right here we want to go to the Index  page which is inside the pages folder. Hence,   we have defined forward slash index. Then if you  scroll down with more navigations, we again have   those tag helpers. If you scroll down further,  right here, we have another tag helper. And with   the script, we have the ASP up and version tag  helper. We will be using more tag helpers for   labels, forms and all of the buttons. But we'll do  that when we proceed. But the main thing about tag   helpers is you can use your regular HTML tag. And  you can just append a tag helper like you can with   other JavaScript frameworks. Also, I want to show  you few similarities that we have between the HTML   helpers and tag helpers. Both HTML helpers and tag  helpers performed the same functionality. But here   you can see that the label tag is so not HTML  friendly for HTML helper. But when you use tag   helper, you'll be using the same label tag class  attributes. All you have to do is add ASP for   tag helper. If you do not understand all of this  right now, do not worry as we proceed and start   coding This was start to make much more sense.  In classic ASP dotnet core in the system dot web   assembly took care of starting the application,  and global dot ASX had the methods in which you   could provide custom logic. The steps needed  to start up an application are now determined   by you. And that starts with the program class  file. The program class contains a main method,   which is the entry point for the application.  When the runtime executes the application,   it looks for this main method and calls it most  dotnet applications startup using the main method.   The application initially starts as a command  line application, the main method configures,   ASP, dotnet. Core, and start. So let's switch  back to the application and take a look at this.   So right here, we'll go to Solution Explorer, and  we have the program.cs. In here you see we have a   main method. Here, the configuration is done by  calling create host builder, which is a method   in the program class that returns I host builder  on that object build and run is called. And from   that point onwards, this application has become an  ASP dotnet core application. Create host builder   calls create default builder on a static web host  class, that configures the web host using default.   It deals with the configuration on how ASP. NET  Core deals with web server configuration files,   routing, and so on. You can see on top of the  default configuration, done by the Create default   builder to web builder is also configured to use  a startup class file. And if you go on the startup   class file by pressing F 12 here, or you can go to  Solution Explorer startup class file. Right here   you can see startup class is a simple class not  deriving from any other class. The runtime will by   convention, call two methods here. First is the  configured services. And we have the Configure   method. Let's take a look at both of them and the  startup class file in the next video. As we saw in   the previous clip, the runtime executes main which  among other things, configures, the startup class,   the runtime will call methods configure services  at Configure. Here we have an icon figuration   object that is being passed as dependency  injection to the startup class. Here with the   Configure services it is written, this method gets  called by runtime, it is used to add services to   the container. The purpose of configure services  method is to configure dependency injection,   dependency injection in classic ASP dotnet  was optional. In ASP. NET Core, it forms an   integral part of the ASP. NET itself. This method  add services to the application to make them   available, you get the service collection object  that is injected into the matter as parameter. Now   you can use this to build on the services that  will be available to this application. Examples   of the services would be Entity Framework, core  Identity Service, MVC, and many more. By default,   you will have the Add razor pages available,  you will not have the razor compilation here.   So do not worry, it should look like this, you  will only have the Add razor pages. And this is   because when we created the project, we selected  that we want the razor pages. The other method   is the Configure method. And here this method  is used to configure the HTTP request pipeline.   The pipeline specifies how the application should  respond to HTTP requests. pipeline is composed of   individual parts called middleware. Let me switch  to a presentation to explain that better. Now, in   any general scenario, what we will have is we will  have a browser and then we will have a pipeline in   which we will make a request and we will get back  a response. The individual parts that make up a   pipeline are called middlewares. Let's consider  a few of the middlewares that we can add in a   pipeline. One of them can be MVC, and then we You  can also add authentication and static files. You   should notice that when we add authentication  middleware, it should be done before we add MVC.   And the order is important. The reason is we do  not want to load MVC and then find out that user   is not authenticated. We also have to configure  a middleware for static files in our project,   like HTML files, images, CSS, or JavaScript files.  Now when the data travels through the pipeline,   it gets manipulated by individual middlewares. And  so does the response or the result. Let's take a   look at a 10,000 foot image of what happens  when this request is made in the next video.   So when the request is made from the browser, it  first arrives at a web server like a yes is will   then invoke the dotnet runtime, which would load  the CLR and then look for an entry point in your   application. It will find that in the main method  of the program class and execute it, which starts   the internal web server in your application,  we will have cash rule in our application,   the main method and the startup class would  configure the application and the request would be   routed from is to cash flow, and then it will be  pushed to the application. After that it will be   processed by all the middlewares and the generated  response will be routed back to the cached role,   which will route it back to the is that will  finally produce the response on the browser.   This is much more efficient than the old  system dark web approach. Classic system   relied heavily on system dot web, which was  tied to IIS. But using a pipeline approach,   we only plug in the middlewares that we need.  Everything we plug in is in a separate assembly   exposed in a new get. Now since system ductwork  was tied to is and is is tied to Windows, that   is the reason you cannot run classic ASP dotnet  on other web servers, then IIS and Windows. Now   since that is no longer the case, ASP dotnet core  applications can be run on web servers and other   operating systems. One thing you should keep in  mind is that there are two web servers. One is   external like IAS or Apache or Linux. And that  is also an internal web server hosted by your   application request from the external web server  are passed to the internal web server and other   way around. You can choose different internal web  server, but most common is cashkaro. Since it has   first class support in ASP dotnet core. Cash Flow  is a lightweight web server which can only execute   a request. Because of age, you need external web  server to configure other options like security,   hashing, and so on. This was a brief overview on  how middleware and pipeline comes to the picture.   Let me switch back to the application that we were  looking at an inside the Configure method. You can   see we have plugged in multiple middlewares  using App and then the middleware name,   we check if it is development, we want to  use the developer exception page or else we   want to use just a generic error page. Then  we have the HTTPS redirection middleware,   we have the middleware for static files. Because  of the static files middleware, we will be able   to use the CSS JavaScript and images that we will  add inside the WW root folder. Then we have the   app dot use routing. And then we have app dot use  authorization. Finally, we have used endpoints   with dotnet. Core three, they have introduced  endpoint routing, in which you can configure   multiple routes. We will understand why we need  this and we can configure more than one endpoints   here for different technologies, which we will see  in upcoming videos. But right now the main thing   to consider is you can see how we are plugging  in different middlewares. Now we have used the   terminology middleware quite a few times. So let's  actually understand what middlewares are. Now that   we have seen the overview of how Application  flow. Let's understand middlewares and pipeline   in much more detail. Whenever an HTTP request  comes in, something must handle that request.   So it eventually results in an HTTP response.  Those pieces of code that handles the request   and results in a response make up the request  pipeline, what we can do is configure this request   pipeline by adding middlewares, which are software  components that are assembled into an application   pipeline to handle request and response. So  typically, a browser is going to send a request   to your server. And that request is going to  be interpreted by the server, and handled by   some piece of software. Now first, that request is  attached to something called as the context object   as a part of software that manages this context.  In our case, it would be ASP. NET Core middleware,   you can essentially Think of it as a pipeline,  which is a series of pipes, that is going to   determine what is going to happen to the context.  So first, the request is passed along the first   pipe, and the first pipe interprets the context  and checks out the request and determines if there   is some type of response needed and attach that  to the context. If there is no immediate response   that should be handed back to the server, then the  context is simply passed along to the next pipe in   the pipeline. This continues, again to the next  piece of middleware, whatever it might be, and it   goes on till it reaches the very last pipe. Now,  it is also possible that at end of the pipeline,   no response has been found. And that will cause  a 404, not found and written back to whoever   originated the request. However, it is possible  that in any one or more of these middlewares,   there may be a response that needs to be passed  back. And it could happen in any of the pipes.   So sometimes it could happen that middleware  would not pass the context along the next piece,   but rather says, Okay, I have a response  that I need to send back. But typically,   your context will go all the way through  the pipeline to the end, by the last piece   of middleware sends a response, which gets back  through the pipeline to the server, and then the   server sends back the response to the browser.  This is a very simplified version of how request   works. Let me just walk you through that, again,  in a brief overview so that this makes complete   sense. When the request comes in to the server.  The server then accesses the dotnet core framework   and puts the request into a context object, the  context gets passed along to the middlewares. And   if a middleware has a response anywhere along  the way, then it will attach that response to   the context object, and then pass that context  object back through the pipeline to the server,   and then the server sends back the response to the  browser. Now keep in mind, the order of pipeline   is important. It always gets past from the first  to the last. A good example will be authentication   middleware. If the middleware component finds the  request is an authorized, it will not pass it to   the next piece of the middleware, but it will  immediately return an unauthorized response. It   is hence important that authentication middleware  is added before other components that shouldn't   be triggered. In case of an unauthorized request.  We will be adding more middlewares in our project,   but we'll do them as we face the requirement for  that. Another file that we have in our project is   app settings dot JSON. All of the application  settings are contained in this file. And any   changes to the app settings dot JSON file will  require restarting of the IIS administration to   take effect. Let's switch back to the application  and take a look at this file. So if we go here,   we have the app settings dot JSON file. In  here right now you see we only have logging   we have log level and few other details. We will  be adding more settings here for connection string   and also if you add new other data details like  maybe something related to dependency if there   are some security keys or anything, you can also  add them here. You can also store them remotely   on a server. But app settings is generally a  place where you have them when you're initially   developing. In the future videos, we will be  adding more settings here like connection strings,   and we'll be accessing this variables inside  the startup class file when we use dependency   injection. So that's the brief overview of the  app settings dot JSON file. ASP. NET Core supports   dependency injection software design pattern,  which is a technique for achieving inversion of   control between classes and their dependencies.  Now, you might be wondering what is IOC or   inversion of control container. IOC container is  a framework for implementing automatic dependency   injection. It manages object creation and  its lifetime and also injects dependencies   to their class. IOC container creates an object  of the specified class and also inject all of the   dependency objects through constructor property or  method at runtime, and disposes it at appropriate   time. This is done so that we do not have to  create and manage the objects manually. Support   for dependency injection is built into ASP dotnet  core. In ASP dotnet core, both framework services   and application services can be injected into  your classes, rather than being tightly coupled.   dependency injection is a design pattern in  which a class or object has its dependent classes   injected, rather than creating them directly.  dependency injection can help developers decouple   the different pieces of their application. Let's  try to see this with an example. We have Bob here   who has been thinking about going on hiking. So  he makes a list of all the supplies like maps,   flashlights, protein bars, etc, and puts them in  a backpack. Now next day, when he goes on hiking,   he takes the backpack with him. This pack acts  as a container. So during the hike, whenever he   needs anything, he takes it out of the container  and uses them. This is the simple concept that   you put items you will need in a container. And  when you need them, it already exists inside a   container. Let's understand this in a way that  is more related to coding. Let's imagine our   application have three pages. And in each page, we  will need three functionalities, we need to lock   something we need to send email, and we need to  save something to our database. So we will need   to create objects of these functions. In classic  days, we'll be creating objects of email, database   and logger in the first page, then we will do the  same in the second page, and so on. But this is   different with dependency injection. Let's take  a look at that. With dependency injection. Again,   we have the same three pages, and we want the  same three functionalities or the classes,   we have a dependency injection container, what we  will do is we will register all the three classes   inside our container. Whenever any page will need  anything, we will directly extracted from that   container. Rather than creating the new object in  individual pages. It is created and registered in   the container, we only have to use this. This way  container deals with creating, registering and   disposing of the objects rather than creating them  in every page. This is how efficient dependency   injection is compared to the classic approach. Now  that our project is created in this section, we   will start building all the functionalities in our  project, we will first add the model that we want   to and push it to database. After that we will  perform CRUD operations on book list. With that we   will complete our project with the razor pages and  you will see how everything comes to picture. So   let's get started with all of that from the next  video. In this video, we will be installing Our   first nougat package. So for that, let me run the  application and show you why we need that package.   So when you hit the Run button, it will load  our website. And you can see the default layout   that we have. We have a homepage and a privacy  page. Let's go to our home razor page and edit   this text. So for that, we'll switch back to our  application. And we'll go to Solution Explorer,   all of the pages will be inside the pages folder.  When we double click on index dot CSS, HTML, and   right here, while the application is running, with  an add my name, plug in here, save it, go back and   refresh. You can see the refresh was successful,  but the content here did not change. This was an   existing feature before ASP dotnet core three.  But with three, they have decided to add this   auto refresh for the view as a separate package.  So we'll stop the application, we'll go to Tools,   nougat package manager, and manage nougat  packages for solution. Inside the Browse tab,   we will search for Microsoft dot ASP NET Core dot  MVC dot razor dot runtime compiled nation, we have   to install this package inside our booklists to  raise our project will accept this. And once the   installation is complete, we need to make one  change inside our startup.cs class file. And   we have the Configure services method. In here,  while we have the dot add razor pages, we will   have dot add razor runtime compiler nation. After  you add this line, if you press f5 or hit the Run   button here, it will load the website again. And  the content will be welcome again right now. Let's   see that perfect. Let's switch back. Let's go back  to our index and remove again. And let's refresh   the page. And this time, it should automatically  reload and it should display welcome. Great,   you can see that in action. And with this whenever  you will change anything inside the razor UI.   And you come back here while the application is  running, and refresh, this should automatically   refresh. This is one of a core package that is  needed for developers. Because we are many times   dealing with the view, we make changes, we come  back and we want to see the change rather than   restarting the application. In this video, what we  will do is we will be adding our first model. Now   models represents any table that you want in your  database. In this project, what we want to do is   we want to manage a list of books so far that we  will add a model or a table called book. In order   to do that, in our project, we'll write like add,  let's add a new folder to separate things out. And   we'll call this model. Inside here. We'll right  click, add a new class file. And we'll call this   book. Then in here, we will add few properties.  First, we'll be the ID. So we'll say prop. This   will be an integer ID, this will be a unique key.  So we can add a data annotation by typing key. And   if we do control dot here, you'll see using system  dot component model data annotation, what key will   do is it will automatically add ID as an identity  column. So that way we do not have to pass the   value, it will create an ID value automatically.  Along with ID we also want name of the book. So we   do prop screen and name. Then we want the author.  So we'll do prop again, prompt is a snippet for   property. So if you type prop and hit Tab twice,  it will automatically create a property. We'll   call this as author. And let's make a string. Now  for name I want to display book name. so far that   we have a display attribute and we also have a  required data annotation. Let's try the required   first when we do required This means that name  cannot be no the display data annotation I will   add it as we proceed with the course. So this  looks good for my book and these three properties   should be sufficient Once we have created this  book, next thing is to add this to database. For   that, we have to add few packages for Entity  Framework. And we have to set up connection   string. Let's do that in the next video. Now that  we have added a book model inside our project,   we need to set up the database. In order to set  up the database, we need few packages. So we'll   go to Tools, nougat package manager, and package  manager solution. Here, the first package we want   is Microsoft dot Entity Framework core, we'll  select this, the version is three dot o looks   good, that's installed this. These are all the  Entity Framework packages that we are needing,   because we'll be using Entity Framework to Access  database. After this, we need that SQL Server.   So we'll search for that. And we'll be using SQL  Server. So we'll add this package as well. And the   final package that we'll need is Entity Framework  core dot tools. And this is required because we'll   be running migrations, I will explain you in  the next video what exactly migrations are,   so don't worry, but these are the three packages  that you need. If you remove and close this,   your application should have this four  packages right now. Okay, so with this,   we have installed all the necessary packages.  Now we need to set up our connection string.   Let's go to SQL Server real quick. And in here,  when you try to connect, you need a server name,   the server name that you see right here, local DB  in bracket backward slash MS SQL local dB. This   is the default server name that SQL server has.  So right here, we'll use this in our connection   string. So let me just go back. And the connection  string that we'll be adding will be inside app   settings dot JSON, as I explained before, so  for connection string right here before logging,   let me just paste that. This is what you need  to write. It will be connection strings with a   plural s at the end. And we'll set up a default  connection, you can give default connection, any   other name that you want. Then for the CRN world,  we have the exact server name that we see inside   SQL Server, make sure this is aligned. And also  try to connect. Once you connect. This means that   this server name is valid. After that, you can use  the same server name here. Then for the database,   we'll create a new database called vocalist  raiser, make sure that you do not create that   database automatically from SQL Server, we will be  doing that using Visual Studio. So right now you   see we do not have published razor database here.  We'll go back we have the trusted connection true,   and we have the multiple active results adds to  true, I will be pasting this exact string with   the lecture as well, so that you don't have to  waste time to type this manually. But make sure   the server name is valid with what you have.  Once the connection string is in app settings   dot JSON. Next thing we have to do is we have  to configure our startup class file. And let's   do the configuration and brand migrations in  the next video. Now that we have the connection   string inside app settings dot JSON, it's time  to configure our configured services with Entity   Framework. In order to configure that we need an  application DB context or a DB context class. So   that class we can add inside Solution Explorer  model, right click Add a new class. We'll call   this class application DB context. Let's add this.  Now the application DB context should inherit   from DB context class, which is a class inside  Microsoft dot Entity Framework core. After this,   we need to implement the constructor. And we  have to pass the DB context options to the   parent class. So for constructor we have a snippet  called CTR, and we'll press Tab twice. Right here,   we have to pass the DB context options. And in  here, we need the application DB context. We'll   call this options. This will have to pass to the  base and we'll pass the options here. This is an   empty constructor but the parameter is needed  for dependency injection. Once we have that,   then we need to Add the book model that we added  to our database. In order to add any model to the   database inside the DB context, you need an entry,  we will do public and this will be DB set of type   book. And let's call this property to blog as  well. Once you add this, the last thing that   you have to do is add the DB context inside  startup.cs. So inside startup.cs, we have to   add the DB context to our pipeline. So we'll say  services dot add DB context. And right here, we   have to pass our class name, which is application  DB context, we'll do our control dot here. And   we need to pass the options with connection  string. So we'll say options dot use SQL Server,   we'll have to do a control dot here. And the use  SQL Server we added as a nougat package. In here,   we need to pass the connection string from  our app settings dot JSON. So for that,   we can use the configuration object that we have.  So we'll just say configuration.in. Here, we have   to get connection string. And we need to pass  the name that we used for our connection string,   which is default connection. We'll copy this, and  we'll pass this in a string notation like this.   So this was the configuration that we had to do to  include Entity Framework inside the configuration   pipeline. Once you have this, all you have to do  is you need to push this to database. So for that,   we'll go to Tools new get package manager, this  time, we'll be going to package manager console.   And in here, the project name, it should be  published razor, we'll type the command add   migration, and we will add a meaningful name. What  we are doing right now is add book to database or   DB will press Enter. And what add migration  will do is it will create a script that will   be executed across the database. The script has  been created right here you see what the script   is doing is it is automatically creating a table  called book. And it is adding the columns ID name   and author. It is also making sure ID nullable  is false. And name nullable is false. Author   nullable is true, because if we go, we do not  have any required attribute with otter. Since   it is a key it knows that it is not nullable  in the constraint, it is also adding primary   key for the table. And in the annotation. It is  making sure that ID is identity column. So this   is the perfect script that is needed to create  the book table. Now right now only script has   been created with the Add migration command. How  do we actually create the database and create   the table. For that we have a command called  update database. Once you hit update database,   it will check if the database exists. If it does  not, it will create the database. And it will   also push the migrations. Once the update database  command completes successfully, you can go back to   your SQL Server and to the database. Let's refresh  it. Right now if you expand this and go on tables,   you see we have the book table that has  been created. And if you do select up 1000,   you will see the three columns. Perfect. So with  this, we created our database. And we also added   the book table with the properties that we wanted.  Now the purpose of this course is to perform CRUD   operations on this book object. So for that we  need pages to create a new book, edit a new book,   delete a book, and also view all of the books that  are available. So we'll go to Solution Explorer.   And inside pages, we have the Index page and  few other pages. All of the book pages. Let me   add this in a new folder. And we'll call this  book vest. In here let me add a new razor page.   So what you have to do is right click Add and  will add a razor page. We will go with the empty   razor page because going with this will solve our  problems, but we will not know what was done. So   we'll go with the empty razor page. And let's call  this index. What are all the options here? First   option is to create a page model class. As you  saw with the Index page, here, we have index page   as well as page model, we need a page model class  because we need to populate all of the books from   the database and pass that to the page to display  it. So that's why we'll need that, then this won't   be a partial view, a partial view is something  which is a small subsection, like maybe group of   buttons that you want to reuse in multiple places  in your website. But this is a complete page. So   that won't be a partial view. And we will use our  layout page because that is the master page. And   we want to be consistent. So with this, let's add  this. One drawback that I see with the razor pages   is when we will be adding index pages, it might  get confusing, because you see we have a master   index page. Inside vocalist, we have another  index page. So whenever you are working, make   sure you are working on the correct index page.  At this time, we'll be working on index an index   page model inside the book list. So if you have  any other pages open, you can close them. Inside   the Index page, what we want to do is we want to  retrieve all of the books from the database. So   for that, we need the application DB context.  Whenever you have to deal with the database,   you will need the application DB context. When you  added the application DB context right here in the   services, that means that you have added it to the  pipeline. Once you have added it as a pipeline,   you can use them using dependency injection. So we  need an object of application DB context, what you   will do is use a private read only application DB  context. And let's call this underscore dB. Now we   need to initiate our constructor. So we'll type  CT or our tab tab. And right here, we will get   the application DB context dB. This application DB  context we are getting using dependency injection.   So right here, we'll say underscore DB is equal  to dB. This way, you can extract the application   DB context that is inside the dependency injection  container and injected onto this page. If you did   not have dependency injection, what you would have  to do is you would have to create a new object.   And then once you are done with that, you'll have  to dispose that and all the other things. With   dependency injection, you do not have to worry  about anything. Now what we want to do is we   want to return a list or an ienumerable of book.  So we'll say public I enumerable. of book. Let's   call this books, we'll have the getter and setter,  what we will do is we'll assign this books,   all of the books from the database. How do we  get that it's way too simple. Because we're using   Entity Framework. We'll use a weight here. And  we'll say underscore DB dot books, you can see it   already has the book. And we have a method here,  which is to list and we'll call the async method,   we'll have to do a Ctrl Dart for the async to  use Entity Framework core. Now when you are using   async and await rather than why you will have to  use async task. What we are doing here is we are   going to database and retrieving all of the books  storing that inside the I enumerable. And we are   doing that inside the get handler. So when we  go inside the view here, we will already have   the list of books available to display. All you  did was right here, you extracted that and it is   already available inside your view to display.  Now one thing to notice is right now I'm using   await and async. What async does, this is a basic  C sharp explanation and not related to dotnet   core. So I won't be going into much details. But  async will basically let you run multiple tasks   at a time until it is awaited. Right here we need  to await because we need to assign all the books   that we found. But the method that we have is also  a sink and task. So this was all you had to do for   the get handler. Again, if it was MVC this would  be action methods, but with razor pages inside   the page model. We have handlers in the next week.  Do let's write some code here and see the list of   books. Now that we have added the get handler  method for the Index page inside book list,   it's time to add some UI. Here, the first thing  we'll do is we'll go to Solution Explorer. And   we'll go to our master page, which is underscored  layout. We have home and privacy, that may add a   book tab in place of privacy. And for that,  we have to change the ASB page. So for that,   rather than privacy, we will have foreclosed  forward slash index. And if you save this,   let's run our application. Once you click on this,  it should load the Index page. In order to see the   difference, you have to go here and let me type  index book save this. And let's click on the   book. Perfect, you can see the page is loaded. So  with this, you can see inside underscore layout,   how you had to manipulate the routing for the ASP  page tag helpers. If you want to access something   inside the book list, you have to write the book  list name, followed by the page that we have,   which is the Index page, then we can keep  this application running, we can go to index,   and we'll design this. So we'll just remove this,  let me add br, then let me just remove this index,   and we'll start designing this page. We also  do not need the view data, we can remove that,   we'll add a br and we'll add a div give it a class  of container. These are the bootstrap classes row,   padding zero and margin zero. Within this first  container, I'll add a div give it a class of   column 10. And I'll also add another div give it a  class of column two. If you are not familiar with   bootstrap, bootstrap divides a row into 12 equal  columns. So that's why I'm dividing one column   inside two separate columns. First will occupy  10 columns, and the next one will be the rest   two columns. Inside here, I'll use edge to give  it a bootstrap class of text info for a bluish   color. And we're display Polk vest. In here, we  will add an anchor tag. And we'll give it a class   of btn btn. info, and form control. These are all  bootstrap classes. And let's say create new book.   Let's save this. Let's go back and refresh the  page. Perfect. This is coming along good. Let me   increase the size here. So we can do column three.  And we'll have to make it column nine. Perfect,   this is good. We'll just make it text white  here. So right here, we can do text white. Okay,   this looks good. Now what we want to do is we want  to display a table with all of the books. Let's   continue working on the designing in the next  video. Let's continue working on the designing   right now we have the Create new book. But when  we click nothing happens, and that is because we   have not used any tag helpers on where it should  redirect. We'll do that in while after this column   nine and column three. Let me add another div  give it a class of column 12. We'll give it a   border padding three and margin top of three or  bootstrap classes. And we'll add a form here,   give it a method of post. Within this form, we  want to display this only if books exist inside   the table. So we can use razor syntax here like  if else condition. For that you need add sign.   And then you can use C sharp syntax like if and  we want to check if there are any books that are   returned from this get method. You can see inside  the page model we have the ienumerable as book.   So inside the razor page, you can say model with  a capital M dot. Right here you can see books is   available. This is the same box that is being  passed from the get handler right here. So we   can check if model dot books dot count. If this is  greater than zero, then we will display a table.   Else we will display a paragraph and say no books  available. Let's save this. Let's go back and   refresh and we should see no books available.  Now in order to see some books right now we   do not have the Create book page. So let's go to  database and hack some things. We'll right click   on the book at the top 100. Let me do one, one,  and any of the dummy record, we'll come back here,   and we'll refresh and that message is gone. And  that is because it retrieved one book that we just   added. So how do we display that? Right here, we  will have to add a table inside the if condition.   So we'll add table give it bootstrap classes of  table, table striped, and water. Within here,   we'll add a tr give it a class of table secondary.  And we will add a th for the table heading. Here,   we will use the label tag helper and the tag  helper we have is ASP for we will go to our   books. And in here, we want the first or default,  because the label we want for only one record. And   we'll say dot name. So this is how you can use tag  helper. You can also use HTML helper for the same   thing. Let me show you that for the author. So the  syntax for HTML helper was pretty weird. So it was   HTML dot display name for and in here, you will  have to use the lambda expression m goes to m dot   books dot first dot default dot author. Now you  can see how tag helpers have made this extremely   simple. It is the existing label tag, all you did  was add a SP four. So that's why tag helpers are   preferred over HTML helpers. But HTML helpers are  still there for some functionalities, which you   have to write custom tag helpers for. And I will  show you that in just a while. Once you have this,   let me add a th here. And I will comment this code  out. But I will leave there for reference. I will   copy this and paste it here for author. So this  was the table header, we will add an empty th tag.   After this we want all of the records. So for that  we need a for each loop. How do we get a for each   loop inside the view? Again, the answer is add  sign. And then we have the for each which is a   C sharp syntax, we'll say variable item in model  with a capital M dot books. So for all of the   books that we have, we will have item and we will  display a table row here. So we will add a tr tag   and inside the TD we want to display the value.  Now in this case, we do not have a tag helper,   but we have an HTML helper. The HTML helper  is HTML dot display for in here, we'll have   to use link m goes to item.we want to display the  name, we do not have an equivalent tag helper for   display for of course, you can write a custom  tag helper that can do the exact same thing.   But that is beyond the scope for this project. So  we can just use the HTML helper. We can copy this   and we'll paste it again for author. Let me save  this. Let's go back and refresh. And we should see   our record. Perfect. This was so easy. Now this  is not aligned. So we can do Ctrl A Ctrl KD to   align everything that we have. Last thing that I  want is in here, I want buttons to edit or delete   a book. So after this TD, and we'll add another  TD and ever give button, give it a class. Give it   a class of btn btn danger, and btn small these  are all bootstrap classes. And I will display   delete. After the delete button, we need a link  to redirect to the Edit page. So for that, we'll   use the anchor tag. And we'll give it a class  of btn btn success 10 we'll do btn small here,   this will be added. Let me save this and refresh.  And great this is good. We will not worry about   designing much things here. But this looks good.  In delete. I'll just do text white so that it   is aligned with the Delete. So with this we have  almost completed the Index page but we will come   back here later. Now The last thing that I want to  do on index page for this video is on create book,   I want to add a link so that it redirects me to a  create razor page. So for that right here, inside   the Create new book, you will need a tag helper,  the tag helper we have seen before in underscore   layout, it is ASP page, what page do we want to  redirect to that will be a Create Page. Now you do   not have to mention here that the Create Page will  be inside book list. Because if you are in the   same folder, you can directly write the page name.  That being said, let's add the Create Page in the   next video. In this video, we will be adding the  Create razor page. So let me stop the application,   we'll go to Solution Explorer, inside the  booklet will write like add a razor page. Again,   it will be the basic one. And we'll say create  here, it won't be a partial view. Let's add this.   Now with the Create Page when the page will  be loaded to we want to display any data. No,   we just want to display textbox. So user can enter  a book name and an author. So for that right here,   we will again need the application DB context, not  for the get handler. But when we hit the Create   button, we need to save it to our database. So we  will just do that while we are here. So we'll say   private read only application DB context, we'll do  a ctrl.to add model. And we'll have underscore dB.   We need constructor. So CTR tab tab will get the  application DB context dB, then underscore DB is   equal to dB. Now inside the get method, we need  to display text boxes to write the author name   and the book name, what will be the model. So that  will be public book, let me call that book, we'll   have the getter and setter. On get we do not have  to write that we will be passing this empty book   object, it does that automatically. So inside the  Create view, you will be able to access this book   and display labels as well as text boxes. Before  we do that in the next video. Many times it's   a common situation that you start with a model  and then you feel no I need one more property,   or they are like Whoops, I need to rename this.  So for that what we will do is right here, let's   imagine we have to add a new property called isbm.  So we'll write the new property is b n. And let's   have a getter and setter. Once you add a property  since you change something in the model here, you   have to add a new migration. So we'll go to Tools  nougat package manager, package manager console   will right add migration, add ESPN to book model,  always try to name your migration as meaningful as   possible. For effect, you can see it is adding a  new column. And all you do is update database. So   this way inside your table, a new column will be  added. If you go back now, and if you do select   top 1000 you can see I ESPN has been added, which  is no this looks great. And now we know how we can   make changes to a model that we have already  added. We'll have to change our index for the   same. I'll just copy this and paste it one more  time or turn off the display for here we'll have   the iasb n. And we'll do the same for HTML helper.  Perfect. So these are all the changes that were   needed. In the next video. Let's design the Create  Page and see everything in action. In this video,   we will start designing the Create razor page. We  will remove all of these things. We'll add a br   we'll give it a heading here, give it a class  of text info. And let me display create a new   book followed by a br. Now let me just paste some  bootstrap styling that we have I aligned this. All   I did was I added a div give it a class of border  and container and some style with padding. Then I   added a form and in that form I have a div with  class of form group and row Inside that row, I   have divided this into two parts, column two, and  column six. Let me make it column four, and column   six. That should be okay. Even though the total  should add up to 12, you can leave it like this.   Once you have the same designing, what we will do  is within the form, we will add method of post,   because when we hit the Create button, we will be  posting data back to our page handler. Within the   column for we want to display label. So we'll do  label and ESB for this will be for book.we have   the name. After that we have column six here, we  want a text box. So we'll say input, we'll use the   tag helper ESP for this is for book dot name. And  we'll give it a class of form control. You can see   how easy the binding is with the tag helpers, you  do not need to worry about anything in the post   book dot name will have the value that user enters  inside this text box. So let me just copy this and   paste this two more times. We have author and we  have ESPN. After author and ISP een we will add   another div give it a class of form group and row  just like we did before. And we'll add a div give   it a class of column three offset of two. Let me  do column six offset of four. That's what we have.   And we'll add a div give it a class of column  four, this should be column three, and this will   be column three. This is because the six that we  have, we are dividing that into two columns again,   the first one will be an input. And this will be  type of submit for the button. And we'll give it   a value of create. Give it some bootstrap classes  of btn btn, primary and form control. The other   one is to go back to the Index page. So we'll use  the anchor tag and the tag helper ESB page will   take us back to the Index page. And the classes  will be btn btn, success and form control will   display back to list. Let me save this and run  our project. We'll go to our book. And this time   we'll hit Create new book. Great, you can see how  good the page is coming along. If you think the   size is too big here, you can always modify that  I'll change this to three in all the places. And   that way it will be more closer. Offset will also  be three. Let's save this. And perfect looks much   better. Now if you click on back to worst, it  works and uncreate we need to work on what will   happen when we hit the submit button. Right now if  you do that nothing happens. And that is because   inside the Create Page model, we do not have a  post handler. So let's see how we can add a post   handler so that whenever they submit anything  from the page, how do we get the data and save   that inside our database. In this video, we need  to make sure when we fill all of this information   and hit the Create button, it takes us back to the  page. But before that we need some validation. As   you know name was a required property. So  if you hit Create before pressing the name,   we want to see the error message right here. We'll  do all of that. Let's stop the application. And   let's go to the page model. Right here we have the  on get handler. But when we hit the submit button,   we will be posting data. So for that we need a  post handler to retrieve that. So we'll create   public async and task. This task will be of eye  action result because we'll be redirecting to a   new page. And the handler name will always start  with on and what is the handler name. We want   a post handler so it will be on post. When this  will be posted what will be passed from this razor   page. We will be passing a book object so far that  will retrieve a book object. And we'll call this   book OBJ. Now, rather than getting a book object  like this, we already have a book right here,   we can use the exact same property rather  than writing this ESP dotnet core team has   given a property binding here, where you have to  write bind property. Once you bind the property,   it is automatically assumed that on the post, you  will be getting this book right here. So that way,   all you have to do is right here, you can check  if model state.is valid, then proceed further.   Else. If it is invalid, we want to return back to  the page. I'll explain you what model state is.   But hang with me right now. If the model state is  valid, we want to add the book to database. Adding   that is really simple. We can use the underscore  DB in here we have the book. And we have an add   a sink right here. What is the parameter we want  to add the book with just do a wait here, and this   will work. After we add the book, we need to save  changes to the database. Right now, this book has   not been added to the database, it is just added  to a queue, which will be eventually pushed to the   database. When we type the command underscore DB  dot Save Changes a synchronously, only when this   command is executed, then the data will be pushed  to the database. And once the changes are pushed   to the database, all that is remaining is return,  we will redirect to a page. And that page will be   the Index page. This looks good. Let's run our  application and see this in action. So we'll go   to book, we'll try to create a new book. And let's  hit the Create button. Great, you can see the book   has been created. Now let's try to create a new  book and hit the Create button. You'll see nothing   happens. If you type name here and hit create,  it gets created. But if you try it without name,   it won't be created. And that is because name is  a required property. what is actually happening is   if we add a debugger here, and if we go back and  try to hit the Create button, the control goes   back here. And let me add few more debuggers hit  continue the model state if you hover is invalid,   what is not valid if you go on model state, you  will have to go to result view. And right here you   will see the name is invalid. And the reason it  is invalid is it is a required property. And you   are not passing any value. But we need some error  messages to see that it is actually an error. In   order to do that, let me hit Continue. And we go  back inside the view here, we need to add a div   will additive give it a class of text danger,  this will be a red color. And that is a special   tag helper ASP Validation Summary, we'll change  this to model only. Once we have this, what we   need is we want to display individual error. So  we'll add span here. And we have ASP validation   for tag helper. Here we want the validation for  book dot name will give it a class of text danger.   We can copy this will do the same for author,  and ESPN. Once you do this, if you save this,   go back and refresh the page. The control comes  back here. Let's hit the continue. Whoops,   I think there are some changes. We'll just stop  this. Remove the debugger now. And let's just run   the application again. This time if we go to book  and if we try to create new book hit the Create   button. You can see the error message comes right  up. I need to show one more thing here. Let me   show you that in the next video. Now we see the  error message. But there is one more issue. If   you go back to the application while it's running.  Let's add a debugger here in the model state and   hit the Create button again. You can see that  the control is going to the on post handler,   it finds the model status invalid, and it  returns back with the error. We want this to   be done on the client side. In order to do that,  if we switch back, we go to create, right here,   inside Solution Explorer, we have the validation  scripts partial, all we have to do is we need   their reference. So right here, we'll do add  section, this will be scripts. And right here,   we will use partial tag helper name, we will  paste the name, this name will be exactly same as   validation scripts partial, make sure there is no  spelling mistake, we'll save this. Let's go back,   go back to the homepage. Let me do Ctrl f5, for  hard refresh. Let's try to create again. And let's   make it empty, hit the Create button, you see the  error message pops up, it doesn't go back. And to   confirm if we go back, we still have our debugger.  So this means the validation here is done on the   client side without posting back. So that way, we  have both the validation server side as well as   client side. So this was one way I wanted to show  you that the validation should be done both client   side as well as server side. Now the Create is  completed in the next video, let's start working   on the Edit functionality. Now we will be working  on the Edit razor page. So while this is running,   if we can go back, and we go to our index. If  we scroll down where we have the edit in here,   we need to pass the routing. So the ASB page, this  will be the Edit page, which we will create. Now   whenever an user clicks on the Edit button,  we want to pass the ID of the field that they   are editing. In this case it will be ID of the  book. So in order to pass that we have another   tag helper, and that is ASP, we have route. And  then we need to define the name that we want,   we can just call this as ID. What we want  to pass here is the actual ID of the book,   which is [e-mail]. This way, when a user  clicks on Edit, it will go to the Edit razor   page. And it will also pass ID as the parameter.  Let me save this, let me stop this. Let's go back   inside the pages book list. Let's add a new razor  page called as edit. Perfect in the get handler,   we will get a parameter of ID that we just pass  it will be an integer based on this integer, we   will retrieve the book, we can use bind property.  And we can start first with private application DB   context. Because we'll have to update things.  We'll do CTO our constructor will have the   application DB context DB underscore DB is equal  to dB. Great, then we need to bind property. In   here we'll be working with just one book. So with  the public book, let's call this book will have   the getter and setter. Here we need to populate  this book object based on the database with the   ID that we received. So await will do underscore  DB dot book dot find a sink. And here we just need   to pass the ID. This is another method that we  have with our Entity Framework. Rather than why   this will be async. And task because we are using  await here. This looks good for our get method. In   the next video. Let's design the edit view and  continue working on posting or editing a book.   Now we will be working on editing the book UI. The  UI will look similar to what we have for create,   but the only difference will be the data will be  loaded. So we can go to create dot CSS HTML, and   we can copy everything right here. Do not copy the  model because model will be different. So right   here, we'll remove everything and we'll Paste  what we just copied. Rather than create new book,   it will be added book. Then if you scroll down,  we have submit here, the value will be update,   and index. This looks good. Let's run our  application and see the Edit page. Here we'll   go to book. And we'll hit the edit button. Great,  you can see the data is loaded, it's added book   and we have the Update button. If you try to hit  update, nothing happens because we have not added   the post handler. Also in the URL, you see the ID  is being passed. And this is the ASP route ID that   we added. So everything is coming along good. In  the next video, let's work on the post handler.   In this video, we'll be working on the Update  button. If we close this here, inside the Edit,   you see the form method is post and we have the  input type Submit. So on post, we need to write   a post handler in post handler will be redirecting  to page. So that's why the return type will change   that to I action result. So task of I action  result. And we'll call this on post. The first   thing we'll check here is if model state is valid.  If this is valid, then we will proceed further.   And we'll retrieve the book from the database,  because we have to edit this. Now updating can   be done in multiple ways. So one of the way is  word retrieve that from TP is equal to whatsit   await underscore DB dot book dot find a sink.  And we'll pass the book. Whoops book.id we have   the book object right here will retrieve it and  pass the ID. And we'll say book from DB dot name   is equal to book dot name. We can just copy this  and paste this two more times for ESPN and author   will copy the same here. Perfect. Once we change  this, we will say await underscore DB dot Save   Changes a synchronous, and this will update the  book object inside the database. Once we update,   this will return redirect to page. And we want to  redirect to the Index page. If the model state is   not valid, we will return and redirect back to  page. Now let's see this in action. And when we   try to run this with hit into an error, I want to  show you that error message before I show you the   solution. We go to book here. Let's try to edit  this. And we'll change the ESPN to 333. Great,   we see an error message here that object  reference is not set to an instance of an   object. This is a common error message. And it is  not self explanatory. It just says that the object   it was expecting value, but it is a null value.  Now we have to debug on what's going on. So we'll   add a debugger inside the model state variable.  And right here. Let's go back and we'll go back   here and hit the Update button. Okay, we'll see  the model state is valid. Let's continue. We'll   see the book object. And you see the ID is not  present. We have all the other values the ESPN is   the updated one, but the ID is missing. And the  reason behind that is if we hit continue here,   let me remove the debuggers ad continue again  we'll get the error that's okay. Inside the Edit.   We do not have the ID here. We have name right  here, author and ESPN. We need the ID property   inside a hidden field. So we'll do input type  is equal to hidden and we need the ASP for tag   helper for the ID so it will be book.id once you  have it and save it and if you go back. Let's go   back here and let's do a hard refresh and update  the value. This time it is updated the Cause it   finds the ID now. So always make sure that inside  edit and such fields, you have the ID or any other   properties that you want while updating must be  present in the hidden property if you do not have   that inside the input text box. Also, if you go  on Edit, we already have our validations. So if   you try to update, it gives the error message.  So with this we have completed create an edit,   let's work on Delete. In this video, we'll  be implementing the Delete. Now with delete,   you can do it the same way we did for edit and  create, you can create a new view where you will   display the details. And on the delete button, you  can do a post event. But I want to try something   new here. This time, when we hit delete, I want to  show an alert. And when the user clicks Ok, I want   to delete it too quickly from the Index page. So  for that, let's implement the pop up first, we'll   go back, I will close edit, create. And we have  the index. Right here we have the delete button,   I will add an onClick method here. And we will  save return will have a confirm box. You sure   you want to delete. If this returns true, we want  to go to a page handler on the same index page. So   we'll do a ASP page. And we'll have a handler, we  have not used this tag helper before. This time,   we want to implement a custom tag helper other  than the on get and on post, we want to call   this is delete. And when we'll be deleting, we  need to pass the ID of the book, we already know   how to pass it using ASP route. We'll call it  ID. And we'll pass item.id. Let's save this.   Let's go back and refresh. And when we hit the  delete, we now see an alert here. On cancel,   nothing happens. What should happen when they  click OK, we have to implement a delete handler   inside the Index page. So inside Solution Explorer  will open the page model. Let me stop it here. And   we will implement public async task of I action  result. Because we'll be redirecting to the same   page. And we'll implement on post delete, we'll  have an integer of ID that we will fetch because   on the index, we have the ID. This is a button.  So that's why it will be a post handler. So we   will have the on post and then the handler name  which we have defined as delete. Okay, so what   we want to do in here, we'll say variable book is  equal to, we can do it in multiple ways. First,   we can find the book. So we'll do await  underscore DB dot book dot find a sync,   and we'll pass the ID, then we'll check if book  is equal to now. That means that book does not   exist based on the ID that is passed and will  return not found. If we find the book will say   underscore DB dot book dot remove. In here, we'll  pass the book that we retrieved. And we need to   save the changes. So await underscore DB dot Save  Changes a sink. Once we remove the book, we'll   return back to the page. Or we can return back  to the Index page, making it reload. Let's save   this and let's run our application. We'll go to  book. Let's try to delete this 111. And perfect.   You can see our delete functionality is working  as expected. So with this we have completed the   CRUD operations on book list using razor syntax.  Now we have implemented the crud functionalities   that we seen before. These current functionalities  are basic HTML and dotnet. Core. How about we add   some styling and some data tables to that. So for  that, I'll be needing three things. First will be   sweet alert, because of which we'll be having  such nice alerts. Then we have toasters, for   notifications like this. And we'll be using data  tables to list all the books in such a fashionable   way that our CD ends that are needed for that.  What I will do I will have a file attached with   the CSS and the JavaScript. So you can just copy  this, go back to your code. Word starboard, will   have to go to underscored layout. On top, we  have the CSS will paste it here for data tables,   jQuery UI and toaster. And we'll also copy the J  s. And we'll scroll down to the JavaScript. And   we'll paste it right here. Now with data tables,  we need to add API calls to retrieve all of the   books in a JSON format. And we'll also add an  API call for delete. In order to add API calls,   we need to add Web API to our project. Right now,  it's only razor. So for that, we'll right click,   add a new folder. Let's call this controllers.  I'll make it plural here, controllers work right   click, add a new controller in here, we can go  with the MVC controller or the API controller,   anyone is fine. We'll just go with the MVC  controller. And we'll call this book controller.   Inside the book controller, we will need our  application DB context. So right here, we'll   have private read only application DB context,  we'll do our control dot underscore DB will have   the constructor application DB context dB, and  underscore DB is equal to dB, then we need to   implement the HTTP GET and HTTP delete. Let's just  implement the HTTP GET, we'll change this to get   all and with the get it should be HTTP GET. What  we want to do is we want to return a JSON here.   And within New, we want to pass data is equal  to underscore db dot.to list. So that way, we'll   retrieve the book. And we'll pass it back when you  call this API call. But API's are not supported   inside our startup right now. What we have right  now is only add razor pages. So in order to do   that, we'll do services dot add controller with  views. Once you add this, you will be adding the   API calls, we will also have to add that to our  middleware, especially inside the endpoints. So   we'll use endpoints dot map controllers. This way  the controller API's will be called. And right   here, we need to define the route that should  be used to call this. So the route we'll just   call is API forward slash book. And this will be  an API controller. So that way, we'll make sure   that the book controller is an API controller,  and this is the route that will be used. In such   startup. Since we have added map controller,  you can navigate to this URL and get request   will return you data from here. In this video,  we'll be making changes to the Index page that   is inside pages book list index. And right here we  have the first step that we are using right now,   I will add another div here. Let me just paste it.  And all we are doing here is column 12. We have an   oar. And I have a div with column 12. I have a  table with ID of DT lol. This is important. And   I'm just displaying the table headers. I think I  have an extra div here. There we go. Now how do we   load this table, that table will be loaded using  JavaScript. So for that, we'll add a section here.   And it will be script. We will have the script  tag here will give SRC, inside GS, I will create a   new JavaScript called book list dot j s. Let's add  that script file inside the WW root j s. We'll add   a new item. We can search for Java here. And let's  call this book list. And then let's start working   on the JavaScript here. So we'll have the variable  data table here and fill us the dollar document   dot ready function. We'll add a function in here  And we'll call load data table. Let's add this   load data table. So we can just copy this. And  we'll add a function here, paste that. And what   we want to do here is we'll load the variable data  table, we want to load it on index, we have the DT   load, we can copy this will retrieve that hash,  and DT load. That way we'll call data table. This   data table has been included with the JavaScript  reference that you added with data tables. So dot   data table will populate a data table on DT load.  In here, we have few things, we need to make an   AJAX call to our API. So for that, right here, we  need to define the URL and URL is forward slash   API, forward slash book, then we need a type here,  because this will be a get request, followed by   data type, and data type will be JSON. After the  AJAX call, we need to define all the columns that   we have to display. So right here, we will have  columns, and this will be an array. So right here,   the first one will do data. And what is the  name of the column that is name itself, comma,   we want to say what width it should occupy. So  that will be in percentage. So we can do 30%. We   can copy this and paste it two more time. We have  author here, and we have our ESPN, make sure it   follows camel casing. If inside book the variable,  you had his name, right here you had named ABC,   then what you would do is right here, this will be  named ABC, the first one should be a lower case,   we only have named so everything is the lower  case right here. After this, the last column we   want is edit and delete buttons. So in the last  one, the data fields that we want is the ID,   because when we edit or delete, we need to pass  the ID of the book. So we'll have ID here. And we   will have a render, because we want to render  two buttons here. So this will be a function,   and we will pass the ID. So that's why we'll pass  the data, which has the ID. In here, what we want   to do is we want to return a div with two buttons.  Since this will be a multi line statement, we can   use the tilde sign and break up the statements.  tilde sign is available right next to the one on   your keyboard. Here we start with Dave, give it  a class of text center. And we'll add the ending   div. Since there is no IntelliSense, you have to  do this manually. Then you have an anchor tag,   we'll do x ref, what we want to do is we want to  add an edit page. And right here, we will have   booklist forward slash edit, and we need to pass  the ID. So Id is equal to dollar. And in here we   have the data. So that way we'll be passing the  data which has the ID of the book. We'll give it   a classes of btn btn success and text white, we  will also give it a style of cursor of pointer   and we'll give it a width of 100 pixels. This  looks good for our anchor tag. And then in the   next line, we will add the added button will close  the anchor tag here. And we can copy this anchor   tag because we want another one for delete. So  right here, I'll add some space ampersand nbsp   and we'll paste it one more time. On delete, we do  not want to go to any of the URL. So we'll leave   the extract out right now. We'll have the classes  of btn danger and we'll add an onClick but we'll   do that later. I'll just make it delete and we'll  have the closing div. So this looks good. Then,   in this render with an ad with here and We'll  make it 30%. Outside of this array that we had   four columns, we'll do comma. And I will add  language here. In here, I do empty tables. If   there is no data, I want to display no data  found. We'll do what columns are here, and   we'll give it a width of 100%. Everything should  be in double quotes, like this. So with this,   we have our data table in place. Let me save this.  And we need to run our application. To see this in   action. We already added the code inside the Index  page. So if we go and book we will see two tables.   Now. The first one you can see right here, and  here is the later one. But here the JavaScript is   not getting called. And I guess that's because we  have a mistake with the file name here. It should   be booklists. JavaScript. Let's enter that and hit  the Run button again. We get one book. And great,   we see our data table in place with the number of  entries we have pagination, sorting, and search by   default. Here, the stylings has not been applied.  Let me go back and take a look. We forgot an equal   to here. Let's save this, go back and refresh.  And perfect. We see everything is coming along.   Let me just reduce the size here. I'll make it  20. And we can make this 40. And width that will   make it 70 pixels, and both the places that  save it and refresh, and perfect. This looks   much aligned. When you hit the Edit, it will take  you to the Edit page. And if you click on delete,   right now, nothing happens. In this video, let's  work on the Delete. On delete, we want to display   a nice alert here and on. Okay, we want to delete  it directly but using an API call. So for that,   we'll have to go back and we'll have to add an  API call inside our book controller. So we will   add an HTTP delete here. And this will be public  I action result, delete. Here, we'll be getting   an ID that we have to delete. We'll say variable  book from DB is equal to underscore DB dot pub   dot first or default. And we can say u goes to  a u.it is equal equal to ID. Now right here,   it is always good to be consistent. So we will do  a sync, and it will be task of I action result.   And we will do await here. And we have the  tool list a sync, we'll have to do a control.to   include Entity Framework core firstar default,  we have the async method in here. So we'll do   control dot oops, there we go. And we'll use  await. We have a sync task of I action result,   then we'll check here if both from DB is equal  equal to Now in this case, we will return JSON.   And we'll return new. This time, we want to make  sure success is false, because we did not receive   any book. Karma will also display a message error  while deleting. If we found that book with the   underscore DB dot, dot remove, and we'll say awake  underscore DB dot Save Changes. It's synchronous,   then we'll return back the JSON. This time we'll  have a new and success will be true. And we'll   have a message which will be delete successful.  So this looks good. Here we are getting an error.   Let's do a control dot whoops and that is because  we did not pass the object that we had to remove,   which is booked from dB. Perfect. So the Delete  method looks good. All we have to do is inside the   JavaScript, we need to add a function to delete.  Let's do that in the next video. In this video,   we'll be adding a function to delete and call our  API. So right here where we have the Delete tag,   we will add an onClick method. So right  here, we will say on click is equal to,   let's call a function, delete. And we'll pass our  API call here. So we'll have API book. And then   we need to pass the ID is equal to, we'll do plus,  and we have the dollar data. And then at the end,   we will be adding the Delete function. So we'll  add function, delete will receive the URL here.   And we need to display sweet alert. So we'll  do swa L, and will add the properties like   title. Are you sure karma will have text. Once  deleted, you will not be able to recover. We can   have an icon here of warning. And we can have a  danger mode here to drill. These are just some   of the properties that you can use. And we'll be  using Ajax here. So we'll use them. And in here,   we'll say we'll delete this will be the response.  Based on this we'll have a function. Here,   we'll check if we'll delete. That means if user  selected Yes, they want to delete, we will make an   AJAX call here. AJAX call, we will have the type  of delete, we're going to have the URL, which we   have right here inside the parameters, we'll do  a comma. On success, what we want you to do is   we want a function with data that we retrieved.  And we want to display a toaster notification. So   we will do toaster.we have this success here.  And we want to display message. Inside here,   I need an if condition. And we'll check if this  is success or not. If this is successful, we'll   display torstar dot message. And we will say data  table. This should be message. And that is because   if we go to controller, we have message right  here. And then we'll do data table dot Ajax dot   reload. In the else block here, we want to display  an error. So I can copy this and paste it. And   this will be error. This looks good. We'll add the  two semi colon. And now let's run our application.   We'll go to book. Let's try to delete. Great, we  see the notification here, you can click outside,   or you can hit the Delete. And if we hit Delete  here, it doesn't do anything. But actually,   if you refresh the data is deleted, we have  some issues with the display. So right here,   let's see the toaster. This should not be message  it should be data dot message, because we have   that inside the data object. And also, if you go  to book controller, I have a mistake with success   spelling here. Let's run it and see everything  in action. Let's go to book and create new book.   Let's hit the Delete. Okay, great. We see a  nice toaster notification. And then if we just   scroll back inside the sweet alert IP, add another  property here buttons is equal to true. And after   that if we go back and we go to book, create new,  let's add one. Create and then if we click Delete,   we see ok and cancel. So that way we have  everything working. Now here I have had request   from students many times that the Create view  will look similar to what we have for our edit.   So why not combine both of them in one view or  one razor page? So that can be done? Absolutely.   Let me stop the application and I'll show you how  that is possible. Usually the name first Each page   is absurd, because it is a combination of update  and insert. So we can just copy the edit that we   have. Or let me just add a new view, because when  we copy, we have to make sure many things needs to   be updated like model. So the page name, it will  be absurd. And this looks good. Let's add that   inside our ProQuest. It will be similar to edit  page, but there will be modifications, let's first   copy everything that we have inside edit, not the  model. So we'll copy this, and we'll close that,   we'll go to our absurd page. And we'll paste it  right here. Let's save this. Let's go to the Edit   Page model. And we'll copy everything inside the  model from application DB context. And we'll just   leave two brackets at the end. Whoops, we'll start  after the two brackets. And there we go. Let's   copy this. Let's close this go to the absurd. And  let's remove this and paste it right here. Now   what will happen within absurd is it will be used  for creating as well as updating redo control dot   here, because of which inside the Edit model, this  will be upset model actually. And because of which   the ad it is possible, there won't be any ID if  this is used for create. So that's why we have to   use a nullable integer so that Id can be now then  inside the get what we have to do is we'll say   book is equal to new book. Once we have that we'll  check here if Id is equal to now. If Id is no,   that means that this is for create. So we will  return back to the page. If that is not now we   will continue here. Because of this we need to  change from task to I action result. If the ID   is not now that means we have to retrieve the book  from the database. So book is equal to underscore   DB dot book dot first dot default a sink will have  to do ctrl.to include Entity Framework core, we'll   do a weight here. And we'll say you goes to a u.id  is equal equal to the ID, we will find the book   and after we find this we'll check if and we'll  say book is equal equal to Now if that is true,   then we'll return not found. If this is not the  case, we will return back to the page. Now when   we are retrieving from the database, you can use  first or default async or you can use fine async   any of those methods will work. So this way, we  will handle it for both create. This will be for   create. And this will be for update. So the same  handler will be using for both the scenarios. That   looks good for the get handler, then inside the  post handler, we will do the same. We will check   first if the model state is valid or not. If it's  not valid, we'll return back then if it is valid,   what we will do is right here, we'll check if  book.id is equal equal to zero. If this is true,   then underscore DB dot book dot add. And we'll  add book. Else what we will do is underscore   db.book.we also have update method. In here, we'll  pass the book. So previously, you saw other way of   updating the book by retrieving it from the  database. And here we're using directly the   update method. So when should you use the previous  one versus this one. This update should be used if   you want to update every property of the book.  But if you only want to update two properties   within use the way that we used inside the Edit  page. Once we do this, we'll save the changes.   And we'll redirect back to the page. So perfect.  This looks good for our upset cat as well as post   handlers. In the next video, let's fix the update  view or the razor page and we should be good. In   the last video, we fixed the handlers for absurd.  In this video, let's work on the razor page. The   things that we have to do differently in create an  edit is the title here. So in here we can use the   razor see index and we can check if model.book.id  does not equal to zero. If this is true, we will   display edit, else we will display create we will  copy this condition and we will have to do the   same for the ID in the hidden property will add f  model.book.id does not equal to zero, then we will   have the ID else we do not need it in the Create.  Lastly if you scroll down we need to do the same   for the pattern. So inside the input type we can  just replace this with button we can say type is   equal to submit and we can add the same classes  btn btn primary form control and we'll paste what   we had before for ad model. So if this is not  now then we will display as update else we will   display create let's save this and with this the  absurd view or the razor page looks good. How do   we test this we can go to our booklists.js and if  we scroll up so we'll change this to absurd here   and we'll also change the Create so far that we'll  have to go to the index and then if we scroll up   right here we'll change this to absurd. Let's save  this and run our application. And right here we'll   go to book and hit Create new book we are on  the absurd. Let's try to create one work great   this work. And if we click on the Edit here, it  takes us to the absurd. Let's try to update this   perfect that is working. If I click on edit in the  first one, it takes you to the Edit page. Here we   can also add a new text box so that we'll have  both of them so I can just copy this and paste   it one more time. Next will be create and create  new book and observed whoops I think I switched   that around fact me paste this will save this go  back and refresh I have one more thing I have to   change this to six and perfect now we see create  new book takes us to create add absurd takes you   to the absurd, but everything is exactly the same.  So with this, we complete the absurd and how you   can combine both of the logic inside a single  razor page. Now that we have completed Razer   project, it's time to explore the other type of  application, which is an MVC project. So in this   section, we'll create our next project, which will  be the book list. But in that we will use MVC,   we will take a look at how routing is different in  MVC as compared to razor pages, and we'll see the   new folders with the MVC project. So let's get  started with that from the next video. What we   have to do is we need to create project for our  MVC crud operation. We'll start Visual Studio   2019 and we'll select create a new project. In  here we'll select ASP. NET Core web application   and hit the Next button. Then we need the name  of our project. So we'll call it boquist MVC,   and you'll select a location. I'll change  the location to where I want and I hit the   Create button. That being said, we need to select  options for our project. Now in here we'll select   ASP dotnet core 3.1. And we'll be selecting MVC  for our project. We can change the authentication   to select individual users account. But with  that many things comes configured. So I do not   want to start with that route. We'll go with no  authentication and we'll add database objects   manually. That way we will learn those concepts  that being said once everything is aligned here,   let's hit the Create button. Perfect. So with this  The project has been created with model views and   controller and this is slightly different to what  we have seen with razor pages. As we saw from the   architecture we will have controllers which will  have the logic models will have the data and view   will be the UI component. So we have all of those  three folders right here. And the other things   are common like www root dependencies properties,  app settings, program.cs and startup.cs. The only   difference is inside startup.cs class file. If you  scroll down, inside configure services, we do not   have the Add razor pages, we have ADD controllers  with views. Also, if you scroll down route here,   inside the routing, and endpoints, they have  registered map controller route, because we   need controller actions and even areas in advanced  courses. So these are the only differences between   MVC and razor pages inside the setup files. Of  course, the working of controller models and views   is completely different. And we'll understand that  in the upcoming videos. In this video, let's take   a look at the folder structure in an MVC project.  The three main folders that are different our   model views and controller right here. The first  folder is the controller's folder. And in here we   have the main logic of our web application. Here  we have the home controller, one rule that we have   is the controller name will be home, and it should  match exactly with a folder inside the view. So if   we have the views for homepage, the controller  name will be home followed by a controller   keyword. inside the home controller, you can see  we have methods here. And all of these methods are   called actions. So the terminal logic to remember  is within controller we will have actions. The   next folder that we have is the models folder.  Here as of now we only have error view model.   But as we proceed, we will be adding new models  here. Any table that we have in our database,   we will have a corresponding class as a model in  this folder. We will also have view models which   are a combination of multiple models, and we will  discuss them in detail when we need them. Finally,   we have the views folder. In here if we expand  we have the shared folder, in which we have the   underscore layout and validation scripts partial,  which we discussed. And we have view imports and   view start. The new folder is the home folder.  And in here we have index and privacy. And one   thing to notice is inside the home controller  we have actions called index and privacy. So   here whatever data is being passed will be the  model for these two pages or views. If we add a   new controller here, let's say Brogan controller,  then we will have to add a new folder here called   pregame to add the views for that new controller.  You will understand this more once we start   coding. But I wanted to give you a brief overview  of all the three folders that we have. Now let's   just understand how routing works in typical MVC.  asp dotnet routing is a pattern matching system,   which enables you to match the incoming request to  a particular MVC action defined in a controller.   When ASP dotnet routing engine receives a request  at runtime, it finds the match against the URL   pattern defined in the route table. If any match  is found, then it forwards that request to the   controller. Otherwise, it will return a 404 not  found message when we will create a new ASP. NET   Core MVC application routes are already added to  the project. If we switch back to our application.   And if we go on startup.cs, right here, where it's  adding controllers with view to our pipeline. And   when we see the middlewares, we have first the  app dot use routing. And we have the app dot   use endpoints. Now you can keep endpoints or you  can also use the routing without the endpoints in   versions one and two of ASP dotnet core. This was  a part of MVC. But now it is a separate piece of   middleware to make routing available to all the  middlewares and not just MVC. So that's why we   see app dot use routing on top. And then we have  app dot use endpoints at the bottom endpoint is a   URL where incoming request will end up processing  by the middleware. If you have used MVC, before,   you know that you have to specify the routes for  this. And right here we are specifying a default   route in which if nothing is defined, it will  look for the home controller, and it will call   the index action inside that. Now, ASP dotnet core  is not just MVC, it supports different technology,   which uses routes, like razor pages, signaler, and  MVC. And the routing is different for each one of   them. All of this tag uses middleware stack  registers the endpoints. So if you see here,   right now, we only have the MVC endpoint that is  registered, because that is what we'll be using   in this application. In previous version of ASP  dotnet, core routing was embedded in MVC. But that   cannot work anymore. Since we have more than one  technology, which uses different types of routing.   First we will do is we will add user routing,  which will make the selected endpoint choices   available to all the middlewares that follows  after that. And when we will do use endpoints at   that point, we'll be able to register and execute  the endpoints. In lambda expression, we have   several extension methods to register endpoints.  One of them you can see here is map controller   route. Let's try to run our application and see  what happens. In the URL, we do not have anything   defined, it's just the domain name, or localhost  and the port number. In that case, if we go back,   it should go to Home controller index action.  So if we go on Solution Explorer inside home,   let me add a debugger inside index and privacy.  Let's go back and press Enter Here, you can see it   goes to the index section of the home controller.  And when we continue, it will load the view for   that. So the view if you go to Solution Explorer  views home, we have the index view, right here,   we have a welcome text. And that is what we  see inside the UI. When we click on privacy,   the link goes to home controller privacy action  method, and then it should render the page   inside the home folder in views and privacy  page right here. So if we do continue, here,   you can see home privacy is loaded. So the first  one here is the controller name. And the latest   one is the action method. If you have not defined  anything, it goes to the index action by default.   So if you just define home, it goes to the home  controller and loads the index action method. If   you do not define home as well, it will go again  to the home controller index action method. And   that is because you have defined that in endpoint  to use as a default controller and action method.   So this was a brief overview of routing in MVC.  And we'll continue exploring this more when we   start building our application. Now that we have  the MVC application created, in this section, we   will work on the same booklist project to perform  all the CRUD operations, but we will use our MVC,   we'll be adding models, views and controllers, and  we'll see how everything comes together. Let's get   started with that from the next video. Now that  we have a brief overview of our MVC project,   it's time to perform CRUD operations on the bucket  list again. So the first thing we will do is we   will add model for our book. So we'll add a new  class, we'll call it book. And in here, we will   add all the properties. First will be the ID. So  we can use key data annotation, and we'll call it   prop integer ID. Next, we'll use the snippet prop  tap twice with a string name. We can copy this and   paste this two more times. Name property, let me  make it required. And the other one, I'll change   this to author and I ESPN. This looks good for our  model. Once we have model in place, we need to add   this to database. So there are multiple things  that we have to do to add it to the database.   First in the models, we'll add our DB context  class, which we will call application DB context.   In here, we need the constructor. So CTR and  within the constructor, we need to pass the DB   context options. We'll do control dot here, here,  we need to include the package for Microsoft dot   Entity Framework core will find an installed  the latest version. You can do this by going   to the new get package solution, but I want to  do it right here directly. Here, we'll pass the   application DB context. And we'll have options.  And we need to pass it to the base class, the   same options. Once we have that the application DB  context should inherit from DB context. Now that   application DB context is looking good, what we  need is we need to add our book to the database.   So whenever we have to add a table, we'll add  that property inside the application DB context.   So we'll do prop. This will be of type DB set  on book. And let me call this books. Perfect.   This looks good for our application DB context.  And this is exactly what we did in razor pages   as well. Then the next thing is to add connection  string, and to get the connection string inside   configure services in startup.cs. So we'll go to  app settings dot JSON. And in here, let me paste   the connection string. Now remember, one thing  that the server name, you have to double check. So   make sure if you're using this connection string,  copy the server name, go to your SQL Server, paste   it here, you just need one backward slash and try  to connect. As long as you're able to connect,   you can use the same connection string, the  project, let me call this vocalist MVC. For the   database name, we have trusted connection to true  and multiple active results search to true. Great,   so this looks good. And the connection string has  been added in app settings dot JSON exactly like   we did increase our pages. The last thing that  we have to do is we need to configure startup.cs   to use that connection string. So within the  Configure services, we will add services dot   add DB context. In here, it will be on application  DB context, we'll have to do a control dot here to   include models. And we need to pass the options  for SQL Server. So options goes to options. use   SQL server will have to install a new nougat  package. Let me do control dot here again. And   I do not see that nougat package here. So what I  will do is I will just go to Tools, nougat package   manager solution. And we'll search for SQL Server.  We have the package, which is Microsoft dot Entity   Framework, core dot SQL Server, let's install the  latest version here. Perfect it is installed. Now   if we go back, and if we do Ctrl dot, we'll see  the using statement for Microsoft, that Entity   Framework core. And once we do that, there we go.  Here, we need to parse connection string from the   configuration. So we'll do configuration.we have  a get connection string here. And we need to pass   the name inside our app settings, which is default  connection. We'll copy that and paste it right   here. Let me break it in a new line. There we go  looks much better. This looks good for all the   configuration that we have to do. But we also want  to add the waser compiler package. So right here,   let me add the razor compilation package actually  will search for runtime compilation, there we   go and install the package. This package we are  installing so that if the application is running,   and we change anything in the view, and we  refresh, we don't have to restart the application.   Whoops, there we go. And right here, we'll do add  razor runtime compilation. Great. This is exactly   what we did with razor pages as well. That's why  I'm not spending much time here. Once you do this,   let's add a migration. So we'll go to Tools nougat  package manager console will add migration add   book to dB And here we see an error with the  migration. That's because if we go to Tools,   nougat package manager, we have to install  package for Entity Framework tools. So if you   search for Entity Framework, tattoos will install  the Microsoft dot Entity Framework core dot tools   to our project. Once that is installed, then add  migration should work. Awesome. Let's go back to   package manager and hit the command one more time.  This time it is already building the project it   was successful, and it adds a migration right  here. Great Migration looks good. Let's update   the database to push our model to database, it  will first create that database, and then it will   add the tables. Great. Let's go back to make sure  it's working. We'll go to database in SQL Server,   we have the new database. in there, we have our  table called books. And great we have all the   columns as we wanted. Once we add the model to our  database, next thing, let's go to our master page,   which is underscored layout. And let's add  a link for a new controller for our book,   we'll copy the ally here, the new controller,  let's call it books controller. And in there,   we'll have an index action. We'll call this  as book list. And let's add a new controller.   Inside controllers, we have the home controller,  in here, we'll add a new controller, we'll go   with the empty controller for MVC. And we'll  call this as books controller with the name of   the controller controller has to be pre has to be  added at the end. So whatever name you give before   controller will be the name of that controller.  In this case, it will be books controller, great,   our controller is added. And in here we have the  index action. Let's try to run our application and   see what happens when you click on the link.  Since we already have index action. In here,   it will take you to books controller index action,  but since we do not have any view, it will give   an error that the view index was not found. It  tried to look inside views books index dot CSS,   HTML. And since it did not find it there, it also  looked inside the shared folder. So even though   we have the action method for index, we do not  have the view. To add a view, what you can do is   inside our views folder, you can create a new  folder with the same name as your controller,   which is books. And in there, you will have to add  index view, you can do that in Solution Explorer,   or you can just right click on index and click Add  view. Here we'll go with the empty view. And we do   not want it to be a partial view. Partial view is  something that you want when you will be consuming   that inside some other view. But in this case  index will have a page by itself. That being said,   we'll select Use a layout page because we want  the same header and footer for our index page as   well. Let's hit add here. Perfect. Now if you run  the application, and if you navigate on the link,   you will see the word index, as you can see  right here. So we click here. And great,   we see our view in action. Let's continue working  here in the next video. Now in this video, since   we have our application running with the index, I  want to install few third party tools. First is a   sweet alert that I want to display nice alerts in  our web page. Next is a toaster notification. And   in here, if we go to toaster j s, we go to demo.  And when you click Show toast, you see we have   nice toaster notifications here. We'll use this  when we delete our poke. So we'll use toaster   and the last one is data tables. Here we get  sorting functionalities, number of pages, paging   functionality and search right out of the box.  So we'll be using all three of them. Now you can   go here and get the CD ends or I will have that  attached with The lecture. So let me open that   up. And within the attachments, you will see CSS  underscore js, we will copy the CSS. Let's go back   to our application. And in here, let me close,  everything will be adding that in our master page.   Because once we add in the master page, it will be  accessible in all the other pages. So on top here,   we will be adding the CSS. And when we scroll  down, we have to add the JavaScript. So copy that   and paste it right here. So perfect, this looks  good. And we have added all three of them to our   project. Now, since our application is already  running, in our razor pages with index, we use   data tables, and we added a JavaScript will do the  same in this MVC project as well. The JavaScript   will have the exact same functionalities.  Before we work on the JavaScript, let's   work and create the action methods inside our  controller. Let's do that in the next video. Now,   within our booklists MVC project, we want to work  on our controller, which is the books controller.   Let me open up the razor project that we built. In  here, I have pulled up the razor project in which   we added the API calls to get all of the book,  as well as to delete a book, this course will be   exactly the same. So we can copy this. And let me  close that project. We'll switch back to our MVC   project. And within our books controller, since  those are API calls, we will create a region here,   and we'll call it API calls, I will enter the  region as well. And between that we will paste   the code that we copied. Now, first thing in  controller when we have to Access database,   we need the application DB context. So we'll  have private read only application DB context,   we will do a control.to include using booklist MVC  dot models. And we'll call this underscore dB. We   need to get this using dependency injection. So  we'll create a constructor here. And we'll have   the application DB context dB. And we'll do  underscore DB is equal to dB. This you must   be familiar by now that we need to do this to get  the DB context using dependency injection. Then   if we scroll down rather than book, what we have  is books inside our application DB context. Then,   for two lists and async, we'll do ctrl.to include  Microsoft dot Entity Framework core will make   books in all the places other than that everything  will be seen forget all and delete API's. Once we   have that, then inside index, when we return back  to the view, we do not want to pass anything here,   because we will be loading this view using the API  call right here with the help of data table. So   let me go to the View. And in here, we need to  add us for our JavaScript. That being said the   JavaScript will be exactly the same with one  or two modifications as compared to our razor   code. So I have that in the attachments as well,  which is exactly the same as what we have in the   razor project. We will copy this, go to Solution  Explorer, ww root j s, we will add a new item. And   this will be a JAVA script. And we'll call this  book list dot j s. let me paste the code that we   copied. All we have to change here is URLs. All  that was changed here was the URLs. Here we had   API forward slash books inside razor pages, but  in MVC, we do not have that we are in the books   controller. And if we want to call any action  method in here, all we need is the controller   name, followed by the action name. So the API  calls are get all and delete because of which   if we go to publish.js to get all of the books we  are calling books, which is the controller name,   followed by the action name, which is get all that  will retrieve all of the books Then when we have   to edit the book, we are calling the controller.  And then right here you see an action name, which   is absurd. We do not have this action yet, but  we will add this in the upcoming videos. Lastly,   you see inside the Delete here, we are calling  the books controller, and then the Delete action   method with an ID, which we are passing, which  is the ID of the book. So if we go to books   controller, we have the Delete action. And here  we are expecting an ID. So you can see the chain   is exactly similar as we did inside the razor  pages. That being said, our JavaScript is in   place and our controller API are in place, all  we have to do is we need to add the table and   call our JavaScript in index. Let's do that in  the next video. In this video, let's modify the   index view and see how it looks. We do not need a  model in this because we'll be loading everything   using data tables. With additive give it a class  of container and row and give it padding zero and   margin zero. Within this main div, we'll add a div  with class of column sex. And we'll have our title   here. We'll use bootstrap class for text info. And  we'll call this book rest. After this column six,   let me add another div, give it a class of column  six. And here I want the button rather than six   here, let me make it column three, and offset  it by three. And we will add a button or a link   here. Now this link, I want us to redirect to an  absurd page where we can create a new book. So   in order to redirect, just like we had ASP page  inside razor pages in MVC, we have ASB action.   Let's say if you want to redirect to action in a  different controller, we also have ASP controller.   So here you can write books controller. in there,  we have the absurd action, which we will add,   then we'll add some bootstrap classes btn btn.  info, and we'll give it form control. We'll also   make it text off white, there we go. And in here,  I will display add new book. Now in this case,   since the upset action will also be added inside  the books controller, it is okay if you do not   write this. So this is optional, but I will leave  it there. After this Dev, let me add another div.   And this time, I'll give it a class of column  12. For our main table, along with column 12,   I will add a border and I will give padding three.  Then here we want our main table, we'll give it   an ID that we have inside purplish.js, which is DT  underscore load will copy and pasted will add some   bootstrap classes like table, table striped, and  table border whoops, table bordered. Along with   that, I also add a style to give it a width of  100%. Perfect. Here we will add t head for the   headings in which we'll add the table row will  have the th tag, we want to display name, author,   isbm and buttons to edit and delete. So I ESPN  author, and the last one would have the buttons   to edit and delete. That being said, we need a  reference to request dot j s. So we'll add section   scripts. In here we'll add the script tag, add an  SRC for Java Script book list dot j s. Once you   do all of that, that's one our application and  see how things look. Let's go to ProQuest here   and great it's loading and no data found. That's  because we have not added any book yet. But we   can see the data table is loading as expected. If  you click on add new book, it will give an error   because we have not added that action method or  that view. In the next video. Let's work on the   absurd. Get Action method and the view. In this  video, let's work and create an absurd get action   method. Absurd view will be used for two places,  one to edit a book and one to create a book. Based   on that, sometimes it will retrieve an ID, if it  is for edit. If it is for create, there won't be   any ID. So we can copy this index, paste it here.  And we'll call this action method as absurd.   In here parameter, it can receive an ID or it  cannot. So we'll make this a nullable parameter.   That being said, Now you need a book object with  absurd. So we can add that book object right here,   we'll do Prop, it will be a book object. And we'll  call this book. Now we can use find property here.   And once you find that property on post, you  won't have to retrieve that it will automatically   be binded. That being said, inside the view here,  first, let's initialize the book is equal to a new   book. And then we will check here if it is equal  to Now if this is null, that means this is for   a create request. And we will return back to the  view the book object, which is just a new object.   If this is not the case, that means this is for  an update. If someone wants to update a book, we   need to retrieve all the data for that book from  database. And we have to display that. So we'll   retrieve that input here from db.we have the books  object or model, and we just want to retrieve one   book. So we can use first dot default here, and  we'll say u goes to a u.it is equal equal to the   ID that we retrieve right here. After that, we  can check here, if book is equal equal to Now,   if this is not, that means there is no book  in the database. And we will just return not   found. If we find that book will return back to  the upset view. But we will populate the Book   which We have retrieved from the database. So  the view will expect a book regardless of if it   is used for create or update. This looks good for  the absurd cat action method. In the next video,   let's add the absurd view. In this video, let  me add the absurd view, we can right click on   the action method. And we'll click Add view. This  looks good. Let's add this. Now the opposite view   first thing what will be the model, if we take  a look at the books controller, we are passing   a book object to the view. So that will be the  model. So we'll define model. It is book list MVC   dot models dot book, we'll add a br and we'll add  heading here give it a class of text info. Here   we want to display edit book or create book based  on the request. If we go back to our controller,   if Id is now then we pass the book object with  a null ID. So if Id is null, then it is a create   request. So right here now will be zero. So we can  check at and we'll say if model.id does not equal   to zero. If it is not zero, then display edit,  else will just display create. Along with that   we want to display book. This way the single line  will serve both create an edit book to display the   title. We will add br here and we'll add mean to  give it a class of border and we'll add container   we will give it a style for padding of 30 pixels.  Within here, let me add a form tag and we'll give   method of post. So that whenever a user submits  the button, it will go to the post action method   for absurd inside the books controller. Here you  can also define the action method as absurd. But   since we are on the absurd, if you did not define  this, that will also work. If it was some other   action method as compared with the name then  you would have to define it but in this case   we are good. Now when we will be posting it, we  will need the ID if the ID is not now, so we'll   add an add a fear. And we'll check if model.id is  not zero, then I want to show that Id in an hidden   property. So input type is equal to hidden ASP  four will be the ID. Then just like razor pages,   we want validations here. So we'll add class of  text danger. And we'll use ASP Validation Summary   for model only. Then we'll start displaying our  property in class of form group and row. And in   each one of them, we'll add a div give it a class  of column three. First, we want to display label   with ASP for this will be named. And we'll add a  div give it a class of column six in here, we want   the input type. So input ASP for tag helper. This  will be for name of the book, and we'll give it a   class of form control. Along with that, we will  add a span with ASP validation for for our name,   and we'll give it a class of text danger. This  looks good for our first property. Let me copy   this and paste it two more times. Let me do it  three times actually, after name, we have author   will copy this and paste it here. And we have ESPN  will copy and paste it here. Once we complete the   ESPN, next will be button to create or update  and a link to go back to the page. So we'll have   column three here, let me also make it an offset  of three. And this one will be three. In here,   let me have a pattern of type Submit. Since we are  in a form, this will be good. We'll add btn btn,   primary and form control. Then what we want  to display in button is we want the same logic   that we had right here. So we can copy this,  and we'll paste it here. Rather than edit,   we will display update or create. Next is a  link to go back. So right here, we can display   an anchor tag with the tag helper ESP action.  If we click this action, we want to go to the   index section of books controller. Since we are  already in books controller, it's okay if you do   not write ASP controller here. And just ASP action  is sufficient. We'll add some bootstrap classes   here btn success and form control and will display  back to list. That being said, let's save this.   And let's run our application. In here, if you go  to book list, and we do not have any data, let's   add a new book and hit Create. Great, we have the  validations. But when we hit it goes back. We do   not want that. So for that we will add the scripts  right here. So we'll add section scripts. And in   here, we will add partial name off. If we go to  our shared we have validation scripts partial   that need to rename and copy this. And we'll paste  it right here. Let's run our application and give   this another try. Let's go to book list. Let's  try to add one add create this time it did not do   a postback and displayed the validation, we will  fill in some details and hit the Create Nothing   will happen. The reason is we have not configured  the post action method for absurd. Let's do that   in the next video. Now that we have added the  absurd view, what will happen when we hit a button   with all the details. For that we need to add an  absurd post action method. So we can just copy   this and we'll paste it one more time. This time  we need to mention that this is an HTTP POST. This   time we need to mention that this is an HTTP POST.  And with post methods, we have to use validate   anti forgery token to use the inbuilt security to  prevent some attacks. That being said in absurd.   Right here you can use book And we'll retrieve  the object like this when you submit the form,   but if you go to the top right here you are  using bind property, because of which you do   not need this, you can directly access the book  object that we have inside our controller. Now,   within the absurd, what is the first thing that  you should check, we should check if model state   is valid or not. So, if model state is valid, only  then proceed further. If it is valid, then we will   check here, if both.id is equal equal to zero,  if this is zero, this means it is a create. And   we will do underscore DB dot books dot add. And  we will add the book object there. Else it is for   an update. So we'll do underscore db.books.we have  an update method in here. And we just need to pass   the object that has to be updated, it will update  this based on the ID inside this book object. Once   all of the system, we need to do underscore DB  dot Save Changes to push all the changes to our   database. Once the changes have been pushed, we  want to return back in razor pages we were using   redirect to page in MVC, we will use redirect  to action, and we can redirect to the index   action. So what it will do is after it saves the  changes, it redirects to the index action here,   and it will load all of the books again from  the database. This looks good. Let's run this   and give this a try. Let's go to book list here,  add a new book, we will fill in some details and   hit the Create button. Great. You can see our  data tables is also working with the new book.   Let's try to update this. You can see create  an edit both the functionalities are working   as expected. The only thing that is remaining  is delete here. Now when you click on delete,   you'll see a nice sweet alert. And if you click OK  here, it should delete the book. And it displays   nice toaster notification. You can see our create,  edit, as well as delete are working as expected.   Now with this you can see how we can perform CRUD  operations on booklist using an MVC project. And   this is just the beginning. That is much more to  explore in ASP. NET Core. Whether you go with MVC   or razor pages, what we just learned is the tip of  the iceberg. So if you're interested in learning   more about MVC or razor pages, I have many more  in depth courses in which we will be building real   world application. But that's all we had for this  course and good luck with your future projects.

Channel: freeCodeCamp.org

Views: 957,557

Rating: 4.8922973 out of 5

Keywords: asp

Id: C5cnZ-gZy2I

Length: 193min 18sec (11598 seconds)

Published: Wed Feb 05 2020