DotNet Core MVC CRUD With Dapper

hey there everyone it's ravindra here back with another video in this video we will learn how we can use Dapper with the stored procedures in this process we will create a DOT at core MVC app and along with it we will perform some current operations in this way we can actually learn a module of real world project if you want to learn more about MVC I have few courses for that one of them is MVC class course other ones are MVC projects I will put down links in description box so you can check out if you want if you find this video helpful then please hit that like button make sure to subscribe this channel to get more videos like this so let's get started since we are using Tapper here so we need to follow the DB first approach actually it's not necessary to follow you can create MVC app first then you can come here and create a database but we are going to follow the database first approach so we are going to create a database first then we will create a MVC app okay so press Ctrl n and we'll create a database first so let's create a database here create DB sorry create database let's name it Dapper MVC demo press F5 it will create this database for us and if we type here use type or demo then we will enter into this database now anything we will perform will be happen in Dapper MVC demo database that's it now just create a table create V8 Okay so create okay create table and it will be dbo dot person no ID end primary key identity so this column will be identity it means we we are not going to enter any value to it it will be Auto generated now here another thing will be name let's name it first name our name will be enough name and where care let's say 100 will be enough and it will be not null next thing will be email and where care 100 not null okay another one will be address and it will be in where 200 not null press F5 and we are done here so let's type here insert into person values we can write here name address name email address values in one value will be let's say John Doe email John at the rate gmail.com address will be x y z x y z okay so we have entered our dummy value here so let's add another value here John to 1 1 and just just type here anything anything what you want add this one okay so if we type here select as check from dbo dot person so here we have these two records okay now let's create a stored procedures here few stored procedures here so first one will be add create procedure SP read person and it will take few parameters here first one will be name and work 100 then another one will be email and worker Android another one will be address and where care 100 200. okay begin and so let's type here insert into dbo dot person values name email address sorry it should be here values should be here values now we will pass some values to it so it will be name email address okay I just forget here as begin and now it is fine so we'll create some more procedure here let's name it up to eight percent and it will also take ID and where sorry ID int that's it now here we will pass we have to change this query so let's change it to it TBO dot person set name equals to at the rate name email equals to email equals to at the rate email password address equals to at the rate address since it's a keyword so we need to put a bracket here okay where id id equals to activate ID that's our update query SP update person yeah everything will be fine let's create it fine SP get person SP get person and it will take only one parameter which will be ID that's it and just type here select asterisk from person where where ID equals to ID and we can also type here dbo although it's not a mandatory okay so we are fine so let's SP get people that's it and remove this where Clause from here and we are fine last thing we need here delete person oh sorry I have done a mistake here get people will not take any ideas so we will remove this procedure so just type here remove procedure or just we can type here remove proc name of proc or procedure remove if I type here d b o then let's see so I am forgetting it so I'm just going to search in Google so here I am getting a link drop proc dbo dot whatever it is and if I go here I am typing here remove that what does a mistake here so it should be drop okay so apart from the mistake I need to remove it from here and we will create it again so just remove it from here create procedure SP get people as begin selectastic from TBO dot person press enter okay delete person delete person and here we will pass a parameter at the red ID int as begin and and delete from person actually we do not delete any record in actual projects but just for the sake of deleting I am going to teach you here so do not follow this approach in real world project never delete any record just just set a is deleted value to the true okay delete from dbu.person where ID equals to ID equals to ID okay that will be fine so I guess we have created our stored procedures so let's check here just refresh this and okay why I am not refreshing my database anyway it should not be a problem I will reconnect it again and here we have this stepper MVC demo here we will see programmability and here we will find our stored procedures speak create person delete person get people get person update percent here you can see that it won't take any parameter it will take these parameters that's it so now we will create MVC app now so but I want to say one thing when I will create a connection stream I will put a dot here in your case that might not be always true so it is my actual server name okay here might be like this SQL Server so since my server name is simple it does not contain any backwards slash SQL Express thing so I can just access it with this Dot Okay so that's it let's close it for now and let's remember the database name here Dapper MVC demo okay so Dapper MBC demo that's fine so let's create a new project here and we need to create a new project so just type here MVC let's filter this thing and here we have this this thing usb.net core web app with model view controller create a next button that's fine Tapper MVC demo and I'm going to change the location it will be a solution name so we will keep the solution name Tapper MVC demo and here we will type dot UI okay so our solution name is Tapper MVC demo and project name is this click on next here 37 this this this okay click on next now we have this app but we are going to add another project here for our database operations so just click here and just search here class Library and add this one class Library click on next and just name it Tapper MVC demo dot data it will be your data layer so that's it okay so we have created another project here so let's delete this guy from here okay sorry I have accidentally deleted this program.cs file I had to restore it from the recycle bin so you do not need to delete this it's a core of our application I was going to delete this class one dot CS we do not need it okay so in this project we will in this project Tapper MVC demo.data here we will perform our all DB related operations and here we will perform UI related operations like we perform here MVC app related MVC app related operations so that we can use the solid principle here and we will separate our database from our UI so if in the future we want to change anything to our database part suppose we want to use another database there or we want we do not want to use Tapper now I want to use Entity framework in future so I can change those things here so that our UI project won't break in future if I make any changes here in the data project so we are separating the things separating our database things here and UI things here one more thing we need to do just right click here in UI project and give here project reference click on this guy and we are fine so let's define a connection string here so type here connection is strings con equals to this sorry this data source equals to Dot here is a semicolon and initial catalog initial catalog will be our database name so it will be Dapper and we see MVC demo that we have created earlier and here we will just type not here here Integrated Security equals to true so that we do not need to enter any username on password if we allow Integrated Security to so it is our connection listing and it might give some error in future so it might not be 100 true we will see it in future now we need to install few packages so we will install it from here you get package manager package manager console and you can also install it from here manage package manage nougat package manager whatever it is so you can search it here any package suppose we want to install Dapper so we will search here dapper and click on this and click on select this option therefore MVC demo data and click on the install button here it is a good option because you do not need to remember the name you can just search it here and you can also alter the version if you want some other version if you are using an older version or not.net core then it might be it might not be supported for that one so you can change it from here so here we can also see its documentation and we can see its dependencies so it is supported for dotnet 5.0 and it is also supported for dotnet framework for point x that's good so I guess it's supported by all the Frameworks so we do not need to worry about it another way here that I was talking about we can also install it from here package manager console and we just type here install package Dapper but before that we need to change this thing Tapper demo dot data so our default project is UI project but we need to install these things in the data so don't forget to change these things I am reminding you once again our default project is demo MVC data demo MBC sorry Dapper mvcdemo dot UI we need to change it 2 Tapper MVC demo dot data so we will install our packages inside this project so press enter and here I am getting a huge error because it's a wrong command it's the right one install task package Dapper and we are done I have a package we need here is this one Microsoft dot extensors dot configuration dot abstraction because we cannot access our configuration file directly in the class Library so we need this package to access our configuration file so if we want to use I configuration interface we cannot directly use it we need to install this packaging last packages we need here SQL data client so let's type just press up buttons and here just try to remove this guy and just type in Microsoft yeah data dot SQL client because we are using a skill server so we will use here SQL client yeah we are done and we have installed all the packages you can double click on this project and you will see here we have installed Dapper this package and this package also that's it that's good now we're done so we'll create a folder here let's name it a data access data access inside here we will create our data access class one more folder we will create here we will repository but we will create it in future so let's create a class here and name it SQL data access SQL data access dot CS that's it now here we will just change it to public and here we will write ctor it will create a Constructor for us I configuration configuration press Ctrl Dot and click here it will add this line here that's good and remove these things these are unnecessary thing and in dotnet 6 we can also remove it so it is also an expect acceptable let's name it config that's good right click here sorry not right click press Ctrl Dot and we will get press Ctrl dot means period symbol so we need to press Ctrl plus this symbol period symbol or dot symbol so press Ctrl period symbol here and you will see these options here we will use this one create and assign field config if we click here it will automatically create a field here but we will need underscore here so that we can distinguish both of this okay so we are good here now we have done few steps now we will create our few not few just two methods to access the data from database and we will create here uh generic methods so first we will use a package here so just type here dapper okay and add this package also microsoft.data.sql client that's it now we will create two methods here and first one will be public housing task i enumerable t a get data so with this method we will fetch the stored procedure which will return us data either it is a collection of data or it is a single row so if there are multiple rows or there is a single row it does not matter we will use this method for both of the operations it is simply returning us a innumerable type of T so it is a generic method and here we are defining a t and P so T is the type of written data and P is the type of parameters so which type of parameter we are defining here so there will be a type of P so here we will Define string SP name parameters and here is connection ID equals to con and we have defined this Con here we can see it here con that's fine so now let's create a connection and it will take this thing config.getcontiction listing connection ID so we are simply fetching connection string from here from here or app setting.json with this line now it will return connection dot query using it is a method of dapper here we will pass the name of stored procedure parameters and command type will be command type dot stored procedures now we will Define another method and all the insertion or update operation will perform here so it will take three parameters name type of parameters and string and it will not return anything so we are not defining here two parameters like we did here T and P so it will just take one parameter t okay so we are same we are doing same here we are creating a connection and we are writing here connection dot execute hashing and it will take three parameters from us first one we will store procedure another one will be parameters and command type stored procedures so it is looking fine now so what we can do right now we need to create a interface so I will just type here I SQL data access right now we do not have an interface with this name so we will press here Ctrl dot or control period symbol and here we will have this option generate generate interface is equal data access in a new file so I will click on this option and let's see we have this interface here okay now what we will simply do here just copy this thing good and paste it here and another thing will be this one and paste this guy here press semicolon here and we are good so what we can do right now we can go here in the program.cs and we need to register this service here so we will go here and we will just type here Builder dot services Builder dot services Dot add transient now just type here I SQL data access and it will add this line here comma SQL data access we are good now we have added this service to our whatever it is we have registered this service so we are done here and we will create a repository now repository or repository whatever it is so let's create a folder here and name it Repository Repository and we will create a person repository here so it will be person repo Victory dot CS so okay that's good public we will create I person report Z3 we'll create interface also so press Ctrl dot generate interface in a new file place it so now we can also register this service because we need to register it in future so we will just register it right now so I person Ripple the tree press Ctrl Dot and add this it will add this line here just change it to person Repository it's good so we can close it now we do not need it and we will Define some methods here but before that just remove these chunks here they are unnecessary packages and just do this okay so it look much more cleaner let's leave a space here okay so right now we need to do one more thing here before moving further we have to create folder models models and we are going to Define some models here so first one we first model first folder will be here domain and here we will Define our database models so just type here add a new class and here we will Define person dot CS and just type here public and remove this Chunk from here I do not need it and yeah that's it public person ID that's good string name and we had another thing will which was email and last one will be address and these will be in the labels so put a question mark here that's it and these fields will be required so put a required here required here and here actually it is not required I guess so that's it so we're done here now move to the repository section now open the person repository class and here add these packages using tap let me see demo.data dot data access and models dot domain from here we will access the person class now here just Define this field high SQL data access underscore DB and now Define a Constructor we will assign this parameter to this field here okay now what we need to do here first we will create a method called add async and it will written a Boolean value and take a parameter take a object of person as a parameter and now we will Define a try block here and we will write this line of weight dots DB dot save data and inside this we will Define name of our stored procedure now we will pass this Dynamic object from here it is not any strongly type it's just a dynamic object with these properties name email and address because we need these fields or these parameters in our store procedures and since it's a addressing method and we are using a save data method which do not written anything so if we look here we will see that save data method taking a name stored procedure and it will take a parameters from us okay so here we will just return true so that we will get notified that we have successfully added data here we will handle exception and in the cash block we will return the false here we can log our exception if we need now let's add another method here and name it update async and it will be the same as the previous one but we can pass a whole object here because it will also need ID project sorry ID parameter in the previous previous method we are not passing ID here that's why we are not passing the whole object but here we can pass the whole whole object that's it so now let's go here return true and add a catch block let's define another method here delete async and it will be the same as previous one but it will take this object with property ID only run true from here and in the cat block in the cache block written false that's it so let's go here and here we will execute this method get data and here we will pass here person and dynamic because person will be the written type and dynamic will be the type of parameter and here it is the name of parameter and here it is a dynamic parameter that I was talking about so we are passing a dynamic object here and it will return it will return a result but in the result we will get the list of data so we need to write here first or default and now we will Define get all async it will be the same but we will not pass any data here you can see that we are not passing any data here so you are just passing here query and it will return a whole list here we can see that it is returning a numerable I numerable type of person okay so we have defined this section perfectly so let's go here and let's expand all of these methods one by one so just go here and we can see it is addressing method which is taking SP create person it is the name of stored procedure here we are passing a dynamic object because we need these parameters in our stored procedure name email and address that's it in the update section here is the name of our it is the name of our stored procedure we are passing whole person whole object here person because it contains all the properties we needed in our stored procedure since we do not need to pass here ID so we cannot pass the whole object here but here we also need ID we also need to pass ID so we can pass the whole person here now here is a delete async person delete async and here is the name or delete person or sorry name of course stored procedure and we need to pass a parameter here with Name ID so just pass a dynamic object here with or an anime a non-nimus object here ID equals to ID that's it and here here it is a get by ID as sync and here it is the name of our stored procedure get person and it will take this it will take a parameter from us with Name ID and we will return a filtered result because we need only one data from here but it will return a innumerable so we need to fetch one object one record from here so that's it for here and here we will we will create the Queen We Will create a create a get request here and we are using this stored procedure here and we are passing it as a query here and we do not need to pass any object but we have to pass something here so we will just create a empty object here so we just pass the empty object here that's it now we need to Define this thing in our repositories so just add these references here and at this method this method this method this method and the last one this method so that's it so it is our data part and we have done our data part so now we can move to the UI section and there might be any error in that class but we will see it in future so let's move here and let's run this project and let's see what is going on here we haven't run this project till now so if we look at this this is our default product so if we click here in home page and click on privacy page we will move here let's see how these things are happening here and where these things have defined so here if we go into for program.cs let's see what we can find here can we find anything here anything interesting let's go here in the bottom of this file you will see that here is this middleware app dot map controller route name is default so it is our default route controller equals to home x n equals to index so that's how by default we are going into this index path so let's put a breakpoint here so I can prove that it is an index page of home otherwise we will not know how how this page is getting loaded so let's let's click here and let's enter here now you can see that we have stopped here so it means by default it is executing this index page and it is returning a few that's it and let's go here let's go here and so just Define here and type here hi but it will not reflect right now we need to debug our project for that if I change it here I am sure that okay yeah you can see we are not seeing any changes so we have to build our project again or run our project again so let's run it now you can see that all of these changes here we are seeing hi that's fair enough let's close it and let's make a mess in this project so first of all we are going to delete all of these things because they are taking unnecessary size and we are not going to use these file in this project sorry in this tutorial so but before let's see what it is what is here here is a side dot CSS file and here you will see side.js file and here we have bunch of libraries like bootstrap jQuery jaggery validation dot secondary validation and and obstusive validation so these files are used in client-side validation so if you need client-cent validation then don't delete these files otherwise you can delete them so I'm just going to delete all of them all of them I do not need them so just delete these guys okay and yeah that's fine now here here is our layout.cs HTML file and here is our layout has been defined so I can move this guy from here here okay anyway just remove just remove all of these things from layout.css now we do not have any layer dot CSS table file okay that's fair enough now let's remove this validation file we also do not need this and okay it's okay it's okay to Define this error page it's not doing anything bad view Imports dot csst so do not remove this thing it is mandatory sorry necessary for our project we start dot csstml in this file we Define our layout page so currently we are using this layout dot csstml file as a default layout so it is defined here okay so let's see how we can Define our own design here so let's move here in the browser and here we will type bootstrap 5 bootstrap five and here it is the official website of bootstrap so just go there and go here in this section start section so here is our starter template just copy this guy and here go to the shared layout Dot csstml Page and paste this guy here okay so let's just change its typo title to dapper MVC demo that's good let's just just leave it here hello world why do we leave here hello world just remove this guy from there okay okay so let's see him I using the correct one yeah so it's uh it's good but let's remove these comments from here and from here so that's it now let's see what we can do here just type here is render body and it will render our content Pages for us we do not need this right now so now let's try to run this project okay so let's run this guy right now we are not seeing here anything let's see bootstrap is working or not so what we are going to do here we are just gonna go here in the component section and let's find a nail bar here so it is our nav bar so let's copy this nav bar just copy let's see which one will be good so let me find I guess this one will be good enough so let's copy this one copy go here and paste it here so let's let's go here and we can see that this thing is working fine and right now why it is working because I am using a hot reload here so if we are making any changes to UI we can use this hot reload option so that we do not need to build this project again and again okay so here and let's go here let's remove these links first so let's remove this guy that's it and just copy this about let's name it about and we will create another page another link here which will be a person which we will Define in future so just type here home slash index and here home slash home slash about so code changes were applied successfully it is saying so just go here and we can see is our home page it is all about which is not right I guess go here in home section and where is our about page we do not have any about we have this privacy page so let's change it to privacy okay so let's name it privacy privacy whatever it is home slash privacy so if we click here in privacy we can see this privacy policy fair enough one more thing we can do here is we can put this render body in divs so just type here div class equals to container it is a bootstrap class and it will make everything centralized so now you will see that this thing will come in the center automatically everything will come in the center automatically we can do here one more thing we can create a padding so let's type here p x padding from up and down and let's add it to four so now we can also see a privacy sorry padding here I guess PX4 is right so why I'm not getting any privacy hot reload on file save so we will see it later I don't think I don't know why it is not working let's make it p x p x 6. let's see it's not working anyway m y 3 okay p y four so for now leave it like that we will see it later why it is not working if I remember I will see it later anyway it's not a it's not a big deal let's close this layout we are done in the layout section and we have defined on a bar very fine so we need to go there again layout and we need to change this name it should not be an eye bar it should be our Dapper demo is it should be our brand and it should be this let's see okay so let's name it home slash index home slash index okay so I guess we have done this thing here we have defined our neighbor okay so that's a quite a bit task but it's a fun doing things from the scratch let's remove this and let's change it to welcome H2 welcome now we need to create our own controller here so we will create a one we will create one so let's create a controller here so let's add a new controller and let's name it two first let's name it person controller so it will be a MBC controller empty here and let's create a let's rename it to person controller and remove this one from here and that's it that's it so it should be a Sim controller a sync method and it will be a sync task I accident result add so in this method will be your add method it will be our get method and we need another method here which will be a post method so we will just passed here person press Ctrl dot present control Dot anyway right on know why it is not working add person and here we will type HTTP post because these two methods have same name so we need to define a method type here so p-e-r-s-o-n and yeah now it is working so we're good here we will Define functionality later first Define all methods here the next thing we will create here public testing why not copy all of these things again so here will Define our method as TTP it will be a get method and it will be uh display all display all will be display all and we will Define one method here which will be get by ID it will take into ID that's fine and here we will Define same same functionality here so we have copied these things so let's minimize this so that we don't get confused here we have this add added and we need to change it to edit and it will take ID and we need to change it to had it also which will take object that's it edit edit add it one more thing has remained we need a delete function also so let's copy this guy and paste it here just change it delete okay now now what should we do so from let's define this delete first so from here we will return written redirect to excel and name of name of here we will Define the name of action so we will return to the display all display all that's fine foreign some code but first here we need to Define The Constructor so just type here ctor person controller and here we will Define I person Repository and it will be a person repo person repo press Ctrl period symbol and create an assign field I'm going to put underscore here so that we can distinguish these names so just type here this and we are good to go let's move here let's define the delete function first so where just type here where delete result equals to person repo dot delete I think here we will just pass ID and it does not matter if it is a true or false we will always return to the redirect to action we are handling exceptions here a weight that's it now Define this display all function so just go here and let's just go here display all where persons it should be people where people equals to person repo thought get all sink and it's an async method so we need to Define an await here so type here a wait and here we will pass these people to The View okay so let's define this display all function first so just right click here and click on ADD View it will be a radio view empty or aw s review will be fine so okay so right now we need to Define your view name which will be display all and it's fine template will be empty create a partial view no use a parcel page no because we have defined a layout page because we have defined our layout page in view star.csstml5 so we do not need to Define it here and it is also saying as leave empty if it is set in a razor view start file and we have set it in a reader view start file so we do not need to Define layout page here so click add and since it is it needs scaffolding so it will install a package from nuget which will be microsoft.visualstudio.web dot code generation.design so it right now it is installing this package from the nuget so it will take a while for this after that it will create a view for us now we can see that it has generated the space so we need to remove this Chunk from here and we have to pass a model and what we need to Define here so let's see here what we are passing to it so we are passing our view this people and it is a type of I enumerable person so we need to Define here I enumerable person so it is a model that we are passing to our view now we can Loop over its but first we need to define the table here so just type here h 3 people list and here just Define here a div with class m y 2 that's it so I am using here my two I'm going here in the layout section and here anyway I do not need to remove anything from there I was just got confused okay now here we will Define the table so just type here table class equals to table table stripped and something like that here we will need a tea body but before that we need a t head after that we need a tea body and here we need a TR inside that we need a th where we will Define name and here we will Define name email and address and that's it and here we will do the same thing but we need to define a for each Loop here so we'll Define here for each where person in model and here just type TR because we're gonna Loop over this whole row here we will Define TD and inside TD we will pass this person dot name here we will pass person dot email here we'll pass person dot address we need one more row here so just type here th and name it accents inside that we need a few things we need to find two buttons here first thing will be X and Link and here hrf equals to Hash we'll Define it later just name it edit and here just name it delete and here we need to Define class equals to BTN vtn alert or yeah and it will be okay we'll do the same thing here and Define class BTN BT BTN BTN Danger okay so let's see how things are going in The View first of all I'm getting another here so let's see why I'm getting error here so let's close this thing edit edit and let's comment all of these things maybe that's why we are getting error here so let's comment this thing let's go here and let's run this project let's see do we getting error again we are getting a name space person could not are you missing a directive or assembly reference and here is the same so I guess problem is not here problem is here because we are notifying where this where this person is coming from so I need to Define here Dapper demo it is our project name dot data dot person okay so let's delete this first type here dapper MVC demo dot data dot models dot domain dot person so we need to pass a whole reference here that's why I was getting error okay so I'm not getting an error right now let's run it again let's see let's see what is happening here so first of all we do not need food now so let's close this guy since we haven't defined any route for person display person so we need to type it manually display all so if I type here and I am I am assuming that I am going to get error okay so here is the error in a connection string okay that's my bad is saying that you are doing something bad here Double T it should be single T Integrated Security and meanwhile let's let's let's go or layout.csstml page and here Define this link so just type here person slash display all all just Define some readable name so I am going to capitalize or making them capitalize letter should be person okay so it does not matter if it will be in all small case or it will be in this combination of small and capital case it does not matter either it can be a either it can be a whole small case or a whole upper case or mix of it it does not matter because it's just a URL it will find this route in your router table run it so again if I click on this and I am getting again this error and it probably with the connection string so if I go here and here I have setting dot Json and just try it right here encrypt true I don't know why I will I'm getting this error in dotnet 7 before dot Net 7 in dot net 6 or dot net core three this connection string was just fine but in order 7 I need to Define some more some extra information like this encrypt equals to false I guess it is an encrypt equals to false so anyway I can check I can check this connection is doing here so I'm going to I'm going to go into my guest Dot github.com and I'm going to go here in my guest files so here.net CLI cheat seeds I hope I will find something here if I go here and okay so I'm not getting any any information there so it might be this one a of course SQL Server and yeah here we have this this thing dot Net 7 connection is doing anyway first of all let's try this encrypt thing so if uh yeah that's fine so I had to write here encrypt equals to false and it solved the problem so going there was unnecessary I can skip it now and here we can see that we are also getting some values from the database but our design is not working as we think table class equals to table and okay so I now now I got it why I was not getting the class so I need to remove this layout equals to null and let's run it let's run it I guess I need to build the project again I don't know why this hot reload option works or sometime it does not works it's a mystery for me sometimes it works like a charm sometimes it's look pathetic okay anyway what we can do for that so let's go here now now it's working fine but here here here this edit VT and let's just name it N4 or we can can we change it to success is it a class s u double C it should be double C so let's try to hot reload it hot reload on five save now it will run on every side save so we should be fine here edit and delete green and red that's a good combination now what we are going to do here first of all let's add a button here here let's add this button and let's add BTN info and my2 so we are going to create some margin from top and bottom now here let's name it had more and here we will Define person select add first we need to check here what are the names so we have this name add we have this name edit and we have one name here delete so we can Define all of these things here so let's close this guy I do not need it right now do not need this one also here person slash add and oops Yeah fine remove this hash and Define here edit Define here ID equals to at the rate BT sorry red model sorry not model at that person dot ID Okay so let's copy this guy not cut just copy paste it here and it should be delete that's fine so what we have to do right now what we need to do right now first we need to Define few of these things and here first of all we do not need this method it's unnecessary we need in web API project but not in MBC project so first of all let's let's let's uncomment these two methods that's fine and here we will Define some functionality so just type here try catch exception EX and here just return View sorry it is fine here we will Define temp data dot MSG equals to success successfully added it is a case of success and here it is a case of failure we will just type here could not added okay and just return redirect to action name of add now here we will Define some functionality so where just type here where add result okay but before that we need to check one thing if if we need to check the model validation if model state dot is valid it means it is not valid then we will return a view from here with this data person otherwise just type here where person add person result equals to a weight await person dot add person sorry await it should be our repository so person repository dot add async here we will pass person that's it and if it should be a Bool so we can Define here Bool at percent result if add person result success then we can write this successfully added otherwise otherwise we can just type here could not edit it's looking good right now so let's add a view here let's add a empty View and let's name it ahead let's name it add that's it leave it empty if it is set in a razor okay use a layout page in the previous section I have unchecked it that was wrong we have to check this we have to leave empty if it is set in a layout sorry in a view start I we have to empty this text box use a layout page so it's good let's wait because it is scaffolding right now so we need to wait for it and I'm getting sleepy it's taking too much time it's taking too much time generating code and although I can cut it with video editing I guess I would not cut it so it's finally generated that's a bit success okay first thing we need to pass here a model which will be uh which will be uh first of thing first of thing let's let's just go here let's go here and here in the person section display all section and and and let's remove this thing and I'm going to do some experiment I don't even know I can do this we can do this in MVC so if I write it here at the rate using if I write here using Tapper mbcdemo.data.models.domain then yeah then we do not need to Define it here so uh our view is looking much more neat and clean that is working so we can just type here person oh now it's detectable so that was a success and since I do not use MVC too much so I don't know about these systems too much and yeah that's the fact Microsoft sb.net core so we have defined this line here so that we do not need to use this code everywhere in our view before that before that sorry where we were yeah here so here and before that we need to write it like this but since we have added this section here so we do not need to do it like this it will also be fine okay so first of all what we need to Define here first of all we will Define here is that person that is just fine H2 rest 3 S3 will be fine add person and here we will Define S3 here we will Define this thing okay and we need a button here so just type here a href equals to person slash display all class display all and here will be class equals to vtn BTN primary vtn vtn primary and here display all so this button will move to the display all section this button will move us to our display all section okay and one more thing here we need to Define m y 2 so that we can create some margin from top and bottom now we need to to here we will create a class we will create a div here but before that we are gonna we are going to create a form form equals to a s p x n equals to add it is it is our form and here we will Define some plc so first thing will be div class equals to form form so let's go here let's let's check this thing in the bootstrap let me plug my charger so let's go here in the bootstrap section we do not need to remember everything we have Internet so let's see how can how we can design a form so here in the component section components we will see a form somewhere accordion bread come button group card hello card carousel close button navs okay I'm in the wrong section here is a different section for form here forms and we can see that here is our form control so we can simply copy this or we can do something else we can go here in the layout section let's see can we find anything okay I guess not oh I am searching here the form control on control anyway we can just copy this thing this thing also this thing also will be fine so let's copy this thing and go here and paste it here and label four just remove this thing this thing we just need this one mb3 margin bottom three okay email address email address not email address it should be a name name type equals to text we do not need this ID field we also do not need this placeholder field so what did I get from there nothing only this class MP3 anyway class equals to form level this one also so here we can just type here asp4 sp4 equals to name and we can copy this guy and paste this guy here so it is our name controller name control we will do the same with this email but but but we also need here one more thing asp sorry span ASP validation for name and here this one so just copy this guy paste this guy here and just change it to email everywhere copy this email email that's it do it same for but we need a text area right this time so we will Define a text area okay so just copy this guy and here rather than this email or text input text story not email other than this we will Define this text area here and we will change this ID we do not need it and we will paste our sp4 control asp4 here okay so we will use this same class here div and B3 okay fair enough and we will create a submit button here so yeah let's type here button type equals to submit class equals to vtn BTN BT and bdn primary okay and just name it to save that's it and one more thing we need also Define the error of success matches here so here we will Define this temp data temp data MSG but we need to check that if it is null or not so we need to define a if condition here so just type here if temp data if M data MSG it doesn't equals to null doesn't equals to null pass fine and copy this guy paste this guy here okay so it seems much better right now I hope we are doing everything right from SPX n equals to where and it so it looks okay so let's run this guy so let's go here in the person section and click on this add button we can see this form so let's type here and just name it to let's just name it Jane and here here here here here is the problem name it should be your email and and it should be address that's a problem with copy paste we need to be very careful when we are doing copy paste Ctrl C Ctrl V Ctrl C Ctrl V is a good option but it also give us lots of error Okay so just here type Gene let's name it genes so it will be again and anything at the rate yahoo.com and here just had his just add address 3 and something like this okay so what do you think successfully added but if if I just add and save button so my validation is working fine one more thing I need to do here here I just need to define a class text Danger and have to do same thing here and same thing here since but we we also removed this thing because our address is not validated and maybe in future if we validate it then it would be good that we have already added this section here okay so let's see we can see that this thing has immediately changed with the hot load and here hot reload option is working very nice okay I'll go here and go here perfect this thing also working fine so we need to work on this edit section and delete section now first let's go here let's let's let's let's let's let's copy so just copy and just paste and save a lot of time hopefully you will not get error in the future by doing copy based so it will be edit and here you can see that we have added a view for edit section now we can uncomment this guy and we can go here go to view and we have already added it we can remove it we also need we do not need it and we can remove it from here also that's it and let's let's move here so change it to edit person headed person but in edit section we need to Define one more input also so so let's copy this one and paste it here it would be ID and it would be hidden hi so edit person or just change it up delete person but person looks much better and everything will be same so let's close this guy and just close this guy okay so here we need to do some changes here first we need to find a version so we'll just find a person from person repo person repository Dot person report dot find percentable DOT fine not fine here you get biasing it should be fine by I think anyway and it should be it should be a weight so yeah pass it here it's look fine so we are getting data from the database and we are passing the whole object person here so when we move here this whole object will be received here and everything will be displayed in these fields so ID will be displayed here name will be displayed here image will be displayed here and address will be displayed here it should be address okay we need to change it here also so that's a very bad thing copy and paste okay so here nothing need to be changed except I have changed this one address actually it will not give us any error but it would be nice if its name should be relatable so here esp4 address is saying that this label belongs to this address if I type your email so it would feel like this label belongs to this and actually it will not create any error but it's not a good it's not a good thing why would we Define a label of email here in the address section so anyway apart from the gossip moved to the actual logic so let's go here in the controller and here just type here try if type A negation sign here model state dot is valid return A View from here that's good model state DOT otherwise we will do it would be a person not a model otherwise just type here update result equals to what we can do here yeah it is giving me nice suggestions async if update result if update result is true then let's see okay it is a waitable oh yeah fine then we will type here temp data MSG equals to updated success fully and we can Define here temp data MSG equals to could not update it okay and here we can also check the email so if person equals to null we can return to something we can throw an error from here true not found something like that it should be written not found but but we need to handle it somewhere so I'm not going to do right now so let's comment this guy okay here could not update it and here in the cast section exception EX cept this and in the cash section we will just return a view with person and here we will do the same in the else condition we will return to a view and here from here we will return to a ction so return redirect to action name off display all so on the successful update we can go to the display all section or we can return a view from here so it's totally up to you so whatever fits fine so I guess let's let's return a view so we can return a common view from here that's it no we do not need these extra bases we can remove them update successfully not updated could not updated and written View okay so it's look it looks also fine oh here we need to go to the display all section and here we can we can do something like this on click again this we can Define some JavaScript function so on click we can do 10 window Dot window Dot what we say confirm confirm and here we can check that are you sure written window dot confirm are you sure so it will pop up a confirm dialog box if and it will ask are you sure to delete add you show to delete this record something like that and if we click on yes then it will move to this this delete action otherwise it will not move there okay so here we have implemented the delete functionality and edited functionality edit functionality and if this attribute value is enclosed in quotation mark the question mark must be must match and I don't know so just run it it's just a bonding so let's click here and click on add more and here not here we need to click on this edit section that's working fine so let's let's name it to Max and Max at the rate rediff.com just click here on Save and it is successfully added and and and here I have done a terrible mistake you are seeing this link we have been moved to the add section and do you know why it is happening because it have created a new field here and that is happening because of copy paste so here go to view and change this ad to edit just just that so that was a mistake so let's see let's go there let's remove this to Michael and my CH a e l little gmail.com address something like that let's save that and we are fine we have seen here that updated successfully and let's go here now it is updated it is updated so it's good so let's let's see what is happening here and it has deleted a record but it did not ask me to do it so what can be the problem here so let me see what is going on here so I have missing I am missing this quotation mark so let's see now it is asking me so let's remove let's remove the chain and you can see that uh so just name here Jack check at the rate rediff.com and address Jack address let's save it so this will be added we can go here and we can see that we have added this record and let's add its address so check address double one and let's see that let's move back here and we can see that we have updated This Record and let's try to add this guy and are you sure no I'm not sure are you sure yes I'm sure and we have deleted also so we have successfully implemented quad functionality with the help of dapper and with the help of store procedure you can see that how fast this thing is working because Entity framework is little bit slow if you are not using it correctly but Tapper is much faster so that's it if you find this video helpful then please hit that like button if you haven't subscribed this channel you can also subscribe it I will see you next time [Music] foreign [Music]

Channel: Ravindra Devrani

Views: 14,300

Keywords:

Id: -JDuV5d05Qc

Length: 102min 38sec (6158 seconds)

Published: Mon Mar 20 2023