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

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 inside@item.id. 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.

YouTube TranscriptPreparing your results…

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

Video Transcript

Paste YouTube URL

Get Our Chrome Extension

Get Instant Transcripts: Just Edit the Domain in Your Address Bar!