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.