Using Partial Views with Validation Scripts and Anti-Forgery Tokens

In our ASP.NET Core application, we will be using partial views to add functionality without having to recreate entire views from scratch. One common use case for partial views is to include validation scripts that need to be renamed and copied into our shared project. We can simply copy the script into our shared project and run our application to test it.

When adding a new book, we encountered an issue where the application did not post back and displayed validation errors instead of allowing us to proceed with the form submission. Upon further investigation, we realized that the reason for this was that we had not configured the POST action method for the absurd view. To fix this, we will add the POST action method in our next video.

Adding an Absurd Post Action Method

To create a CRUD (Create, Read, Update, Delete) system, we need to add an absurd post action method. We can copy and paste the following code into our controller:

```csharp

[HttpPost]

public IActionResult Create(Absurd model)

{

if (!ModelState.IsValid)

{

return View(model);

}

if (model.Book.Id == 0)

{

DB.Books.Add(model.Book);

}

else

{

var book = DB.Books.Find(model.Book.Id);

book.Name = model.Book.Name;

book.Author = model.Book.Author;

book.Publisher = model.Book.Publisher;

book.PublicationDate = model.Book.PublicationDate;

book.Status = model.Book.Status;

}

DB.SaveChanges();

return RedirectToAction("Index");

}

```

In this code, we first check if the model state is valid. If it's not, we return to the view with the error messages. We then check if `model.Book.Id` is equal to zero, which indicates a new book being created. In this case, we add the book object to our database using `DB.Books.Add(model.Book)`. If `model.Book.Id` is not zero, it means we are updating an existing book, so we retrieve the book from the database and update its properties.

After saving the changes to the database, we redirect the user back to the index action using `RedirectToAction("Index")`.

Understanding Absurd

Within our absurd view, there are several key things that we need to check. First and foremost is model state validity. If the model state is invalid, it means that one or more fields in the form have errors, so we should return to the view with error messages.

Next, we need to check if `model.Book.Id` is equal to zero. This indicates whether we are creating a new book (`Id` equals zero) or updating an existing book (non-zero value).

Finally, within our absurd view, there are several properties that we can access directly on the book object without needing to use binding properties. These include `Name`, `Author`, `Publisher`, `PublicationDate`, and `Status`.

Conclusion

With this article, we have seen how to create a CRUD system using ASP.NET Core MVC. We have covered topics such as using partial views with validation scripts and anti-forgery tokens, adding an absurd post action method, and understanding the intricacies of our absurd view. Whether you are new to ASP.NET Core or are looking to improve your skills, this article should provide valuable insights into building robust web applications.

Future Projects

While this course has covered the basics of creating a CRUD system using ASP.NET Core MVC, there is much more to explore in terms of advanced topics such as using Razor Pages, integrating with databases, and performing complex operations. If you are interested in learning more about these topics or want to build real-world applications, I have many more in-depth courses available that can help you achieve your goals.

For now, we will conclude this course and wish you the best of luck with your future projects.

"WEBVTTKind: captionsLanguage: enHi 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.\n"