ASP.NET Core MVC CRUD Operations using .NET 8 and Entity Framework Core - MVC For Beginners Tutorial

hi there in this video we will create an asp.net core 8 MVC application from scratch and we will perform Crow operations on a SQL Server database using ND framework core this will be a beginner friendly application and tutorial let me take you through the app that we will create we will create a new net 8 application from scratch using the MVC template and in here we will create multiple web pages to perform crowd operation so we want to create read update and delete the students that we are creating in this application so add student page will look like this it will have a name email phone and subscribed option on saving this we will redirect this user to the all students web page so we have the students web page over here which displays all the students that we have in the database and this is a SQL Server database and we are using bootstrap to style our HTML from here we can see the edit buttons which we can use to navigate to this particular student for example we can go over here and it displays or reveals more information about the student for example the phone number and the subscribed option we can use this web page which is the edit student web page to change some information and we can then save this information it returns back to the list and you can see this updated information again and again now if if you wish to delete this student you can also make use of this delete button which you can click and it'll delete the student from the database and brings back to the updated list over here I hope you will like this tutorial if you do please like and comment to show your love and subscribe to the channel to see more content I have created a folder for myself in which I will create my ASP net 8 mvcr application so you can create a folder for yourself and then and open Visual Studio now first thing we'll do after opening Visual Studio is to create a new project so on the get started page you can click on this button to create a new project and from here from the next page you'll be asked to choose a template for it now there are a lot of templates available from Visual Studio but we'll be mostly interested in writing in C language so I'll select C from here and I'll also select web from here because I want to create a website so I'll select that and in here I will now find a asp.net core web application I find one over here but this is using r p pages but this app this video is for MVC so I'll come down more and find asp.net core web app which is using model view controller and it states that a project template for creating an asp.net core application with example asp net core MVC views and controllers this can also be used for restful HTTP services but for our example we are going to use it to create a web application so I will select that and click on next from here it is asking us to configure our new project so I can give the project name the solution name and also where I want to store the project so I have created the folder so I will copy this path and come back to visual studio and paste it in the location over here now I also want to give the project name and we are creating a project to you know a crow operation for students so we'll create students we'll edit students delete and also view all the students so I'll call it student portal so student portal so I can have the project name as student portal.web and the solution name as just student portal so with those changes I can now click next from this screen it is asking us to choose the framework that we will use to create this project and I have a few of the versions installed Net 5 is out of supportet 6 is still valid because it's the long-term support s is there and we have the latest and greatest net 8 at this moment which is also a long-term support so I'll choose that if it is not available for you to choose you might have to update Visual Studio as well as installing the net SDK and runtime so I'll choose net 8 from here I will not select any authentication because that's not covered in this lecture and I will have the remaining settings as default and I will click on this button to create this project it might take a few seconds but Visual Studio has created an MVC application for us and you can tell that this is an MVC application because you get the default models views and controllers folder in our project and also if you go to the program.cs file which is the main file where we configure everything we can see that to the services of this Builder object we are adding the controllers with views so our controllers are over here we get a default home controller and the home controller has two action methods so these are our action methods we have the index action method method and the Privacy action method by default if you go back to the program.cs file the default value of the route is set to home and the action method is set to index so by default the application will come to the home controller and look for the index method and when it finds it it then renders this index View and how does it find the view it goes to the Views folder it goes to the home folder because that is the name of the controller and and it matches on the name of the controller so it goes to the home folder and then it should find two views over here one is the index view which relates to the index method over here and one is the Privacy view which relates to the Privacy action method over here there's another file in the properties folder which is the launch settings. Json file and it has the launch settings related stuff so we have the profiles over here we have the https profile which has the two URLs so if I run my application from this button and I have https over here it is basically you looking onto this URL so the server will run and it will load the website on this particular URL so let's see what we get out of the box I'll run the website our website runs and it goes to the default page which is home /index now it doesn't reflect in the URL over here it just shows the main URL of the application but even if I go to slome SL index it should come to this F same welcome page so I'll click enter and it comes back to this page so basically home/ index is the same as the homepage like this one and now if I want to go to the Privacy page because that's another page I it's if you look at the left hand bottom navigation it says it will go to slome SL privacy so let's go there and then it loads the privacy policy page which then if we come back to visual studio goes to this particular view in the home controller folder it finds the privacy. cshtml which is our view file and then loads this entire view now if I want to make any changes let's say this is an updated View and save it now Visual Studio is automatically hot reloading our application and displaying the changes back to the browser now there can be some time that it doesn't work but then you can always restart your application but most of the times it should work so if I come back and look at this view again it has automatically refreshed the application on the save and you can see the updated view over here so now that we have seen what we get out of the box in an asp.net core MVC application now we will go ahead and create the crud operations which is create read update and delete operations on our application and we'll basically take an example of a student so we will have a list of students we will also have the functionality to create a new student we will have the functionality to view the student details and then edit and delete the student as well so we will make use of Entity framework core to talk to a SQL Server database that we will create in the application as well and you know basically we'll perform all these SC operations so let's go back to visual studio and install Entity framework first I've come back to visual studio and the first thing I'll do is to stop the application now we want to install Entity framework core because we want to use Entity framework core which is a micro orm and we want to talk to a SQL Server database and ntity framework core makes our lives very easy because it handles all the connections it handles instances and we are able to talk to tables directly through Entity framework core so the first thing we will do is to install some packages which will install Entity framework core so I will come over here right click on dependencies manage new packages and over here I will browse I will go to the browse section and browse for two two particular packages the first one I will search for is microsoft. entityframework core. SQL Server so copy that and you basically can type it as well so you search it in the browse section and click and install this the next package that we will install is microsoft. NF framework core. tools and this will be responsible to do migrations which is a technique to create a database and you know basically stay updated and stay in sync with the database and the application so we will browse and select and install this package as well now that we have installed these two n framework core packages it is now time to create a DB context Class A DB context class is a class file which acts as a bridge between Entity framework core and the database and you using this class and the properties of this class we will be able to talk to the tables of the SQL Server from our application so let's create this class I will create a new folder for this class so inside the project I will right click on the project go to add a new folder and I will call this data inside the data folder I will right click on this add a new class and I will call this application DB Contex so I will rename this to application DB context. CS press enter to create this class file now this class file will basically inherit from one of the packages that we installed so it basically inherits a class called DB context and this DB context class comes from microsoft. framework core and this package was installed when we installed the two packages which is you know that be installed in the last lecture so click on that and this will import the using statement on the top now we want to create a Constructor so I will press and you know after clicking over here I can create a Constructor over here using CTO R press Tab and it creates a Constructor and to this Constructor I will pass the DB context uh options so DB context options of type the context that we have created so application DB context let's call this options and also pass it to the base class and this Constructor will be basically be using inside the program.cs file where we will be giving the DB context options from the program.cs file into the and injecting it inside the application DB context and we'll come to that in just a moment now that we have constructed The Constructor we will now be basically thinking about what we want to create read update and delete basically a table right an entity so for now let's create a model and inside the models folder we will create a new folder called entities and because this is a small application you know in bigger applications you can have multiple entities an entity is basically a class that has an identity so any unique identity it can be an integer or it can be a guid uh and any any class that has a unique Identity or ID basically is called an entity so right click on entities folder and create a new class and this will be our student identity so I'll rename this to student CS so you can call this our domain model or entity and inside the student class we will have a few properties that represent this identity so first of all we need a unique identifier so a property I will have the goodd property because that's a unique identifier and I will call this ID so the first property is ID which represents the uniqueness of this particular student then we can have a few other properties called name so property public string name then we can have an email so p o is a shortcut and double tab to create another property the type is string and we can have this as email then we can have a phone number so string phone number and we can have another thing called you know maybe they have sub subscribed to a newsletter or something because we we are capturing their emails we can also capture it as a Boolean flag that are they subscribing to our email or not so a property of Boolean and let's say subscribed so we basically want to capture all these details not this one because Entity framework c will automatically set this ID for us so we want to capture from a form we want to capture the name we want to capture the email phone and is the student subscribed to our let's say School newsletter so we want to capture that using CR operations so now that we have created an entity we will use this an entity in the application DB context and the way we use it is also by creating a property so a property which will be a DB set because a DB set is basically representing a collection a d BB set a collection of a particular type and the particular type here will be student so it is basically referencing a student collection and a student table you can say and the table name over here will be students and as we know that the application DB context is a bridge between our application and SQL Server so we can use we can make use of this property called students to basically access you know and you know play around with the students table that has been created or will be created soon in the SQL Server database now that we have created the application DB context we want to inject this DB context into our application using dependency injection and later on because we have injected this class into our application we should be able to use this inside the controllers and basically access the tables of the data database that we are about to create so the first thing we'll do is to inject the application DB context inside our application for that let's come to the program.cs file and after this line where it says builder. services. add controller with views we will inject the DB context so I will write Builder do services do add DB context and add DB context method takes a type and the type type of the DB context that we are trying to inject is application DB context so I'll write application DB context now it will have the options basically we want to tell the injected uh DB context which database you are about to create and which SQL Server we are about to use so we basically we will use the options parameter over here so options will be options dot use SQL server and this again comes from the Entity framework code package that we installed so we will be using a SQL server and that is what we are telling the application over here when we are injecting the DB context the use SQL Server method basically takes in a connection string so I will first create the brackets and then end this line but this method if we start it it takes a connection string of type Tye string so I will get the connection string over here from the Builder and we will be writing the connection string our sales which goes inside the application settings. Json file so first let's go to app settings. Json file and write a uh a connection string so after the allowed hosts property I will put a comma and then in double quotes I will write connection strings and this is an object so the first connection string first and only connection string that we have over here it's a key value pair so this will be the key name and I can write this as student uh portal and this is the key name and this will be the key value so the key value takes in a few things it takes the server name it takes the database name um and a few other properties so the first name is the server so server for me is server is dot which is the name of the server that I have installed and with this this name I am basically able to connect it to the database as well so if I disconnect it in SQL Server management Studio I'm able to connect to the server using the name dot if you have a different server name please provide that particular name over here inside the connection string next goes the name of the database that we are about to create for this particular project now we can say database is equal to the name of the database that we are trying to create so I'll say say Student Portal DP will be the name of the database I'm about to create if I come back to the server if I expand on databases I don't have anything called Student Portal DB at the moment so we want the application to create it for us after that we want to tell that this the connection is trusted so trusted uncore connection is equal to true and also trust server certificate is equal to true so if I hide that this is the connection string with the server details datab database details some certificate level you know uh stuff and some connection stuff as well so with this we have created the connection string and this is what we are trying to pull inside the program.cs file using the key name so back inside the program.cs file inside the use SQL server method I will say Builder so Builder do configuration. getet connection string method and the get connection string method takes a string which is the key name I can put this in the second line so that it is more readable and this basically takes the key name which we have defined in the app settings. Json so copy this key name and don't have a different key name to what you have over here because then you won't be able to make a connection this has to exactly match the name over here that you're giving so this will be how we are injecting our application DB cont text and we are telling the application for this context please use a SQL Server database and this is the connection string to this particular server and database now we have done all the ground workor and we have built all the pipeline to use Entity framework core so now we can run Entity framework core migrations to create ourselves a new database and the new table that we are telling inside the application DB context so this will be the table that we expect to create inside the student portal DB so for that we have to come to package manager console to do that you can come to tools new get package manager and click on package manager console now inside package manager console we are we will execute two commands in particular we will first create a migration and then we will run the migration to create a migration use the command add hyphen migration space and inside double quotes we will write the name of this migration because this is the first time we are doing it I can call it in initial migration and this can be anything in your words this is just a text and after that we will execute this command after this command has been executed we can see a a small change inside the solution Explorer we can see a new folder has been added which is called migrations and it has a new class file called initial migration with some randomly generated number if we open this file we can see there are two methods up and down inside the up method it is basically some you know C language stuff that is telling you know the application it's nty framework core is basically handling this all for us but it's basically creating a table called students with all these columns and where is this information coming from it's taking all this information from the application DB context so we are telling Entity framework core to create a new DB set which is a table in terms of SQL Server you know language so we are telling it to create a new table called students and the student Properties or columns will be this so we need ID name email phone and subscribed and this is what is reflected in a cop world over here so at this moment we only have created a class file nothing has been created inside the SQL Server database if I refresh it and expand databases I'm not able to see Student Portal DB yet so now the second command that we will run is update hyphen database and what update hyphen database does is it looks at the migration files generated over here and it also looks at the database if it is able to find the database it will execute what is not executed yet and it will sync up the database with the project and if there is uh a a database existing it will basically sync it up already so now if I come back and see it has executed you know the the migration file and if I refresh this database over here the server over here and expand on databases again we should be now able to see Student Portal DB and if I expand on student portal DB we should be able to see the only table which is the students table over here with the necessary columns so we have ID name email phone and subscribed so now we have created the database with the table and we have made use of Entity framework core to do all the heavy lifting for us now the next thing that we will be doing is we will create a new controller and some views for ourselves so that we can start focusing on the crowd operations and make use of this DB context file to do do all the crowd operations for us if you're watching this tutorial so far I just want you a couple of minutes to introduce you to my asp.net core MVC course on udemy this course is a 10 plus hour course that is best for beginners and by doing this course you will become a master at creating asp.net core mvz applications this course is a very systematic and structured course so you don't have to solve puzzles by looking at a th000 different videos on YouTube the course includes the introduction and Basics crowd operations Entity framework core repository pattern in asp.net core asynchronous programming domain modeling authentication and authorization multi-roll authorization Rich Text Editor in asp.net core applications uploading images to Cloud image provider server side and client side validations seeding the database routing domain modeling versus view modeling and so much more so if you want to become a master I would love to see you in the course use the link in the description for a huge discount so let's continue now with this [Music] video so let me just quickly close all these files first and let's create a new controller so I'll come to the controllers folder right click over here add a new controller and I will be under the MVC I'll choose a controll controller MVC controller empty click on ADD and I'll give it a name and the controllers always follow with the controller keyword so I will write students controller. CS because students is the functionality that we are building we are building crud operations for students and the first action method that we are going to make or the first web page that we are building is the add student web page so first of all let me change this action method to add ad and we will decorate this method with the HTTP get keyword and this method will be used when the web page add add Student First shows up so first of all we have created a method inside the students controller now I want to add a view for this action method so I will right click on view over here and add view now I will select razor view empty click on the add button and over here we will give it a name by default it shows index. CSH HTML but we have created the action method called add so the view name will be add. CSH HTML so that the uh you know asp.net core is able to relate this action method to the view in the folders over here and it'll find it and then render it so over here we will first of all write some HTML so that we can display the ad student web page we'll first start with the uh the heading so I will create an H1 tag and say add student this will be the heading for the page after that I will use uh bootstrap to create different form inputs so I will create a div first with a class of margin top hyphen 3 this will be like a group and inside this group I will have two things one will be the label and the first label will be for the name because we want to add a student and you know let's see the student entity first we want to get the name email phone and subscribed option these four properties from the form that we are creating in this view so we will have four type of groups over here so first one is label of name and I'll give it a bootstrap class form hyphen label then this will have an input element which will be type of text because we are capturing a string I can remove the name and value attributes and over here here I will give it a class as well form hyphen control so all of this are bootstrap classes so nothing fancy going on so I'll just save it and just run this application without debugging and see how this looks and we'll also see how we can navigate from the homepage to the add students page because we know that you know students is the controller name so this should go to SL students SL add which is the name of the method so the application is running we will quickly navigate to add students by going to/ students slad and if I enter you can see that the we have loaded the ad students web page with one form input so we have a form we are building it uh we just have the name over here but we will add email phone and the subscribed option as well so let's go back to the uh to the um project and add few more controls over here so we have added the name let us add the email as well so I'll copy and paste it and change the label to email change the type to email as well and this will be our email input element the next one we need is the phone so phone we are recording it as a string so we'll just have text over here and the final one is uh the subscribed option which is a checkbox so it is slightly different in format you can go to the bootstrap website and you'll be able to know how I'm formatting this HTML but in here I'll just create a div with a class of margin top hyphen 3 similar to this one but inside here I will have the input first so input and type is checkbox I can get rid of the name and value from here and give it a class form hyphen check hyphen input and I can give it an ID as well ID is equal to subscribed and after that this will follow the label so for other elements label had label was you know uh before the input element but in here because we are using bootstrap the order of elements are different so now the label will say uh subscribed and this will have a few classes and attributes as well so class is equal to form hyphen check hyphen label and then this will be for subscribed so whatever idea you have given over here just put it over here so that we if we select the label as well it will check or uncheck this checkbox as well so if we save this and look at this we have hot reloaded our application if I click on here or here it works so the checkbox is working as well now we need a button to sub submit the form so I will create another div with a class of margin top hyphen 3 and then inside that we need a button type is equal to submit and then we have a class is equal to button space button hyphen primary again bootstrap classes and the label for this button will say save this is a save button so on saving on clicking on this button whatever information we have filled over here we want to record this information and we want to send this information back to the HTTP post method which we don't have at the moment so let's create the submit method so the first of all I'll have it as an HTTP post method public I action result add you can give it a different name as well but add and if you give it a different name we'll have to make some changes in the form so that's why I'm keeping the name as same but you know we'll have to now think about how we are going to access this information over here so we need four things back inside this method we need the name email phone and subscribed option so that we can save this information in the datab base so for this view models are helpful we will basically add a view model over here we will bind The View model to this input elements and when the save button is hit or submitted we will get the information over here and we will get the whole view model with us so let's first create a view model so inside the models folder I will right click add a new class and I will call this add student view model. Cs and this will have four properties and I can just quickly copy paste these four properties from here from the student uh entity and come back to this view model paste it over here here now and I can stop debugging because it was already running doesn't like that so I'm uh I've created a new view model now I can go back to the Cs HTML and over here I can write at model and this is how we are binding the model to the CSH HTML so at model now I'll give the full path to this file which is student portal.web do models it's in the models folder and then we have the add student view model so by writing this line we can now access the properties of this view model inside the CSH HTML over here so now we can bind this inside this uh HTML over here using the ASP Hyphen for property and what it will give us is it has access to this view model and it will give us control space to reveal the properties and it'll give us all the the properties over here so we have the name email and we'll also have phone and subscribed so this input element is for the name it is there to capture the name information so I'll say ASP for name and similarly this will be ASP Hyphen for email this will be ASP Hyphen for uh phone then this will be over here ASP hyphen 4 subscribed once we have done that let's save it and we will able to we want to access this view model over here so let's get this as a parameter inside the add method which is the HTTP post method so let's say the parameter is ADD student view model let's give it a name let's say view model and let's just return the view itself for now so we are just returning the view I'll put a break point over here so that we can see the values and let's run this application let's see what happens when we run the application and let's say we input some things uh student a 1@ email.com and some phone number and maybe subscribed as well if we click on Save we should get the data back in the controller but nothing is happening even if we click the save button multiple times nothing is happening because nothing is there we don't have a form that is getting submitted so we need a form that encapsulates all of this information this HTML and then this button will be used to submit this form so let's create a form and I can get rid of the action or method over here method is post and I basically want to take this form element and put it right at the bottom so basically the form element has all of this HTML input over here so now if we hot reload our application because the button sits inside the form it will actually submit this form and we should be able to get the debugging point over here and be able to access this information so let's go back to the browser let's put some information one more time let's say Samir some email and subscribe let's click on the save button we didn't get anything because we are not running it as debugging so I'll have to stop the application and run it as you know with debugging uh to be able to get this so the application is running again you know the drill let's go to students and add and over here let's just quickly submit some information and save it and now it comes to the HTTP post method over here and if we hover over the parameter that is coming in which is the view model expand that we are getting all the information back over here so we can see that we are able to submit the form and get the information now it is time to make use of the DB context file that we created so that we can make use of ND framework core and save this information in the database so I'll stop the application again and make use of this information to use this information we will first inject the DB context class inside the controller and for that we'll make use of Constructor injection so I'll create a Constructor CTO o R press Tab and in here I will inject the application DB context so application DB context give it a name let's say DB context and press control Dot and this will create an assign this field and now we'll be able to use this field over here we don't have to new it up because dependency injection is taking care of the instances and we can just use this DB context over here and we'll say um we'll just make it asynchronous as well so we'll make it a sync task of type I action result this will make it asynchronous and we'll await on the DB context Dot and we should be able to access the property of this DB context which is the table which is the students table so students and we have the add method over here we have the add asynchronous method as well so we'll make use of that add asyn and it needs the student entity so we have currently the view model but we need the student entity which is this one so let's create the student entity I'll create a new student where student is equal to new student and this student is coming from entities and it needs a few properties I won't give the ID because Entity framework code takes care of that I will just give the name which is coming from this view model model over here and the form so name is that then we have the email is coming from view model then phone also coming from The View model and the subscribed option is also coming from view model so we have now created the student entity to save now we'll just pass it to the add async method over here and that will basically pass this information to Entity framework code to save it but it won't be able to save it before as this is getting highlighted already Visual Studio is getting smart enough we want to save the changes nothing is getting saved at this moment we have to write this line await DB context Dove changes async only when this line is executed the changes that are not saved yet will be saved to the database so we'll do that and then we can return the view so let's run this one more time and we should be able to save the student to the database now let's go to the students page and in here I'll create a new [Music] student subscribed and let's save this we have a debugging point which we don't need so I'll skip that I'll take it out and just press continue and it will just come back to the same page but we now want to check the database so if I come back in the student portal DP and let's select on the students table let's select top thousand rows we should have one record over here and that will be the record that we just created and that is there right over here so we have given we have been given a unique identifier by Entity framework core we have a name email phone and subscribed option as well whatever information was passed from the form we have captured it and we have saved it to the database so this finishes our C which is creating from the crowd operation the next part will be you know displaying this information as a list now to create a list of all the students that we have in the database we'll have to make use of DB context again to retrieve the list from the table so for that let's go back to our controller I will first stop the application and we have the add functionality over here but we will now start the list functionality which is listing all the students so I want to create a new web page so I'll create the HTTP get method I'll say public async task of type I action result I'm doing this I'm making this method Asing because we want to make use of TB context to retrieve the list from the database so ising U task of I action result and then I'll call this method list and over here we will utilize DB context I will say await DB context do students. to list async so this way we are getting the list back so I'll store it in a variable we'll say students and now we have students we want to pass this students model into a view so let's create a view for list so I will come over here right click and add view razor view empty page click on ADD and over here I will rename this to list because the name of the method that we are creating is list so list. CSH HTML click on ADD and in here we will basically use a for Loop now because we have a list of students we'll create a for Loop and display the students so first of all I'll create the heading we'll say students you can say all students if you want to and then we will create a table this will be a bootstrap table if you are unsure of the classes that you want to use you can go to bootstrap website and you know see the information from there so table we will have a t head and T head will have a single row with th we want to show the ID name let's say uh we have ID name and maybe email as well and after that we'll have an action button over here so I'm creating another th which will be empty for now but after the T head I will have a t body inside the T body I want to create a for each Loop so I want to create every Row for every record that is present in the table so if for Loop so at for and or actually a for each so add for each and we want to specify the collection to run this for each loop on so I want to model or I want to specify the model that we are using so at model will become let's go from the beginning student portal . web do models. entities do student and it's a list of students that is coming in so I will wrap this in a list so it's basically the model is a list of students and this collection will now become model because the model itself is a list of student entities so now we can you know rename this this item to to say student and we want to display each row for each student so TR and every TR will have a few TDS the first will be ID so I can say at student I'm making use of this variable over here do property ID then same thing at student do name and finally we have at student. email and after that we will create another uh item over here which will be like an edit button you know we will take you from here from this list page to a separate page so that you can view this student and uh you can edit the student and you can delete the student as well so I'll quickly create an anchor button and say edit we won't have much information here at the moment but we'll come to that soon so I've created this page and from the students controller I have this get item now I also have the view so I will say return the view and I want to pass this collection to this view so I can easily give this collection to the view method so save that now our list is ready what we can also do is can add a quick you know um link to this page from the uh layout page like we have for home and privacy so inside the views inside shared we have the layout page and we will have uh let's say over here we have the homepage and the Privacy page so let's also create a page for students so I'll copy and paste this and just change the controller name is students and the action name is list and you can say all students because this page shows you all the students so now it's time to run this application so start this the application is running and we can see all students in the navigation bar and all students should take us to students slash list and it does that and when it does that it goes to the get method it takes the DB context and it retrieves the list of students that are present in the students table in our SQL Server database so right over here and if we want to test this out we can quickly edit it and add one another student over here so let's do that I don't have a guid with me but I can quickly go online I quickly went to the online GID generator and have a new GID and let's say this is John and John email.com 222 this is uh zero for false we have saved a new student in the table so if I refresh this list we should get two students now and that is right so we are getting uh the list back from the database and this is what the read in the crud stands for so we are reading and creating students now the next thing we will do is we will link this edit button so that it takes us to the edit page and we'll be able to see more information of the student like the phone number and the subscribed option we'll be also able to change that information and save it or update it and we'll finally build the delete method but first let's create a new page and Link it to this edit button so let's come back to the controller I can now close the layout page as well and the list page this view model and add page as well so inside the controller I will create a new web page for the edit option or update option so let's create the HTTP get method first public async task of type I action result and this will be let's say edit and edit will take a goodd because the edit page wants to show the information of one particular student when you click on the edit button of a particular student we will retrieve the information again the any you know there may be some changes in the database so we want to get the information again and display it so as part of the edit parameter we will get a GID because that's the unique identifier for the student and let's call it ID now we will make use of DB context again to retrieve this unique student so let's say await DB context. student find async and find Asing takes the unique identifier which is ID now we will store this information in a variable so this is the found student now the information if I have over the student you can see that the student is inullable student now this information of the student this could be a student an actual student if we were able to find it using this ID or if the ID passed was a junk ID or let's say a student ID that doesn't exist in the database then this student will be null so we will have to make sure you know we know this information so once we get this information we will return it to the view but we haven't created a view yet so let's create the edit view so right click on this button oh I have to stop the application first make sure you do that right click and add a new view we will rename this to edit because the action method is edit. CSH HTML now over here this view will look quite similar to how we have the ad page so to save some of my time and yours I will go to the ad. CSH HTML I will basically uh let's say copy all this information come to edit and paste it now we will just change this HTML based on what we want so let's change it to edit. CS sorry edit. student as the heading we will also reference the model so at model and this comes from student portal. webmodels do student inside entities and we will want to show the ID as well so the first thing that we will show is the ID and let's change this asp4 to ID and also the label to ID we will also change this to a read only attribute so that we are not able to change it and we will have the second as name we want to show the email phone and subscribed option all this stuff is quite similar to how we had in the ad method but this time this student model we are actually passing an actual student information inside this form to display it and again we are reading it when this button is pressed this form is submitted and we are reading this changed information to update it in our database so once this HTML is done and somebody changes its information and presses the save button we want to capture this inside the post method so let's create the post method HTTP post public async task of type I action result I'll call it edit and the edit method is getting the student so student model I'll call this uh student or model let's say view model now we want to make sure make use of DB context again we would want to First retrieve this student from the DB context so I'll say await DB context do students collection doind async and we pass the view model. ID that is coming in now we capture that information in here so VI student now we first check if student is not null that means we actually are working with the real student that we have in the database and not some junk value then we update this information so student dotame is equal to view model. name and then we also update the other values over here like the email then the phone and finally the subscribed so now we have updated all the information over here uh only when the student was not null and then whenever that's done we will use the await DB context do save changes async method to update this information in the database now when the save is done as well we can just return redirect redirect to action and let's say if these if they use the action value yep and the controller name as well so we'll give the action uh value we'll pass it back to the list so I'll say list and the controller name is students so whenever the update is successful we are returning back to the list of students and you'll see the new updated values over there in the list so it's now time to test it out and we can do one more change as well as well we have the edit. CSH HTML and we know that you know when we are getting the student this could be a junk value a junk ID and your student is a nullable type so you may not get the student in the view so it's a good option to check it over here so we'll say at if model is null then we want to display some information we can go and show a bootstrap alert but for now I'll just say a I'll display a paragraph and say no student was found with this ID right and we can put the other thing in an else block and else all this information that we have over here and actually I'm mixing some languages but we'll say if model is not null right so we have all this information and we are saving this well it'll be better not to use this but to use this else directly because we don't need the add sign over here uh it's already in the C syntax so let me format this really quickly using control KD so now we are showing all this information and we want to see this form and somebody submits this updated information we want to capture it and update it so it's now time to test the update functionality let me run the application so the application is running let's go to all students now we want to connect the edit button to the edit page so what we can do is we can come back to the application just quickly and in the list. CSH HTML so let's go to students folder list. CSH HTML in here we will say this is ASP um controller and this one this should go to the students controller and ASP hyphen action is the uh the edit one and there's also a route which is the ID so we also want to get the ID of it so we want to say ASP hyphen route hyphen ID is equal to and we want to give the ID as part of the route in the link so at student do ID and let's save this we can also give it a bootstrap class so we can say class BTN BTN hyphen primary or anything that you wish now we have saved it and we'll come back it looks like a button if I hover over it you can see in the bottom left hand uh corner over here it's going to for/ students sledit and then the unique identifier for this particular student ends with 19a and if I come over to the second row if I have over the edit button it shows the unique identifier of the second student so it's passing the correct ID to the next page so if I come over here click the edit for John over here let's click edit this is now going to the edit student page you can see in the browser over here as well in the URL it's showing the ID it's showing the name email phone and subscribed option as well and that's you know this is we have done it already so now if I want to change this information let's say I click the Subscribe button and type 333 so I've updated a few information in here let's click the save button and this should update this information in the database so click the save button it redirects back back to the list of students we can't see the changes because you know we we didn't make a change to the name and email but if you go to edit you can see 333 and subscribed was changed and you can also change the email to say John uh do and name is John do as well so save that it should reflect in the list over here right so this is going on really well we have finished creating reading and updating students or entities now the only thing left and that is super easy to do is to delete it so if the user goes to the edit button sees this information and say we should have a delete button over here so that when a user clicks it it deletes the student and goes back to the list page so this is what is next let's go back to the application stop this and we want to create a new action method so we will create a new HTTP post method so HTTP post and we'll say public async task of type I action result and we will call this method the delete method and delete method only takes the ID it doesn't need anything else well actually we have the model ourselves so we have the student model so we'll just make use of that so student view model we get the information inside here and we will make use of the DB context so we will say where student is equal to await DB context do students doind async and give the ID so view model. ID and after that we will just check if the student is actually you know a valid student so it's not null so student is not null and if it was not null we want to delete this uh student so we'll say DB context dot uh students and we can make use of the remove method inside students and pass the student entity which is right over here which is our view model itself so use the remove method and then we want to save it we want to reflect the changes in the database so we'll say await uh DB context Dove changes async and finally when all of this is done we want to return and redirect back to the list so I can copy this line and paste it over here so after everything has been done we will redirect back to the list page and we should see one less record over there so we will now now create the delete button inside the edit. Cs HTML so in here we have a single button we will copy that and paste it one more time I will rename it to delete and we can also change the class from primary to danger to make it a red background and also give it a margin left or margin start of three and we will have two different properties or attributes this time we will say ASP hyphen action and we will also have ASP hyphen controller we want to go to the a different action method this time we don't want to go to the edit action method we want to go to the delete action method so the controller name is students and the action name is delete so when this button is pressed it will actually come to the delete method when the the updated or the update method button is pressed it will come to this HTTP post method so let's run our application and see this in action so we'll go to all students and we'll click on Ed any one of them let's quickly check if the edit is still working so I'll save that and come to joh do again it's still working now I want to delete this particular student I'll press on the delete button we get into this error and that say is the instance of student uh cannot be tracked because another instance the same key is tracking it and we get the error when it's trying to remove it so basically what Entity framework code does is it's it's tracking this entity behind the scene and you know it's unable for us to remove it because it's tracking it so we can do two things over here or we'll have to make two changes over here I'll stop the application first I'll change this from find async to first or default async and this this is this uses a Lambda expression so X such that x. ID is equal to view model. ID so this is the same thing as before it's basically getting the ID uh a student based on their ID and before that we want to also introduce as no tracking so we don't want any framework code to track this entity so we'll say dot as no tracking and what this will do is it will not do any tracking and we should be able to delete this student now so I'll run the application again to test it we'll go to all students we'll go back to the same same student that we want to delete which is the second one click on edit we'll go to delete and press delete and now we are able to delete the student and we only have one in the list over here so this completes the delete functionality as well and we have finished all the crow operations create read update read and these are the key functionality to any web or API application so make sure you know you go through the concepts again and you know uh you revise all the concepts

Channel: Sameer Saini

Views: 5,134

Keywords: asp.net mvc crud, step by step tutorial on asp.net mvc crud, asp.net mvc, asp.net mvc tutorial, asp.net core mvc, asp.net mvc project, asp.net mvc tutorial in hindi, asp.net mvc project start to finish, .net 6 mvc, asp.net core mvc 6 tutorial, asp.net core mvc tutorial kudvenkat, asp.net core mvc sql server, asp.net core mvc crud operation with entity framework, asp.net 6 mvc, asp.net 6 crud, mvc crud operation example in asp.net c#, mvc crud operation using entity framework

Id: _uSw8sh7xKs

Length: 68min 10sec (4090 seconds)

Published: Mon Jan 08 2024