.NET 8.0 | COMPLETE ASP.NET Core MVC Full CRUD Operation Using Entity Framework Code First | MSSQL

welcome to macro code if you're new to this channel consider subscribing So today we're going to learn about esp.net Co MVC so we're going to create a simple ESP speet Co MVC app that is a beginner series for those who are new to.net Co so to begin with I'm going to uh I'm using visual studio 2022 and as you can see we can create a new project so we are going to create a new project so then we'll choose an sp. net MVC so you can see here I'm choosing sp. net MVC you can also type on the template so you can just do spnet MVC so then you'll be able to see we have a project template for creating sp. net core application with example with example sp. net Co MVC views and controllers so let's just use this one so I'm going to click on on it then proceed to next so if I proceed to next then I'll be asked where to store my project so this is the folder that I have for storing uh projects then I'll just give my project a simple name so I'm going to call this uh crude or we can call it uh let's create a customer management system so I'm going to do customer management system so so if we do that so so this will be customer management I'm going to do that way so this will be customer management system so you can give the name that you like then I'm going to proceed to next so here we are going to do acude operation using netco MVC that is uh using net 8 which is actually in long-term support so I'm going to use net 8 then under authentication type I'm going to use individual accounts so as you can see so we are going to log to your app and even we can register users so then I'll just create my app so click create and our app should be created so there we go so our app has been created and as you can see we have different folders within our application so we have program.cs class which is actually our entry point to our application then we have the views we have the home views and we have the shared uh layouts then you also have the models so this is where we can place our models then you have a data we have the folder for our migrations and our application DB context so this is where we'll be placing our uh models uh that will actually translate to tables then we also have our controllers you see here we have just a single controller for home then under areas you'll be able to see we have identity and we have uh uh pages so if we just launch this app we should be able to see our Simple app without are doing anything so let's just launch the app and see what will happen so for those who are new to this channel consider subscribing and we are going to do this beginner series for those who are new to net uh to net and and we should be able to create a simple customer management system and I hope all uh you'll be able to get some insights so there we go our app is launching so let's just confirm as you can see we have this is our customer management system and at the top here we have a register you can actually register a user and you can log in a user so we can do some modifications through this app so if you just go to our layout and shared layout then under layout you can actually give it some names if you just check on it here I can just give this uh as a customer management system and I should be able to use that then here you can see I have home and privacy the same thing you are able to see here home and privacy so that is uh a simple app that we've just created without doing anything so let's just uh link this to our database so I'm going to create a database so I'm so I'm opening my SQL Server management Studio then we should be able to create our database so let's just uh confirm so I'm going to link it to my going to link it to my so let's just uh let me just have this there so that you're able to see what is happening so here I'm I've opened my my Microsoft SQL Server management studio and here you you can see I have different uh databases so I'm going to create a database here called customers so we going to create a simple app for customers so I'll just do customers so if we just uh do that then I'll have my table for customers so the next thing is we need to link our application currently our application is not linked to any uh database so if you just see on our application we have this app settings. Json so I'm going to link this here and how do we get the server name so if you go to Microsoft SQL Server management Studio there's this icon if you click on it it will actually give you the server name so this is my server name I'm going to copy my server name then I'll replace it with this one then uh the database name you see it requires the database I'll also come here and copy the the name of my database that we've just created so I'll rename it here then go back to my app settings so this is where we link our application to the uh database so I'll remove all this and I can actually link it to my uh database so I have it as customers then we have trust connection is true and multiple active result set is true so I I want us also to add something so I'll just do comma then I'll say trusted server certificate so just add trusted server certificate and you can uh add this to true so that is all the only thing I want you guys to add so if we just add that we should now be able to link uh our data our applications to our customers uh table but that is database but to begin with I want us to create a model called customers so let's just create a model and this model will actually now act as part of our our table so we are going to create a model called customer then in this customer model we are going to Define some properties so one is I want us to have a public int which will be our primary key ID so that is our primary key then you can have uh public our customer name so we can just do customer name we can have customer email so let's just do customer email we can also do a customer phone you can also do uh customer address you can also do customer City can also do customer region can also do postal code we can also do country then we can also do phone number we had actually done phone number here so you can just do away with this just do pH number then you can also do a fact then sorry you can also do let me just do that then you can also do we have just done ID for number we can we can actually do let's change this to V number then we can also do what other thing can we do I think we can just do ID name email uh address City region postal code Country phone number F and V number this is enough so we have our model called customer so what we need to do now and in case you want to make some of the fields here mandatory you can actually do here required I'll just do here required can see this is our name will be required and our email address will be required so you can do that and in case you want to make some uh EMP some properties empty you can also do string then we can say do empty so if we do that then we are are good to go so you can actually assign this to some of the uh properties and you can see if you do that then this anable property uh cannot must contain an value so this one will actually go away so if you just do that you do that and assign it in case you don't want to be mandatory we we'll also do that uh my phone number I may want this to be mandatory so I'll just do that then I'll also do here that is empty I can also do this here to be empty so as you can see this is how our model looks like so assuming so one thing that you need to know is how we are connecting this to the database so remember we've done a connection to our default uh connection string so we have uh the server name here we have our database customers you have added this trusted server certificate and you have trusted connection and all these so if you come to program.cs you'll be able to see that we have our connection string it will getting our connection string from our default connection so this default connection is actually the name of this connection string here so then if you come to program.cs you'll be able to see we have our services add application DB context so this is our now uh our application DB context will be acting as our intermediary between our application and the database and you can see it is using H SQL Server so that means if you come to our dependencies you'll be able to see that there are some new guest packages that have been installed and one of them is our microsoft. Entity framework csql that's why we are able to use this one so if you are using a different database then you'll be able to choose the different and you get package and you'll actually change this whether you are using my SQL or post gr you'll be able to change this to uh to actually use the correct you get packages that you are using so for our case we are linking this to SQL Server so the next thing that I want us to do is let's go back to our application that is uh identity under areas then we go to data then I mean here then data then application DB context so under application DB context you'll be able to see that there is nothing that has been defined here so we need to add uh so I want us to add something so just outside this uh Cali Braes I want us to add something here so this is where we will be adding our our tables so our tables will come just at there so I want us to do public then DB set just do DB set then pass in our model which is our customer model then if you do that then you should be able to give it a name so you should give it a name for our table so our table name will be customers so so Ure this name is what you need to have within our database so this is the name that will be translated to our tables so what we are doing is actually known as code fast approach so we are actually defining our models which will then be translated to tables so you can see here we we now have the customers which will actually be our table name so if we save this and we need now to do this so how are we affecting these changes to our tables so if you come to our database you'll be able to see that under customers database we don't have any table so as you can see we don't have any table so far so but we need to translate this uh customers table to be part of our database here so to do that I want us to do one thing we need to add migrations so to add migrations you'll just go to tools at the top of the of our IDE then come to new get package manager console then package manager console then on the package manager console you'll be able to see there is a command prom that will come here down here then there is a console window here so what we need to do you'll add migrations so there's a command called add migration so add migration then you give the name of our migration so you're going to say initial initial migration so if we press enter our migration file will be generated and we should be able to update our database with the with the changes that we want so let's just see what will happen so can see build succeeded and you should be able to see a file called initial migration generated so if you come to our folder called Data then under migrations folder you'll be able to see there's a file called initial migration with a time stamp on it so you'll be able to see there's some a time stamp on it with the name called initial migration so if you click on it you'll be able to see there is something called create table customers so our our table will be created with these fields you see the ID which is actually a primary key the name the email address the city region postal code all these and this is the table that we've just created so to add these changes to our database you see we need now to tell our uh to effect these changes to our database because if you come now to our tables that is our database you'll be able to see we still don't have any tables so I'm going to the tables and you'll see we don't have any tables so far so to affect these changes to our database we are going to within our console we're going to run another command called upate database so update database command will now create our tables within our database so it will now make these changes to our database so if you just come to our you see there is something that has gone wrong trust so it is trusted server certificate I think we've done some things wrong there it should actually be called trust not trusted so this is trust server certificate so we just do that uh we can uh clear then rerun our our Command we can just uh type in update database and if we just do that we should be able to now create our tables our table within our database and you'll be able to see there is some actions going on within our console here so what is going on is our tables are being created and one thing that you need to know is if you go to our our database now you'll be able to see that some tables that are are default spet tables so I'm going to open and you can see we now have some tables but remember we created only one table called uh customers so one of the table is EF migration history these will be tracking all the migrations that we have done remember we did add migration and we added the file name so that file name will be tracked so if you come to our EF migration you'll be able to see that we have the initial migration here and our version is uh version 8.02 then then we have the SP net claims where we it will actually be storing all the uh claims so I'm I'll not be going deeper into this so but these one are actually default spnet tables spnet rols are storing all the rols spet user R storing user roles but all the users of our application will be stored within aset users so you'll be able to see how this can be extended and you can see it has some default uh columns assuming you want to int to add these columns or introduce new columns we'll be able to see how you can do that so that means our table has been created and that is customer table you can see we have it here so if I select on it we should be able to see our fields we have the ID that we provided the name email address City region postal call Country phone number fact and the V number so one interesting thing is if we launch this application now we can actually register a user so let's just launch our application and as we had just said is our users will be stored within spnet users table so if we launch our application you can see this is our customers management system we can register a user so if I just do that I can use do admin a test and I can provide password I can also provide my password so if I click register it will actually register our user to our database and you can see it is now telling us register confirmation this app does not currently have a real email sender registered so if we we had configured our application with an email send it will actually send as a notification but for now it is it has not been configured so what it is giving us it is giving us an option to for click here to confirm your account so we I click here we will actually confirm it's kind of we have received our email and we have confirmed it so you can see it is now telling us we have confirmed our email so one thing is let's go to our table where is that data going so we go to our spet users we should be able to see the details that you've just provided so as you can see this is our ID that was generated by the system we have our username that we provided normalized username it is actually the same as the email that you provided but you can see email confirm it is one so we've confirmed our email that's why it is ass set to true but you can see the password it is actually ashed and you can see the time stamp and the current time stamp so all these other details uh We've not provided them remember we just registered using uh the the email and we provided the password so that means we can actually log to our app so if you click login you'll be able to see that uh we provide the email and the password if I click login I should actually be logged in and how do you know that we have logged in you'll be able to see it here so at the top here you'll be able to see that we have hello then our email address that is with in our database so that means we have actually logged into our app and you can as well log out so if you log out you see these changes to register or log so we've done a simple connection to our database and we have have actually created a user within our application and we are able to see where the user is but now let's proceed and now uh create our customers remember we added a model called customers and you have our table called customers within our application so the the one thing that I want us to do now now is I want us to do something called scaffolding so to do that the application will actually generate we will be able to get all the code required for us to create a simple customer within our app so to do that let's just go to controllers so right right click on the controllers then add then there's something here called new scaffolder item then if you click on the new scaffolded item it will give you this option so what I want us to do is MVC I want us to click MVC controller with views using Entity framework so we actually using Entity framework Co so add it then it will give us another window so there we go you can see it is asking us to choose the model class so I'm going to choose the model that we just provided you'll be able to see it here customer then DB context we are using application DB context then you'll be able to see that our controller name will actually be given this name but you can also change the controller name that you want so if you just add the system will actually generate all the code and that is a complete crude operation for our app that means we can be able to create a customer edit a customer delete a customer and view or even update so if you our code is generating so if you watching this video and you have not subscribed please consider subscribing and like our video so you'll actually help us to reach more people who are actually learning uh these application or even trying to get to understand sp. net Co in general so as you can see our application has generated some codes one of the code that has been generated we have something called customers controller as you can see a new controller has been added initially we had only the customer that is the home controller but now we have the customers controller and as you can scroll down this code you'll be able to see there's a lot uh of codes that has been written for us so we don't have to do anything with these uh details so the next thing to see is if you go to views you'll be able to see that we have another folder called customers under customers we have the razor pages that has been generated that is the create where we can create a customer delete view uh edit and index so if I just run our app I should be able to access now the customers page and how do we do that so if I run my app so let's just run and see how we can access our customer page so for now you'll be able to see that we have only the customers management home privacy register and login but if I just do a slash customers we should be able to access our customers page you see we now have our customers page so we've done slash customers and we are actually be taken here but instead of doing that coming here and doing SL customers we can actually add it to be part of the navigation at the top here so how do we do that so let's go back to our application then under shared layout under layout at the top here you'll see there are some links and those links are part of what we have that is the home and the Privacy so you see we have home and privacy so we can actually reuse it so I'm going to copy one of these uh links so I'll copy this for example then I'll paste it down here then our area we don't have the area the controller name remember we have our controller name called customers so we'll just provide our controller name then our action we want this to take us to index action so if you go to our controller we have different actions so just here you'll see we have index here this is where we want our applications to start we have details and one thing that you should understand is every action here index details actually represent the views you see these views on the folders these views uh create delete uh details represent p of the actions within our controller so let's just go back to layout so we have our customers index then we can give it the name so we can say customers I'll just do here customers so if we do customers then we'll have we can now access our customers within our application page so let's just update this then you should be able to see uh our customers link here so there we go so it has updated so you see we have our customer management system home privacy then customers so if I click customers it will actually take me now to index and you can see it is the same thing that we did you can put a a backslash then customiz so that means we also have an icon here for create new so if we click create new it will give us an option to create our customer you see it has given us a form so I want us to create a customer called uh let's call this uh techno so let's call it techno then we can say techno atgmailcom then you can put in some can say City it's in Nairobi a region Nairobi can say East Africa can do East Africa postal code you can say 32000 country this is we can have it as Kenya then we can have our phone number then fax we can have it then V number and provide the V so you can key in all these information so if we click create our application should create our customer so you can see we have our customer name email address C so you can also create another one so let's say another customer is Samsung so so I'll just do Samsung our email is Samsung at gmail at gmail.com then address we can do that can just reuse this uh East Africa uh can have a different fact can also have a different V number so if I click save we are able to have this uh you see name email address and all these detail details so you see how our form our form looks like but now we can actually try to have this to uh to look a bit better so let's just go to our index I want us to change some items so here we'll call this our Title Here we can call it customers then I'm going to say this is customers list so then our create here you'll see that we have just SP so we can have this we can have a class here and we can have this as a button so you can say button BTN you can say primary so that will be our buttom then we can actually change this and you can call it add new customer so if we do that then you can see so what one thing to note is if you come to our ww route you should be able to to see that we have our CS JS and the lib so under lib we have our bootstrap and we have all the CSS within our uh bootstrap so the next thing also you need to be aware of is if you come to layout you'll be able to see that all those styles are within what we have here so that means we can actually uh boostrap our app so if you go to index so under customers we can actually have this uh table here so if you do that I'm going to add uh something so let's just uh change something on our table so we want to have we want to have our table to look a bit better so you see currently how it looks we can have that uh table we can actually arrange this to be a table data or we can have it as a just a simple table so we can have different uh Styles within our table and how we want it to appear so what I want us to do is we can actually add within our table here we can actually add within our class here we can add a bootstrap that is a table then we can say table stript and if we just change the we apply the changes and check on our app we should be able that to see that our there's some coloring happening here so we can also add another style if we want to have maybe our color to be bordered that is our table to be bordered we can say table bordered so here you can add another class I'll call it table bordered then if we just apply the changes you see table border then you have table stripped so that that means it it will be having some uh borders lines you see it is actually bordered so you can actually also add some colors in case you want or in case you want when you are hovering on our table you see there some hover so you can also add another class called table Hoover so we just do that and apply our changes then we should be able to see you see if I navigate you're able to see there's some kind of hovering let's add another customer so I'm going to add uh Galaxy not let's let's say this is a UWE then you can do UWE at gmail then you can do here that I'm going to have this as East Africa this is Kenya you can have a fox number there then you can have a vat so if I create I should be able to see now my table appearing as you can see we have these all these details then if you notice on our on our up these buttons button has actually changed so the button currently is appearing as a button but we can also do the same thing to these other areas so if you go back to our list you'll be able to see that all these here is actually lamp within one table data so we can actually separate this to be just different table data so I'm going to copy that and paste down there and also repe then I'll be removing I'll remove this we just have one per table data so I'll just do that uh we had the edit here here I'm going to have details then the last one I'm going to have uh Delete but now we also need to have our table headers the same way we've done with our table data so I'm going to copy that then here I'll just do edit then I'll also do here view then here I'll do delete so if I do that and apply my changes I should be able to see now we have you see we have the edit a view and delete but I can also make these to appear as buttons so to do that we can add our class so here I'm going to add a class then I'll just say BTN then BTN and I can call this uh secondary I can also copy this and I can have the here I maybe I can have this as primary I have these as secondary then I also have these as this one I can have it as danger I'll say BTN BT danger so danger that applies to our Buton so you can see we have edit uh View and delete so one interesting thing is you can also add icons so if we just go back to our add button we can actually add some icons here so I'll just do I sorry so I'll just do just do I then if I do that I'm going to have my icon here then I'll just do plus then you can do far far so I'm going to do far far then I can say add let's just see we'll have our font aam so I don't know if we have a font aam in our application or we need to add it so let's just refresh and see so I think we don't have it so to add icons we can actually we can actually add fontos to our app so how do we do that let's just come to our ww root I'm going to add new then client Side Library so if I click client Side Library I'm able to choose from the library here so I can just type in here font then you should be able to see we have font awesome so if I click on font awesome it will actually load all the files so you can see it has actually loaded all the files and I want to have all these files within my application so I'll just install and we should be able to have all the font awesome within our ww root let's just confirm so still uh installing so let's just wait so there we go so you can see under ww Ro it has now added a folder for font awesome so we have the CSS and the JS files so these Styles we need to actually add them to our layout so that is a layout here so I'm going to copy this and I'll actually paste it down here and you can see we are accessing to access our font toam it is actually ww root then font awesome so let me stop my application then we can actually rename this so we'll be doing so I'll just do that so we should access it via can do font awesome then we need to access CS then we need to use this we can use the all and we have CSS and you can also add the fontos some one I'll just copy that paste it here then I'm going to also add this name onam do CSS so you can also add the brand so let me just copy this paste it down here and we can name this as uh I'm going to copy that then have this here as brand so we've added our fontos so to access that you can actually see we are within a ww root then fontos some folder then we now go within our CSS so if you scroll down we can now add also our our scripts that is the javascripts so I'm going to copy one of the file then I'm also going to use the same scenario where I'm going to access it via font oome then I'll just paste it here then it will be fontos some JavaScript and it is within this folder then I'm also going to have here as all so I'm going to replace these as all JS and also I'm going to add these here and also I'm going to copy the fontos some one so I'll just copy that paste it it here I'm also going to add the brand one so I'll just do that and I'm going to add these brand. JS so if we do that we can now relaunch our app then we can play around now with icons so let's just see how our app looks like so if you're watching this video and you have not subscribed we notice 90% of you guys are watching our videos and you've not subscribed so please consider subscribing so that you help us reach more uh people and also new beginners to net so as you can see let's just wait as our app launches so there we go so we can go to customers and you can see we now have our customers list and if you are King you'll be able to see that our button has been added so we now have our button here and the class that we just use is when we go to our index page we go to to our index page you see we just did far far then add so we can also do maybe in case you want to have our our [Music] our in case you want to increase the size you can also increase it but for now let's just do something we need to also do it on our edit buttons so if you can see we don't have icons on our edit buttons so I'm going to to our edit button and I'm also going to add icon here then I'm also adding a class so here I'll just do far far then I can say edit then here for the details I'm also going to add icon then here I'm going to have class then do far far then for the edit I'm going to have an I I'll just do I then for the delete I'll do an icon then I'll just do here class then I'll do here far far then I can do trash so one thing is I want us to add some spacing here so that it doesn't look uh rest the same thing to our add button so I'm going to add a spacing so if we do do that and apply our changes we should actually see that our icon should appear so as you can see we now have our icons uh within our application so you see we have edit details and delete so let's just add another so what another thing that I want us to do now if you go to our form you'll be able to see that our form has been arranged uh going uh having only one column so if you go to our create page I want us to do here instead of saying create we can say add new customer so then we can do away with this so what I want us to see is uh I want us to arrange this to appear you see it is now add new customer I want us to appear to arrange this to be in two columns so to do that I'm going here and I'll change this MD 12 4 to 12 then Within our form I'm going to add another divv then I can say class then I'll have my divv as a a row so I'll just say row so then I'll close it so if I close it I need to close it up to the the last uh area so I'll close it up to here so then I can format it so we've done the then class row so so if we do that and apply our changes we should not be able so we we will see our form covering the entire area you see it has actually been as enlarged covering this whole area so what we need to do is we need to add another D class so I'm going to copy this D class here and I'll paste it here then I can just say this is md2 and that is six then I can close it so I'll do that so the next thing is I'll just be adding and closing so I'll also do that and close these as well so if we close that I'll also be adding another one so I'll be adding for every input area I'll also be adding within the just within after before the form group and I'll also be closing after the form group so I can also paste this add it here do DV close that paste this here can also add this here can also do that so I'm actually arranging so let's just do that paste this again also doing that paste that and I'm also paste uh closing this so if we do that I can now format my app so that it appears well aligned you can see is actually uh very good in terms of the arrangement so if I just apply the changes I should be able to see that my form has been arranged but there's something that has happened here you see the address is missing something so let's just check so this is our email yes you see our address it is part of that and we should we said we should have everyone close with their own div I'm going to have this here and I'll do this here so I think that is now sorted so if we apply the changes then our address will be now within within each of the so you see we now have one column and our vat number I think it is still long so let's just go there yes there we go so you should also do that and we we should close close if we apply the changes we should have our form arranged in that manner but assuming you see we have here the name address email address but you might want to have this display different name assuming you want to say customer name customer email address customer City or customer region customer country or customer phone number so we may change that display and how do we change that if you go to our model we now do something called Data annotations so here within our models here you can actually do something here so you can just do here square brackets then you can say display display then you can do display name so and if you do that you'll see there's something that has been borrowed this one using system. component model so then here you can just do uh uh can just do that then you can provide the name so this is the name that will be displayed so I'm going to say customer name so sorry I'm going to type so I'll just say customer name then I'm also going to add here another thing for email I want to say customer email address email address uh for address I want to say customer address so I just do that customer address for City I want to say maybe customer City customer City and region I might want to say customer region then for postal code I might want to say customer postal code so I can do that country I might want to say customer country so these are the display now you can display and the names that you want to appear on your views that is we can say phone number then we can also do customer Fox so you can also do customer V number but this is not a good thing to actually be doing this repetition so you can can say customer name uh we can do a way so we can actually do maybe customer that is just email address so I'm just showing you how you can uh change these but you can be having different names on how you want to have that so but this so you can actually provide the namings as you want so you're just using this for demonstration purposes so if you just launch our app we should now be able to see our names our form giving us different names so let's just launch our app and the good thing is where we have used that model it actually applies across so you'll notice that within our index page we will now have our new names you see customer name email address customer City region postal code all these and you can see the names are long and if we just click add new you should be able to see that we also have the same thing on our these other area so what I want us to do so for me I'll just do away with the the name customer I just remain with the with the that one so I'm going to do away with that I can do away with that I also do away with that I just retain address and region so in case I I had different namings that I want to apply then I can actually do that but you can see here I'm actually giving some spacing po call Country phone number and the V it is not the same as the the property here so if we launch the app we should now be able to have our Fields displayed that way and we should be good to add the changes within our app and see what we can do so let's just uh so let's just wait our app to launch and we should be able to see what we can do next so if you're new to this Channel and you have not subscribed please consider subscribing like our videos and we will really appreciate so our app has launched so if we go there we should be able to see our app and if we go to customers we'll be able to see now our changes has taken effect we have our countries uh our city name email address region postal code phone number and the rest so the same the same thing is you you may want to now if we go to add customer we can now add a customer maybe Samsung 2 uh provide those details here too you can say region is e Africa provide the same thing here so if you create you can create another customer you see we now have uh that can and also add another customer can say h to going to add that then it's part of East Africa going to provide some Fox number and I can add so let's also add uh techno can say techno 2 so I'm going to do that going to do that and if I create I'm able to see the details so you can see how my form now looks and the next thing is we can actually edit so if I click edit I'm being presented with now my form and you can see the form is also not well aligned so what we can do is we can actually copy so I'm going to copy what we have within our create here just within the form I'll copy everything just inside the form and I'm going to replace it on our edit uh razor page so if we go there so I'm going to copy up to here then if we go to our razor page and edit I'm going to replace everything inside here and provide it with what we have within our create page so let's just uh go there up to here and I'm going to replace then I'm going only to change this to md2 then I can also change this to to update customer details so and I can do away with this so here we will say update customer details so if I apply the changes I should be able to see my form updating and we have the new layout let's just wait and see so it should refresh and we should have our new changes within our app let's let's just rebuild and apply the changes so if you're new to this Channel and you have not subscribed please consider subscribing like our video and comment down below so you can see we can go to customers and if we click edit you can see I have update customer details and I can actually change this techno then I can say updated so if we just save so I'm able to save and you'll be able to see here it is actually techno updated so you can also do this edit this we say techno 2 updated so if we save we should be able to see techno 2 updated and our details are still there the same thing under details we are able to see our details here see this is a customer details and we are able to see all and if you click back you can go back the same way you can click delete you're able to delete so if I just do that and I delete you'll be able to see we've deleted one of our customers so that is a simple way on how to create a crude uh crude app and assuming you may want to do maybe uh instead of using models you may want to use view models so you can actually do that so to do that we are going to create another folder so let's create another folder and you can call it uh let's just go here I'm going to create another folder called view models so here can just create another folder then we call these uh view models so if we do that then I'm going to create another model called customer view model so custom customer view model so if we do customer view model I can actually duplicate all the details within my customer page here so I don't want to add so you see I want to do that and I can add it within our customer view model so if I just copy that and paste here I'll have my customer view model So within our customer view model I can also include another property called public then customer so that is customer then I can also do customer but now the good thing is I don't have to update my database because all these will we are not actually interacting with our view models but our models so I can also have a list of customers here and I can do that then I'll say this is custom customers so if we just have my list of customers here I can actually use this view model I can go to My Views then under index instead of using customer view I enumerable customer model I can actually remove this and use my customer view model so here I go to my folder view models then I'll use my customer view model then if you just do that you'll be able to see that our app here will have some problems so that means we need to Loop through our we just do dot customers so that is our list of customers but for us to use this list of to get the data from the customers view model that we've just done we need to do something so what we need to do is we need to go to our our razor that is our controller and I'm going to our controllers here then within the index page I'm going to pass my view model here the one that you've just created and I'll say VM so I'll call that VM So within my VM I can actually do here I'll say VM then I say do customers and I can assign it the values so the values that I'm going to assign is the list of customers you see so this is the list of customers so I'm going to assign the list of customers then what we need to return to our view is actually the customer return view then inside here we will replace it with our VM so if we just launch our app nothing has happened so we've just uh detached ourself from using view model that is the model to now view model so if we just do that let's just launch our app and see we should be able to load our data as expected without any challenges so if we click on customers you'll be able to see our customers list you can see we have our customers list and we are actually now using a view model so we are using customer view model instead of customer models so assuming you want to uh change this to when you're adding a customer you need to have to use this uh model or a view model so that is now where we have something called automapper where that now comes into play so to use automapper you can actually add a new get package manager so go to our new new get packages then add a manage new get packages then you can add a new get package called automapper so I'm going to add here automapper so if you click automapa you can actually add this uh autoa and Auto mapper is actually a convention based object to object Mapp you can map data from one translate data from one object to another object so I'm going to do that and install it so if you just install on it then you should be able to see it within our packages and we have it under packages area so you'll be able to see it here so to use automapper we need to do some things one thing is we need to create a a class called profiles and so I'm going to create a folder here called uh so let's just create a folder called uh profiles so I'll just do profiles so if we create profiles so I want us to create another class called profiles uh we call it a automapper automapa profiles so here I'll just have this as capital so autoa profiles then within our automapa profiles this actually should inherit from what we call now profile which is part of automap so here to to use this we need to import and we should actually be using uh automapper so if we just import using automapper then we should be good to go so I'm going to click that and click using so here you'll be able to see using automapper so the next thing is we need to have our con Constructor here so I'll just do CTO then I'll have my Constructor here for automapa then [Music] so sorry so here what we need to do on our Auto map here we now need to create a map so I'll just create map we say dooa is a convention based uh object to object mapper so I'll just do my provide my source and destination so my source will be customer so we will be our customer model so this is our customer and you can actually have so we can actually have my source will be my customer view model so let's just change that to customer view model view model then my destination will be my customer so there we go and actually we can when we do that we can also do a reverse map so you just do dot reverse map then we do that and we should be good that means we can map data from our customer view model to our customer model or we can do uh vice versa that is customer model to customer view model so after doing that we need to Now define something within our program. CS so what we need to to do is we need to add this uh the automapa service within our program.cs so if you just go to program.cs I want us to add something here so we'll just do a variable then we can do config then we can say is equals to new then you can say automapper autoa then we can do mappa configuration then within when we do mappa configuration I'll just open this brackets then we can do here options then we can Define now the options that we have so here I'll just do option then I can say dot allow allow null destination values you can do set that to true so set this to true then you can also have uh options and you can say do allow n Collections and you can say these to true then the next thing is to now add our profile so we'll just do options then you say dot Add profile then we can do here new then we can provide now our automapper profile class that we just added so I'll just do auto Mapp where is it we can actually copy it from here so I'm going to copy it here then add it here then we can close that so and close it here then you can also do it here then the next thing is we can create a variable here called mapper then you can say is equals to now the options that is the config so you can now have our config then you you can say create create mapper so if we do that then we now have our Builder do Services then we can have ADD single tone and you can provide our mapper so the mapper that we providing is this one so if we do that then we should be good now to map our details from one object to another so that means if we go to our create model that is our create view we can actually instead of using our customer model the way we are using here we can change this to use view models and you can change here to use customer view model so if you just do that then our form will be have will be map to our customer view model so that means if you go to our controllers and customers then go to create action remember we are expecting data from our customer model but now I'll change this to customer view model so we expecting now data from our customer view model but now after we've done that remember what we are saving is actually our customer model not our customer view model so if you try to save this it will actually give you an error so but before doing anything we need to inject something here yeah so I'll just do private read only then I can do IM Mapp so then I can do underscore mappa then I can also have these within my Constructor inject it here and I can have a mapper so if I do that then I can assign the values here so I'll just do mapper then I'll do that so after that we can now use these uh we can now use it within our create action method so remember we have two areas we have the get and the post so this is where we are conf configuring all our details so here I'll just create a new so I'll just variable then I say uh customer so here I'm going to say this is uh I'm going to call this is uh VM then here I'm going to call here just do customer then I'll say new I'm going to instantiate that then you have our customer here so after doing that I want now to map so so let's see you see it is actually telling us the required customer must be sa set and required member name must be set so here just do it that way so here it is telling us customer name must be set in the object initializer so let's just do this so you can do that then you can say sorry press enter then I'll just say name remember our name is required so we need to assign the values our email address is also required we we need to assign the values and the phone number is also required then we need to assign the values so you can see everything is okay so after doing that we need now to map our data from our our our customer view model to our customer model so remember the only thing that will have the values are these ones what happens to the rest so we can actually do this so we can do we can now map the data from our view model to our model and to do that we can actually use we can actually now use Auto mapper to do all those things so what we need to do is we need to just do here underscore mapper we now use what we defined top there then we say is equals to actually should be Mapp then dot then you can say map then we need to pass our source so you see it is actually source to destination so our source is our VM then our destination is our customer here so sorry so our source is our VM then our destination is our customer here so it will actually now map our data from our VM to our customer so we've actually made those changes but now let's uh put in a break point here and see what will happen so let let's launch our app and we go and try to create a new customer so for those who are watching this video and uh you you like it comment down below subscribe and even share so that you're able to reach more people who are learning.net so let's just uh launch our app and see what will happen so there we go our app has launched so if we go to customers you can actually create a new customer remember we are using now our view model so I'm going to create a Samsung provide some details here bo uh then if I click create we should be able to hit our break point and there we go so that means our data from The View was coming in with our view model so if we over here we should actually see that our view model has some data as as you can see and this data has now been translated to our view model that is our model here called customer so if we just over on customer our customer will be having the data assuming you are doing a one to one mapping like this one so you can actually and our model maybe is actually huge so you can actually be it will be ectic for you to do a one to one mapping like this so that is now when automapper comes in to help us to map data automatically from one object to another and I think now this now Mak sense when you are seeing these in action so if we just proceed we should be able to save our data but now there's something that uh is coming up so you see the model item pass into the vi data dictionary is of type customer. models. customer but this view data dictionary requires a model of item so that means if you go to our view model you see it has actually save the data here but it is trying to return the view remember we changed our view it is not uh using now the customer but it is using our V that is customer view model so what you should do is actually change this instead of returning view we should return V VM so I'm going to relaunch our app then see how that now works so let's just launch our app so there we go so if you're new to this Channel and you've encounter this video for the first time and you like the video comment down below and subscribe so I'm going to access our customers page as you can see then if I go to new going to create a customer Fox there provide the details and if I click create we we can do with our break point now then if I continue I should should save our data and proceed but now there's something that is uh going wrong so you should see that our is validate is actually kind of failing so let's just confirm so if we click create let's put in a break point here our model state. validate is failing so if we do that we should actually see it's uh saying false and you can see that uh we have our address then all these details is already saved and you can see yeah it's actually validating our model State here but what we should uh so we can actually do a away with this let's just remove that and we can have that so if we do that let's just relaunch our app then we proceed so there we go so let's just launch again and we go to our customers so if we go to our customers then add new customer then if we just do a new customer East Africa then provide the details then if I click save I should be able now to save my data you see everything is going on well so I can save another data here do that do that save it you can see my numbers are increasing so we've actually done AC crude uh operation with our app and we able now to save some data to our application and you can see in case you fill in and there is actually some validation for those fields that are required so even if we leave our name and you try to save you see it is actually telling us the name is required so if I just provide the name and save then our form will be saved so at some point you might want to have uh you might want to have maybe some some uh error messages that is kind of uh you may want to have some error messages that is kind of descriptive than the ones that we are being provided by our models so if we do that we can actually go back to our models and you can enhance this so for now we are not going to enhance it on the models but on The View models remember we are using the view models so you see here we are using these as a uh required then we say string name you can also do it here we say you can actually do it here we say required at the top so you can actually do required then you can remove this and when you do this you can actually do that you can say when you say that then you can provide an error message so we can do error message in case it is not provided you can give the error message that you want to provide so you can say please provide valid customer name so you see that is the error message that will be displayed the same case for those fields that are required here so you can do away with this then you just have required then you can say please provide valid customer email address so you can do that and also in case you want to ensure that our email address is valid you can also do another annotation here then you can do that then you say email address we just do that we should actually provide a valid email address so let's just look uh relaunch our app and see how how that applies so this will actually validate and ensure that you're are providing a valid email address so let's just launch our app and see how that happens so if you're new to this Channel and you like our video comment down below subscribe and even share so if I click new I can maybe assuming I don't want to provide the names so here let's just copy the details then I'll I'll remove the name and try to save so if I just remove this name and you see it is actually now giving us the error message that we uh customize so our error message is now please provide valid customer name so that is how you provide a custom error messages so we've actually done uh the all crude operation up to where we are so the next thing is assuming you might want now to post this application on is so how do you do that so we've added all these options but one thing that I want us to do I want us whenever we just launch our app it should take us to the customers list instead of giving us this uh page so to do that you can actually uh navigate to our uh program. CS then here you see that it is actually our default route is home then index so I can change this to customers so you just do customers then it will actually navigate us directly to our customers whenever we launch our app so let's just launch the app and see what will happen so this will redirect us to our customers page without even navigating to the so that is that will be our landing page so let's just launch and see you see it has now taken us to our customers page without even doing any anything so and as you can see now we have our complete cud app where you can delete edit and you can register a user within our application so what I want us to do now is uh assuming you may want to publish this app on is so how do you do that so let's just go back to our code so if you go back to our code and Sol this application you can actually come to our application here then right click on the application here then if you right click you are being told there's an action here called publish so if you click publish it will give you some uh uh options and a dialogue to create a profile so you can publish this to AA you can also publish this to a do DOA container registry you can publish to a folder to FTP or ftpa server web server is or import profile so for now we are setting this uh to a profile so I'm going to publish this to a folder and then I'll choose this I'll choose you can actually choose the folder where you want your application to be published so I can browse and I can navigate within my uh uh machine but for now I'm going to leave it that way then if I click P finish it will now create my profile and I will be able to have my profile here so you'll see it has actually created my profile on this other side so if I click close on it then you'll be able to see we have uh the Target location this is where the folder will be the folder the files will be published you can also check if you want to delete existing files in case they were there so you can edit this if you click edit you should be able now to edit this and you can see you want to publish in release mode the target framework is net 8 deployment mode is uh framework dependent Target run time you can see uh you can have portable for me I can have it as Windows 6 or 4 then I can also use my default you can see use this connection string and you can see this connection string is actually what we configured in our app settings it has all our database name you see and it has our server name then for the publish options this is where you can check this delete all existing files prior to publishing and you can save it so if you save it you'll be able to see that this is now altered to true so after doing that and you're okay with our profile so this is actually our publishing profile you can now click at the top here to publish this so if you click publish our application will start showing here we are publishing this to a folder and remember the folder that you've chosen so it will publish all these files to our folder that we've indicated so that is when now we'll be copying these files to is and you can host our application so you can see all these files has been published and we can access them so to access them I'm going to click here and it will actually open for me all the files that has been published so so my files uh let me just show you guys so this is my files so my files has been published and you can see all these are my files so I want to copy these files so I'll just copy then I want to go to my is I'll just do is so I'll search eyes and if I open eyes it will I I can now navigate to my eyes without any problems so you can see it has open my eyes and within our eyes I can go to uh my application pools then under sites you'll see I have my sites here so I can create another site so if I click new I can say this is a customer app so this is my customer app then I can choose the folder so the folder where we are going to publish this is actually under local disk C then inet Pub then you can go to ww root then I'm going to create a folder a new folder here so I can make a folder and I'm going to call this customer app so if I do that then I can click okay and you'll see that this is linked to my customer app then I can actually give it a port I can say maybe this is 70 90 that will be my port and I click okay so this will be my customer app so if I want to explore to that folder I can use this uh op option here to explore so if I click on explore it will take me directly to that specific folder and you can see here that is the folder that we are in and this is where I'm going to paste all my files that we just published so I'll just do that and copy so all my files that we just published will be published there so I'm I'm going to transfer them there so as you can see I have all my files there so if I go back to is and click my app on browse section click browse so my app should actually launch and I should be able to uh view my customers so you can see it is now showing me so that is it guys for today we are going to leave it there so if you like our videos subscribe to our Channel comment down below and see you in our next video bye [Music] [Music] he

Channel: Macro Code

Views: 1,329

Keywords: AmigosCode, .NET, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, BoostMyTool, ProgrammingPragnesh, Gerald, MVVM, RESTFulApi, NetCode-Hub, NET8.0, BLAZOR, BLAZORMODES, AUTOMODE, PatrickGod, AdminLTE, ASP.NET, MVC, ASP.NETCOREMVC, EFCORE, .NET8.0CRUD, SCAFFO

Id: vkewYvIAAhE

Length: 83min 8sec (4988 seconds)

Published: Sat Mar 02 2024