Asp.Net Core Web API and Angular 7 CRUD

quick demo of this video tutorial in this video we will build a Web API in LP dotnet core with angular 7 inside that we will implement quiet operations using entity framework core and SQL Server DB so here we have the final output of the project inside that we can do operations like insert update delete and retrieve on payment details like credit card or debit card if you want to insert a new record for surf or we have to populate this form here here we have the expiration date finally we have the security code CVV inside this forum we have implemented form validation also now in order to insert this record click on the submit button here so here we have inserted corresponding payment detail for Angelica Ramos in order to update your record you can select the row corresponding details will be populated inside the form here now let's update this name here now submit before so here we have updated corresponding record now in order to delete error code we can click on this trash icon here then we have to confirm the operation click on OK so here we have deleted corresponding record from the application so inside this application we have discussed a lot of things regarding SP dotnet core and angular client-side I am sure you will find this tutorial helpful for your upcoming projects so please was till the end of this video tutorial before starting this video I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please be subscribe to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well what's up YouTube welcome to code affection in this video I am going to implement cred operations with asp.net core Web API project in angular 7 I have already published a video on implementing cred operations with traditional asp.net Web API project I have given the link in video description in that video most of you have requested me to make god net core version with entity framework or so that is what we are going to do inside this video before starting this video tutorial I would like to thank for your people donations for my previous folks in order to make more helpful and quality tutorials like this you can support me through PayPal donations I have given the donation in force comment and video description without further ado let's get started first of all let's look how to build web api with asp.net core this is my Visual Studio 2017 first of all let's create a web api in asp.net core so go to file then new then project or you can use the shortcut ctrl shift and from the left panel select dotnet core under wishes C sharp then select SP dotnet core web application then name your application here I will name it as Web API then select the location where you want to save this application click on OK at the top make sure that you have selected dotnet core and latest version of asp.net core then I will select this template API I will uncheck this configuration option for HTTP leave other options as it is click on OK so here we have created a brand new web api in asp.net core in previous video we have already discussed asp.net Co in brief though I will give you an overview of this dotnet core project first of all here we have the program dot C s file inside that we have this static void main function you must have seen this function if you are familiar with C sharp console application this is the starting function for whole project first of all here we have called this function create web host builder which in turn called this startup class which is defined inside this Kitab dossiers file here inside this class we have mainly two functions first of all we have configuration services function after that we have this configure function inside this configure services function we will add services for this dotnet core application so here we have added this service MVC into this service object of the type I service collection so without this service MVC this dotnet go application will be a playing console application this MVC service makes this dog narcho application into a web application and inside this configure function we will do the further configuration for this project here we have set the exception page based on the running environment and with this use MVC function we can do the for the configuration for the project now let's start coding like you have seen in quick demo of this video we are going to do cred operations on payment details for credit card or debit card you might have seen this feature in many of the e-commerce applications so let's look how we can do that first of all let's define the model for this project for that I'm going to add a new folder inside this project add new folder I will name this folder as models to get started with the model we have to create a DB context class so right click on this models folder here then add class I will name this class as payment detail context click on add we will design the model using entity framework core DB force approach so right click on this project then click on manage and you get packages switch to browse tab then search for Microsoft entity framework or select the same version as that of the asp.net core so I will select this 2.2 version click on install so here we have installed the package successfully now back to the DB context class here we have to inherit this class from DB context from entity framework core DB context we have to add the corresponding using statement so you can use the shortcut ctrl P read and click on this using statement microsoft entity framework or now let's add a constructor for this class so you can use this snippet ctor then double tab now for this constructor we have a single parameter dbcontext options of the type payment detail context I will name this parameter as options after that we have to call the parent constructor so base into that we can pass this options parameter I will explain why do we need this constructor with this specific constructor parameter after creating one controller inside this project now we have to define the model for payment detail entity or tab so let's add one more class here at class I will name this class as payment detail click on add now let's define required properties for the entity first of all we have ID property for this entity PM ID after that we need one more property for card owner name so I will name this as card owner name then we need one property for card number string card number then we need a property for expiration date string expiration date finally we have CVV number for this entity I will use this PM ID as the primary key so we can use this attribute key for that we have to use this using statement system dot component model dot data annotations as you know all of these properties here are mandatory to insert a payment detail so you want to make all of these properties required so we can add this attribute required here let me copy pays for remaining properties also now when we create the SQL Server table for this model columns corresponding to the string properties will have the datatype and walk max which is more than what we need so we have to set the appropriate data type for string properties we can use this attribute column for that we have to use this namespace data and notations dot schema inside that we can set this type name is equal to n bar care hundred now let's do the same for remaining properties after card or now we have card number i assume that car number will have sixteen digits internationally so I will set the data type as work 16 then we have the expression date for expiration date we will have the format like this two digits for months then forward slash then two digits for year so this property will have five characters so I will set the data type as walker five and finally we have the three-digit CVV security number so I will set the data type as work three now we have done with defining this entity payment detail now let's add this entity into this DB context here for that we just need to add a property outside this constructor of the type DB set so here we have the property with type to be set for this class payment detail I will name this property as payment details now we have completed with defining model for this project here we have the constructor parameter TB context options as options into this parameter we have to pass informations like DB provider it might be SQL Server MySQL PostgreSQL etc along with that we have to pass the connection string for the DB so let's look how we can pass those values into this constructor parameter for that we are going to use dependency injection in asp.net core and we can pass from this class here startup where we have the function configuration services like we have added this MVC as a service into this services type of the collection.i service collection we can add a DB service or DB contact service into these services here services dot ad dbcontext trees of the type payment detail context we have to use this model namespace here and into this function we have to pass both DB provider and connection string for that I will use this lambda expression here with options options dot use SQL server function can be called for specifying the DB provider use SQL server for that we have to use this namespace entity framework or inside then we can provide the connection string so first of all we have to save the connection string inside this app settings dot JSON file here i will add connection strings here connection strings inside that we can have as much as connections for this project we are going to have a connection for development so i will name this connection as dev connection so here we have extra and then connection string will be something like this server is equal to locale then backward slash we have to use two backward slash and we have the SQL Server instance name SQL Express then followed by database name database is equal to I will name this database as payment detail DB then we will connect the database using Windows authentication mode so we can set this trusted underscore sorry underscore connection is equal to true in order to execute multiple batches of Cori with a single connection we have to set one more keyword here multiple active result sets result sets is equal to true sorry here we have a typo locally that's it now back to this startup clause here now we have to access that connection string inside this function for that you can use this configuration property here so we just need to do this configuration dot get connection string function can be called inside that we have to provide the connection name that we have mentioned here dev connection let me copy this and pasting here I will explain how this dependency injection works once we create lis controller for this payment detail class before that let's create the database using this DB model that we have defined here for that go to package manager console for me here we have the package manager console if you can't see package manager console in your visual studio here you can select the project from solution Explorer then go to tools then a new get package manager then we have the package manager console here first of all we have to create migration so just execute this command ad - migration and we have to provide a migration name I will set it as initial create hit enter as a result of this command execution here we have the new folder migrations with respective eShop files now in order to create the actual database we just need to execute this command update - data base hit enter since we have executed this command successfully they should have a new database let me check that in my management studio here expand this data base node here so here we have the new data base payment detail dB we have given this name inside the connection string here payment detail DB inside that we should have a double payment details let me check the table design inside the table we have columns corresponding to these properties that we have defined inside the payment detail clause so first of all we have the ID or primary key for the table PM ID you can see that it is already set as the identity specification for the table it will start from 1 and incremented by 1 we don't have to insert values into the column SQL Server will take care of that then followed by card on a name then card number expiration date CVV security code since we have said required attribute for these string properties here these columns will not allow null so entity framework or created the database as we expected now back to the project now let's create a Web API controller for this payment detail class here for that right click on controllers folder then add controller I will select this template API controller with actions using entity framework click on add for model class I will select the payment detail class when context will be payment detailed contacts I will name this controller as payment detail controller click on add as a result of MVC scaffolding mechanism here we have created the control of payment detail which is inherited from the base class controller base inside that we have required Web API method to implement the credit operations before getting into the details let's discuss how the dependency injection works you can see the controller constructor payment detail controller with a single with a single parameter context of the type payment detail context and here we have the private property underscore context of the type payment detail context inside this constructor we have said this private property underscore context using this constructor property context now from where do we pass the value for this parameter there comes the dependency injection inside this middle wave function configuration services here we have added this DB context into the services variable here so whenever we create a controller with constructor parameter of the type payment little context this I service collection property services will provide the new instance of this payment detail context into this constructor parameter context we don't have to create the instance of DB context class explicitly using new keyword like we used to do in previous SP dotnet applications so this is one benefit of using dependency injection in our projects before asp.net core we were using third party packages like Castille Windsor auto FAQ etc by default asp.net implements dependency injection now back to the payment detail control here here we have set the routing for this controller with this URI API forward slash then here we have the template for controller this controller template will be replaced by the controller name which is payment detail and you can see for this Web API matters here now let's discuss this Web API method in brief first of all here we have the Web API method get payment detail it has two URI API for slash payment detail it is of the type HTTP GET it will return all the collection of payment it is that we have saved inside the payment details tab after that we have this web method get payment detail with this parameter ID this is of the type HTTP GET and here we have the URI parameter ID that should be passed after this forward slash here so from this Web API method it will return the corresponding payment detail with the given ID for example for this URI it will return the payment detail for the ID file for this project development we don't need this particular web method so I will get rid of this web method from here after that we have the put payment detail web method for this work matter we have two parameters IV then payment detail inside this ID we will have the ID of the per core which is to be updated and inside this parameter we will have the updated value of the record for this work method corresponding URI will be something like this API for slash payment detail forward slash then we corresponding ID so value for this ID can be passed through the URI and we will pass the value of this payment detail using body we can discuss these work method in great detail while developing this application after the put method here we have the post verb method post employee details it is used to insert a new payment detail after that we have the web master of the type HTTP delete it is used to delete a corresponding payment detail okay so these are the web amateurs inside this controller now let's test the working of this application for that go to debug then start without debugging or you can use the shortcut ctrl f5 by default this Web API have navigate inside this URI API four slash values which is from the default controller here values now let's check how we can access this exact Web API method here get payment details of the type HTTP GET it should return all the payment details record from the tabla for that we will use a tool called postman using this tool we can verify the working of the Web API before calling from the client application so first of all we are going to make a get request and corresponding URI will be something like this let me copy this and pasting here ABI forward slash then payment detail click on send so currently it returns an empty array because inside this double payment detail we don't have any row now let's insert a new row manually for that right click on the table then click on edit top 200 rows card on our name will be Fiona green then card number one two three four five six seven eight nine one two three four five six expiration date 10 4/10 and we have CVV number will be one two three hit end up so here we have one record for Fiona Glee now let's make this request again that's it here we have the payment detailed for Fiona green did you notice the JSON structure returned from the web api method here we have a small issue here you can see that by default maybe I returned the Jason after camel casing for this ID we have provided capital p.m. that you can see here capital PM ID but here we can see the result after camel casing then for this card or now we have the capital C than capital o but here we have the small letter C it is the result of camel casing by default asp.net coach Jason serializer will use the camel casing for these key values here we don't need this conversion because it might cause some confusions when it comes to the client-side application angular instead of that we have to return these keys exactly as we have given inside this class here that we can configure inside the middle wave function inside this startup clause here configure services along with this ad MVC function we need to change one more function invocation it will be something like this add JSON options inside that we have to provide a lambda expression with this parameter options first of all I will define a variable ba resolver is equal to options dot serialize the settings dot contract resolver and here we have the if clause to check whether this resolver is null or not if it is not equal to null we can do this first of all here we have the resolver and we have to cast this as default contact resolver default contract resolver for that we have to use this namespace json dot serialization and from this we can set this property naming strategy is equal to null so it will nullify this extra conversion for these keys here now let me build this project again for that right-click on this project click on build now let's make this get request again so here we have the JSON result with keys exactly similar to the c-sharp properties that we have defined inside this payment detail class here so here we have built every babyi with asp.net core now let's check how to consume these web api methods from angular 7 application now let's create the angular 7 project inside this folder directory where we have already created the web api project in order to create the project we have to execute few commands from angular CLI so we have to open the command prompt for that you can use this shortcut hold shift then right click so here we have the option open command window here in order to create the angular project you can run this angular CLI command ng new then application name I will name this as angular 7 hit enter would you like to add angular routing know which start sheet format would you like to use I will stick with CSS so this command will take some time because it will install some default packages from NPM as a result of this command execution here we have already created this project angular 7 finally we have created the angular 7 project with some default NPM packages now for this angular 7 project development I will be using visual studio code editor you can use the visual studio itself but I would like to use wishes studio code editor in order to open this project inside Visual Studio code editor you can right click here then click on open with code or you can open the IDE from command prompt itself so first of all we have to now inside the folder Angela seven then in order to open the vs code editor from this location you just need to execute this command code then period or dot symbol hit and ow so here we have opened this Visual Studio code editor from that particular folder directory now let's run this new angular application for that I will be using integrated terminal from this IDE here in order to run this application you just need to type this command ng serve then double hyphen or hit enter it will compile and run this application in your default web browser so this is how the default angular 7 application looks like for the application development I will be using bootstrap and phone our some icons so 4 so 4 go to the official website get bootstrap comm then click on this get started button here we have to get these CSS and JavaScript references into the project so let me copy this CSS reference then back to the project open index dot HTML just about this head end tag we can paste that CSS reference now let me copy this JavaScript reference then back to the file just paste that about this body end tag here now let's add the phone our some icons for that you can go to this website phone our simcom click on this start using free button copy this link from here now we can paste that just below this bootstraps chargesheet now let's create required components models and service classes before that I will show you the structure of the application that we want to build for that I will add a new txt file here AB structure dot txt I have already prepared the structure of the application I will just paste that here so for this application development we'll have the parent component payment details inside that we will have the child components payment detail and payment detailed list and here we have the shared folder inside that we have the service class payment detail and we have the model class payment detail now let's create these required files for that let me open one more terminal here in order to create this parent component payment detail you can use this angular CLI command ng g for generate C for component here we have to provide the name of the component I will just copy that from here and pasting here if I execute this ng command it will have these files will have a CSS file and HTML file a file with extension spec'ed or TS and the exact type script file for the component so these four files will be created we don't need this file with extension inspect or TS so in order to remove that we can use this flag spec and I will set it as false here and also we don't need a separate component specific style sheet like this you can see this style sheet reference inside this component type script file here Styles URL instead of that we will use the inline CSS array styles here we have to provide an array so from now onwards we don't need this component specific style sheet I will remove that from here and we don't need this file with extension spec'ed or TS so with this spec flag here we can skip the creation of s file with extension spec dot TS and in order to use inline Styles instead of creating separate style sheet files we can add this Prag here in line - style or in short you can use this double - yes hit enter so here we have created the component detail so here is the corresponding folder payment details and here we have the typescript file inside that we have the inline Styles array and here we have the required HTML file we have skipped the creation of this PAC file and creation of separate style sheet also now let me clear this terminal for that you can use this command clear now we have to create this child component payment detail for that I will use the previous command with few modifications so here is the previous command we have to create this new component payment detail inside this folder payment details folder so we have to do this payment details forward slash then component name I will copy this component name from here and pasting here now hit enter newly created child component can be seen inside this payment details folder here like this we have to create one more component for payment detail list component so here we have the previous command now we have to create the component payment detail list hit enter so here we have created all the components required for the application development now let's create required service and model files before that let me clear this terminal from here in order to create the service class you can use this command ng g4 generate s4 service we have to create that service file inside this shared folder so we have to do this shade for slash then service name will be payment detail let me copy this and paste in here for this service file also there will be a file with extension spec dot TS for test purpose you don't need that so I will add this black spec and I will set it as false hit enter so here we have the folder shared inside that we have the service class for payment detail like this we have to create one model class ng g4j rate unfortunately there is no specific command to create a model class in angular instead of that we can use few tweaks with class creation command so ng g4j rate then we have to create a class you can use CL in short we have to create that inside this shared folder then class name will be payment - detail so when we execute this command there will be a file with this name payment detail dot TS instead of that we need a file with extension expect dot TS for that we can use this flag here type is equal to model hit enter so here we have created the model class payment detail corresponding file is named as expected inside that we have this class payment detail now inside this class we have to add properties to represent a payment detail record it will be almost similar to the class which we have defined here payment details so all of these properties should be added into this class here so first of all we have the ID pm ID it's of the type number like this we have to add remaining properties also so here we have added all the properties that we have inside this Web API model here now let's start designing this application here we have the root HTML file index dot HTML here we can see the component tag a bruit so this tag will be replaced by the HTML from the root component of an angular application app component so here is the corresponding component HTML so these codes here is responsible for the default view of the application here so we can start developing this application from this app component HTML so first of all let me get rid of this default HTML here then we will have the deal with glass container from bootstrap inside that we have to show this component parent component HTML payment details component so we have to add corresponding selector let me copy this and pasting here now we have to make a tag with this selector so here we have the parent component HTML first of all I will add a div with class Jumbotron which is a class from bootstrap we will show the heading for this application with h1 element it will have few classes from bootstrap display - 4 then we will have the class text - Center to align the text in center and I will name this application as payment detail register after this heading we need a horizontal line separation so here we have the HR element below that we will have the grid system from bootstrap so here we have the deal with class raw first of all we will have the column width with 5 grid column so corresponding class will be called MD 5 like this we need one more div it will have 7 columns from grid system inside this first div here we have to show this child component HTML payment detail so here is the corresponding component selector let me copy this and paste in here now let's make a tag with this selector and inside the second column here we show this payment detail this component so here is the corresponding selector let me copy this and paste in here now let's make a tag with this selector that's it now let me save all of these modifications back to the application here so here we have the application name payment details register inside the fourth grade column here we have the payment detail component and here we have the second child component payment detail list inside this payment detail component HTML I will design the form for insert or update operation of the payment detail for that we will use this model class here payment detailed model before designing we form I want to tell you one thing inside this application if you want to share an instance of a class with multiple components we are going to do this we will inject that into this app module tortillas file and we will use that injected service instance in these components here for example we want to share this payment details service class to be shared among these two components here payment detail and payment detailed lists in order to do that for sir for we will inject this service class inside this AB dot module dot t as file and the same injected instance can be accessed from these two components here so that is one of the best way to share an instance in an angular application so first of all inside this service class here like we have said in order to design the form inside this payment detail component we need to use the model class and that property model property is to be shared among these two components here so I'm going to do this I will create a property of the type payment detail model inside this payment details service here so here is the property form data which is of the type payment detail class so here is the model class if you click on this corresponding import statement will be added at the top here now in order to access this form data property from these two child components here first of all we will inject this payment details service class inside this AB dot module dot ts4 yeah we just need to add the class inside these providers are a and we have to add the corresponding import statement for that you can use the shortcut hold ctrl then press period or dot symbol and here we have the corresponding import statement it will be added at the top here so here we have injected this payment details service class in order to access this class from this payment detail component here we just need to create a property private property private service of the type payment detailed service here in this service class we have a property form data of the type payment detailed model so inside this payment detail component HTML first of all we will have the form inside that you don't need this action attribute here instead of that first of all I will add this local reference form and I will set it as NG form inside this form I want to prevent autocomplete or autosuggestion from previous form datas for that we can set this autocomplete as off first of all inside the form I will add the input control for card or nickname so here we have the div with class form - group inside this div we need a textbox so I will add this input control here and I will save the class pass form control from bootstrap we don't need this type attribute here by default it will be text and after this class I will set the placeholder card on a name now we have to set name local reference and two-way data-binding for this control so we have to provide the exact property name from the model class so it would be better to open this component HTML and model class side-by-side in Visual Studio code editor you can use this split button here it will split this window into two halves inside this force half here we have the component HTML inside the second half we can open the model class here so here we have the property now let's add the name for this control name will be this one let me copy this and pasting here then we have to set the local reference cut on a name and which is equal to ng model after that we have to provide the two-way data-binding ng model is equal to so it should be from the component property so here we have the component type script file here inside that we have this constructor property service so we can do this Savi's dot inside this zombies we have this card on a name let me copy this and paste in here so this is all we have first of all we have set the name attribute and then we have the local reference which he said as ng model then after that we have the two-way data-binding for the control ng model is equal to service dot cottony now let's look how this form looks like before that we have to do one more thing since we have designed this form using template driven approach we have to add corresponding module into this app module dot T as file here so here we have to import the class I will have the imported menhir from angular forward slash forms we have to import forms module now let's add this class forms module inside these imports array here let me save all of these modifications here then back to the application so here we have the input control for card on along with this input control I want to show the phone our some Eichorn as a prefix so a last look how we can show the prefix icon with bootstrap and for our some icon so back to the component HTML here for that it will have this div with class input group which is from bootstrap input group inside then we will have another div with class input - group - prepend inside that we will have another div with class input then - group - text and I want to show the background for this icon as white so I will add this bootstrap class BG - white now inside this div here we can show the appropriate for our some icon so let me select a phone or some icon so go to the official website phone awesome calm and click on this free button here since we have a text box for card on a name I will search for you so then I will select this icon here we can copy this whole eye element with required class click on this so here we have copy the HTML now back to the deal I will paste that here now we have to move this input control into this input group here let me save this then back to the application here so here we have the control with appropriate for our some prefix so other than this card on a name we have these much properties card number expiration date and CVV number so let me copy this do three times just below this let me copy this and pasting three times here after this card name we will have card number so we have to edit the corresponding properties here I will set it as card number doctored reference to a data binding then we have the placeholder card number we have to select appropriate phone or some icon so let's search for card here so I will select this icon let's grab this HTML and I will paste that here instead of this icon after this card number we have expiration date so let's update corresponding attributes placeholder will be expiration date now let's select an appropriate phone or some icon of the search for calendar I will select this icon let me copy this I tagged from here and I will replace that here after this expiration date we have CVV so here we have the corresponding input control and we update the corresponding attributes now let's select a phone our some icon for this Security number CVV for that i will search for something password and i will select this icon here copy then we paste the attack here since this CVV is a security number we have to set this input control type as password so that characters entered into this input control will be displayed as a sequence of dots or as tick marks based on the browser you are using now after all of this input control we need a submit button so I will add this div here with class form - group inside that we have the button of the type submit button text will be submit for this button we need to add few classes from bootstrap first of all we have BT and then BTN - success and this button will be larger than from the normal button so we will add this class BTN LG and in order to expand this button to the parent div here we can add this class BTN - block and for this button also we need to add a for our some icon so better our search for save instead of that we will use something different that base I will use this one let me copy this back to the HTML I will paste that just before this submit text let me save all of these modifications back to the application here boom so here we have the form to insert or update payment detail record sorry I'm not a man of perfection though I want to show these two input controls in a single line because these two input controls will not have that much characters this expiration date will be of the type mm for /yy so instead of this base holder we can set that here it will be here expiration date and I will set this placeholder ass capital m m4 / YY save then back to the application that's it so this input control will have 5 characters and this Civic input control will have 3 digit security number so we can show them in a single line we just need to do this I will add an extra tip here with class form - row and we will enclose these two form groups with this form raw deal okay that's it and this first form group div for expression date will take seven columns from the rows so we have to add this class call em d7 and for this CV live here we will have five columns called md5 let me save this and back to the application so here it is so here we have to implement validations for these controls all of these controls is mandatory so first of all we have to set these form controls as required so back to the component HTML we have to add this attribute required to all of these input controls here required let me copy this now let's paste that for remaining input controls also we have card number then we have expiration date then we have the CVV password other than this required validation we have to set limitation on character length inside these input controls here for card number in my knowledge it should be 16 characters so I will set that length validation for this card number here so we just need to do this max length is equal to 16 and min length is also 16 actually instead of this card number place holder we can say 16 digit card number so like that we have to set validation on these two input controls also so here we have expiration date let me copy this and pasting here for expiration date it should have 5 characters and for the CVV input control it should have 3 characters now if someone and this invalid data into these form controls here we have to show proper violation error indications so let's look how we can do if you inspect these input controls here we have few classes which starts with ng - and G pristine ng invalid and ng touched and the pristine means there is no change from its initial value and G invalid means this control is invalid based on the validations that we have provided inside the form here and here we have the final class ng touched which means whether the user is visited this control or not now let me end a few random characters inside this text box here at the same time you can see the updates inside this class list here so here we have replaced ng pristine with ng dirty means there is a change from its default value and ng invalid is replaced with ng valid because since we have few characters inside this control currently this control is valid so based on these presence or absence of these ng classes we can show validation error indications for that back to the project then open the global stylesheet stars dossier sirs if there is an input control with these two classes ng touched and ng invalid we will apply this border color if the control has this ng valid class it means the control is valid in that case we will apply this border color let me save all of these modifications here then back to the application let me inspect this input control currently this input control has these two classes ng invalid and ng touched and thereby we have applied this CSS rule here now if I under something inside that we have this green border which is shown as the result of this rule here now if you want to show validation error indication for this prepend icons also you can do that with conditional class in angular so back to the project then open the corresponding opponent HTML so here we have the prepend icon for the card on and now let's look how to apply validation error indication for these icons also for that we will use the conditional class directive class dot green - icon we will apply this class whenever this card name control is valid so we have to use this local reference card on a name dot valid we will apply one more class red icon whenever the control is invalid so this is what we do instead of this class green icon we will have red icon close and we will apply this class whenever this control is invalid and it is touched cut on a name dot touched we have to apply these classes for remaining prepend icons also so let me copy this conditional Clause directly from here and pasting here for card number then we have expiration date then CVV number now we have to modify the corresponding input control local reference I will show you 1 vs code editor shortcut to select this card on a name here so hold ctrl then press D so here we have selected this word card on a name now if you press D while holding this control you can see that the next word card on a name is selected you can see because on both of these words here if I do that once again they will select the next card on a name so instead of this card on a name we have to have card number so let's type that here card number now let's do the same for remaining class directives also so here we have expiration date so place the cursor on the force word card on a name then hold ctrl then press D so here we have selected all of these three words now we have to replace that with expiration date now let's do that for CVV hold ctrl then press the twice and thrice instead of this we have C V V okay so here we have applied these two classes green Eichorn or red Eichorn based on the conditions that we have applied here now we have to define these two classes inside this stars dot CSS here with those two classes we just meant to change the text color to green or red okay let me save all of these modifications here then back to the application so here we have visited this first control then move to next control so this control is invalid and thereby we have applied this red border around the control and also we have changed this icon text to read now let's fill that with few characters so here we have changed the border of this control and we have changed this icon text also you can see the same for this o card number then we have expiration date CVV should contain three characters now finally I want to disable the submit button when this form as a whole is not valid for that back to the HTML here we will apply this attribute disabled whenever this form here this form is not valid so we can use this local or France form and we just need to do this we will have this condition form is invalid so when form is invalid we'll disable this summit button let me save this back to the application initially we have this blurred submit button because it is disabled now if you populate this form with proper datas this submit button will be enabled now let's look how to submit this form before that I want to create a function to reset these form controls to their default values so back to the component type script file here inside that I will define a new function reset form it has a single parameter form it's of the type ng form we have to import this class from angular forms you just need to click on this item here it will add the corresponding import statement at the door inside the function first of all we will do this form dot reset form function can be called and then we have to reset this payment details service property form data so we can do this this dot service dot form data is equal to will provide a new object of the type payment detailed model so first of all we have PM ID I will set it as 0 then we have sorry instead of equals symbol we have to use : then we have card on a name it will be empty string then we have card number it will be empty string then we have expiration date then we have CVV number now we have to call this function inside this ng only lifecycle hook here so we just need to do this this dot reset form function can be called here and here we don't have a value for this form parameter so I have to make this form parameter as nullable and I will add and if close here you only need to call this reset form function when we have a value for this form parameter so we will do this if form so I will check this if this form parameter is nor Denault they will call this reset form function otherwise we just need to reset these form values now let's handle this form submission here so here we have the component HTML inside this form I'm going to wire up a submit event so submit whenever we submit this form we will call another function on submit into that we have to pass this form local reference form now we have to define this function on submit inside this typescript file here on submit with a single parameter form of the type ng form so when you submit this form this function on submit will be invoked inside this form parameter we will have the values inside these form controls in order to retrieve that we just need to access this property form dot value inside this we will have a JSON object containing values from these form controls so we have to submit this form data into this Web API project here we will consume this payment detail controller HTTP POST work method here this one this will insert the new record based on the given details so a less look how we can do that I'm going to define a new function inside the payment details service class here here we have the function post payment detail for this function we have a single parameter form data it's of the type payment detail model class inside the function we just need to make the HTTP POST request to this will BPI method here for that we are going to use HTTP client class so first of all I am going to import the class here import statement and we are going to import that from angular common four slash HTTP and we have to import HTTP client now we have to inject this inside this constructor here so private HTTP of the type HTTP client in order to use this class here we have to add the corresponding module HTTP client module inside the app module torti as far here so let me copy this import statement and we can reuse that with few modifications for the module we have to import HTTP client module and we have to add this class inside this impose array here now back to the service class now here we have the function in order to make the post request we just need to do this this dot h c dt p dot post function can be called into that we have to pass this parameter value form data as a first parameter to this function we have to pass the corresponding uri for this web method here we are running this web api method at this port number here so let me copy this and i'm going to define a new property here it will be a read-only property i will name it as root URL and i will paste that here now we can do this this dot rooty all contains the base URI for the web method into that we can concatenate payment detail for slash payment details so this will post the form data into the web api method of the type HTTP POST finally this post function will return an observer so from this post payment detail function we just need to return that absorber so that we can access the absorber inside this component typescript file here so here we will call the new function this dot service dot post payment detailed into that we have to pass the value so form dot value property can be passed sorry instead of a lead we have value property and from this function we have retained an observer so we can subscribe with that here subscribe here we have the success function after that we have the error function also if there is any error we will print that inside the console window so we can do this console dot and soul dot log and we will print this error object if the post operation is successful we have to reset these form controls to the initial state so we will call this reset form function this dot the third form function can be called and we can pass the form object here now let's look what we have inside this HTTP POST bulk method here we will pass the form data into this variable of the type payment detail model and here we have the private dbcontext variable underscore context we have initialized this context during the constructor of this controller through dependency injection we have already discussed that before and inside the DB context we have this DB set payment details and we will add this new object into the DB set and finally we just need to call this Save Changes function of the type asynchronous and here we have the return statement with this function created action means this function will retain a status code to not want means a new resource or new record is inserted at the server site inside the function as a parameter we have retained the new payment detail ID with the corresponding payment details now we have one problem to access web api method from this asp.net core project from this angular 7 means this Web API project will block requests from another application which is hosted in a different port number or different domains in this case we are running this angular 7 in a different port number so this feature in Web API project is called cross-origin resource sharing or course cor s in order to consume web api matters from this LP dotnet core project from this angular 7 we have to enable cause for this angular 7 project inside this Web API project here in order to enable course inside this SP dot that core project we are going to use a new gate package so right click on this project here then manage and you get packages then inside this browse tab you can search for this package Microsoft SP door net core calls package so let's install this package so here we have successfully installed the package make sure that we have selected these same version as that of asp.net core now open start-up dot CS file here then inside this configuration services function we have to add that as a service so we just need to do this services dot add course function can be called in order to configure that for the angular project we can use this configure function here we have to configure this course package before this use MVC functions so we can do this AB dot use course inside the function we will have a lambda expression with the parameter options then we have options dot with origins so inside this function we have to specify the origin of this angular 7 project so I will copy this and back to the project then I will paste that here make sure to remove this forward slash at the end after this with origins function we have to call few more functions hello any method it will allow any method like post get delete etc and we have to allow all headers also so allow any header so this asp.net core web API project is ready to accept the HTTP request from this angular 7 project here now let's build this project in order to apply the new changes the solution now back to the angular 7 project we have this service function to make the post requests sorry we have to remove this forward slash from here let me save all of these modifications then back to the angular 7 project here I will try to insert a new payment detail here now let's submit before here we have an error let's check that inside this console it is of the type 500 internal server error let's check this error object here we have the detailed error if you want to see that right click on this then Stowe has global variable so here we have the error with HTML document format no aroud matches the supplied values here we have made the request for slash API for slash payment detail that's right but and here we have the parameter payment detail into that we have to pass these property values let's check that inside the form here we have added input controls for these properties yes we don't have an input control for this property PM ID inside the form currently inside this form dot value will have the pmid but its value will be not so during insert operation this PMI t should be zero in order to do that we have reset the property 0 reading ng on a lifecycle hook in order to pass that during form submission we have to have an input control for p.m. ID here which should be hidden we don't need to show that to the user so input of the type hidden' and we are going to bind this control using one-way data-binding for other input controls we have used to a data binding since we have a hidden field here we don't need to do the to a data binding instead I will do one-way data binding using this value attribute here we just need to do this service dot form data dot PM ID so this is how we can bind value of an input control using one-way data binding for other non hidden fields we have used two-way data-binding with local reference and this ngmodel attribute actually here we have a type of with two-way data-binding we have to bind these properties from this form data inside this service object so let me correct that for two-way data-binding inside this form now let's look is there any other problem inside the web api method here when we call this function this function will return a to node 1 status code back so here we have another problem this first parameter should be a name of web method inside the project we have deleted this web method actually this function is trying to return this status to not want with the URI of newly created record so let's bring that function back here so here we have the Web API method get' payment detail inside that function we have a single parameter ID for the corresponding record so that value is passed inside this anonymous object here and inside this last parameter we will have the details of newly inserted record now let's build this project again back to the project let me populate this form again now let's submit the form boom since form is reset to its initial State there a course should be inserted at the server side let's check that inside the management studio right click on this tab then select top thousand rows so here we have the payment detail for Benjamin Franklin now let's look how we can show a notification message after operations like insert update and delete like saved successfully or deleted successfully for that we are going to use NPM package so go to the website NPM J Escom and we are going to use the package n GX toaster which we have used in previous angular applications also in order to install this package you just need to run this command here let me cope this back to the project let me open one more terminal and I will paste the command here hit enter so here we have successfully installed the package now let's look how to use this package back to the package documentation here we have to use these two modules here browser animations and in GX toaster so let me copy these to import statement from here then open AB dot module dot ES file here I will paste those two imposed statement here then we have to add these two classes inside this import array here first of all we have browser animations module then we have toaster module from this toaster module we have to call this for road function now finally we have one statute for this in DX toaster package so here is this chargesheet toaster door CSS from this directory not modules then inside that we have this new folder for ng X toaster now we have to mention that inside the angular dot JSON file so here is the file angular dot JSON then search for styles inside this stars array we just need to add this style sheet reference now let's look how to use this package after this form submission here so back to the component payment detail component so first of all we have to inject the toaster service inside this component constructor so private toaster which is of the type toaster service click on this it will add the corresponding import statement at the top then we just need to do this after this reset form function we will call this this dot sorry this dot toaster dot success function can be called as a first parameter we have the notification message submitted successfully as a second parameter we can provide the application name which is payment detail register so this is all we need to do to show a toaster notification because of the latest version of bootstrap we have to set the opacity of the toaster dev to 1 so let's do that inside this - da CSS here I will set this div opacity to one before testing these new updates we have to restart this program because we have made changes outside the SRC folder which is inside this file and gula dot jason in order to restart this program just use the shortcut ctrl C then type Y for yes before restarting this program let's save all of these modifications in order to restore this program you can use this command in this serve double - or again now let's look how the notification looks like for that I'm going to insert one more payment detail here now let's submit the form so here we have the notification message submitted successfully now let's check the database let me execute this select statement again so here we have the new record for a strong now let's look how we can leave these payment details inside this second deal here that is inside this component payment detail list for that we can consume this Web API method here get payment details of the type get inside that we have retained the payment detail list now let's look how to consume this inside this angular 7 project for that let's open this service clause here I will name this function as refresh list inside this function we can do this this dot HTTP dot since we have a get Web API matter we can call this gate function here as a force parameter we have to pass the corresponding URI which is here API for slash payment detail so I will copy this URL from here and paste that inside this this gate function returns an absorber I will convert that absorber into a promise so we just need to call this to promise function into this function we can change this function call then inside the function we can pass this callback function with a single parameter response we just need to save the returned list in a property here so I will define the property list which is an array of the type payment detail payment detail now we can set the property here this dot list is equal to response and we have to convert this as payment detail array let me copy this and paste in here now using this list property we can show a table to list all of the payment details inside the second of here so open corresponding component type script file here payment list first of all we have to have a private property of the service private service which is of the type payment detailed service first of all we have to populate this list property for that we can call this refresh list function inside the component in the only lifecycle hook here so we can do this this dot service dot refresh list function can be called here now using the list property we can design the HTML table inside the corresponding HTML file here instead of this default text here we need a table with few classes from bootstrap table then we need one more class table - ho-ha it will apply a grey background color when we hover on tablet rows in order to show payment details we just need to I tray through this service property list so we can do this here we have the TR element and we are going to I trail through the list using ng for directory from angular star ng 4 is equal to let payment detail in short PD off inside the component typescript file we have injected this service as service inside that we have this list property inside this TR element we can add TD elements for each of the payment details it will display them using string interpolation so we have two pair of curly braces PD thought first of all we have the owner name so card owner named then after that we have card number after that we have expiration date we don't have to show the security number CVV let me save all of these modifications here back to the application boom so here we have listed all of the payment details that we have inserted so far now I want to add one more CSS scroll when we hover on these tablet rows here we have to show hand symbol or pointer kalsa four' that you can add this rule inside the star star CSS here we will set this cursor as point up and be hover on the tablet rows now back to the application next we are going to implement update operation for that first the four user will select error code for update operation by clicking on any of this row corresponding the code details will be populated inside these form controls for that we just need to add a click even for TD cells inside the table so here is the corresponding component HTML I will add a click even here click equal to we will call a function populate 4 into the function we can pass the pavement detail object PD now let me copy paste the same function for remaining TD cell click event now back to the component type script file we need to define the function populate form so here we have the function populate form for this function we have a single parameter P D of the type pavement detail model class inside the function we need to populate the corresponding a course inside this form we have designed this form using the service class property form data that you can see here form data in order to update these form controls with the selected record details we just need to update this property form data so this is all we need to do this dot service dot form data is equal to PD let me save this back to the application here click on this straw so here we have populated selector road details inside before now we have a small issue if you edit any of these form control values at the same time you can see we changes inside this tab also we need to prevent this update inside this table before the form submission it is because of the direct assignment here instead of this we need to make a copy of this object and then assign to this property so we can do this object dot assign function can be called as a first parameter we have to pass the target I will pass the empty object we have the target on the left side of assignment so we can pass an empty object here and we have to copy this PD object save back to the application let's check that again if I edit this here we have not updated the same inside the tablet now after selecting error code for update operation you say can make changes inside these form controls then submit the form we have already implemented insert operation with this same submit button inside the same function we have to do update operation also so here is the function on submit inside that we have implemented insert operation now we have to accommodate update operation also in order to check whether we have an insert or update operation you can check the input hidden field here p.m. ID for update operation it should have a non zero value currently you can see that it has a value 1 if you select the second a code here it will be 2 now if you reload this page here we have the form for insert operation now its value should be 0 so based on the value of this p.m. ID we can decide whether we have an insert or update operation for this insert operation I will add this if close form what value dot p.m. ID if it is equal to zero we will do the insert operation I will move this insert operation into a separate function so here is the function insert record for this function we will have a single parameter form of the type ng form and let me cut these codes from here and pacing here now let's call that function here this dot insert the code into that we have to pass this form parameter value in this else block we can do the update operation inside this else block we will do the update operation for that I'm going to define one more service function it would be almost similar to this function I will copy this and pasting below that using control-c and control-v combination oh we have another via school shortcut just select the function then hold alt and shift then use the down keyword arrow so here we can replicate this function as much as we want okay I will rename this function for update operation we have to call this Web API method here put payment detail for this function we have to use the URI like this it has two parameters ID and payment detail ID value can be passed through the URI and we have to pass this payment detail through body so let's look how we can do that first of all it will compile the ID parameter with repiy m ID inside this object if they are not matching it will return a bad request if they match each other first of all it will set the entry state as modified and then it will call the Save Changes function if there is any error due to concurrency update operation it will be handled inside this cache block here if update operation is successful it will return a - not for no content status code with this function now let's look how to consume this put web method from this angular application we just need to call this put function instead of post function here and for the Web API URI we have to concatenate form data dot PM ID as a second parameter we can pass the value of this parameter payment detail after the operation it returns an absorber we have returned that absorber from this function now let's call this function inside this else block for this update operation also I will define one more function like this insert our code we can just copy this and modify so we can use the shortcut alt shift downward arrow and I will name this function as update record and instead of this service function we have put payment detail after successful update operation we will reset the form and we will show this same toaster notification message now we have to call this inside this else block here I will copy this and pissing here instead of this function we have update record so instead of passing the value of ID from this form data variable we can directly pass from this service object form data so this is what we need to do this dot form data dot pmid so this is what we have done we have provided the ID from this service property form data that is what we have displayed inside this form controls here so instead of passing this form data variable we can use this form data from service so this dot form data property can be passed we don't need this form data here let me remove that and I will remove that from this post function also we can pass this service property form data now back to the component type script file here we don't need to pass this parameter value for this put and post function here we can directly access that from this service property form data itself and also we have to change this if condition here this dot service dot form data dot PM ID let me save all of these modifications here let's try the update operation I will add few as tick marks here and I will change this expression here submit the form so here we have updated the corresponding record you can see the new sorry we have to we have not updated this double is here if you refresh this we can see the updates but we have to refresh this least after crud operations so we can call the refresh list function after any of these operations so you can call this this dot service dot refresh this function can be called here let's do that inside this update operation also and for this update operation I will use a different style for toaster notification so we can call this info function save back to the application let's update this this time I will remove these astrick marks here some it before so here we have updated the code at the same time now we have the final crap operation delete for that I will add one more TD cell inside this table so back to the list component HTML here so here we have the TD cell and inside this TD cell we will have a phone about some icon so here we have the ID tag and here we have the corresponding icon classes for then for - trash - alt in order to enlarge this icon from normal size we can add this class for - LG and we want to show this icon in red color so we can add this bootstrap + text danger save then back to the application so here we have the Delete icon let's add a click event for the icon click and I will call the function on delete into the function we just need to pass the p.m. ID now let's define this on delete function inside the typescript file here on the lead with a single parameter p.m. ID for delete operation we have to consume this Web API method here delete payment detail of the type HTTP delete in to that we have to pass the corresponding record ID inside the function first of all we will find the record using this find a sing function using the given ID if there is no such record it will retain the for not for not formed response if there is one it will remove the particular record from the list finally it will call this Save Changes function and it will return the corresponding record back now let's look how to consume this Web API method for that we just need to define one function inside this service class here we will replicate this function for that we can use the same shortcut hold ctrl and shift then downward arrow and I will name this function as delete payment detail for this function we have a single parameter ID and we have to consume this Web API method here corresponding URI will be like this API for slash payment detail forward slash then corresponding ID so it is similar to the put web method URI so instead of this we have to pass the function parameter ID we don't need this form data here let me remove that instead of this put function we need to call this delete function from this delete operation also we will return an absorber so back to the component edge script file here you can call that service function here this dot service dot delete payment detail in to that we have to pass the ID p.m. ID here we just need to subscribe to that return absorber inside that we will have an arrow function with response after that we have the error function if anything went wrong this error function will be called and we will console the error message console dot log inside that we can pass this error object if the operation is successful we have to refresh this list here so we can call the function refresh list this dot service dot refresh list function can be called after that we have to show a toaster notification so first of all we have to inject the toaster service like we have done inside this component here so I will add this private property let me copy this and paste in here now we have to add the corresponding import statement for that you can use the short got hold control then press spirit or dot symbol then select the appropriate import statement and we can do this this dot toaster dot warning function can be called as a first parameter we can pass the message deleted successfully as the second parameter we can pass the name of the application I will copy that from here now before this delete operation we have to confirm this operation from user side so we just need to add this if close here confirm inside this function we will have a question are you sure to delete this record we will do this operation only when you sir confirm the operation let me save all of these modifications then back to the application here now let's delete this first record click on this trash icon so here we have the confirmation are you sure to delete this record click on OK so here we have deleted corresponding record from our DB that you can check inside this management studio let me execute this select statement again so here we have deleted the corresponding forced record that's it guys we have implemented angular 7 cred operations in asp.net core Web API project you can download this project source code from the link given below in video description if you found this video helpful please thumbs up this video and for more hours of videos like this you can subscribe to this channel core defraction and you can support this channel through PayPal donation I have given the link in force command and video description please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 420,958

Rating: 4.8931656 out of 5

Keywords: Asp.Net Core Web API CRUD Operations, How to build Web API with Asp.Net Core, Asp.Net Core Web API CRUD using Angular 7, Angular 7 CRUD with Asp.Net Core 2.2, Asp.Net Core Web API CRUD with Entity Framework Core, .Net Core 2.2 EF Core CRUD using Code First, Asp.Net Core Web API tutorial with Angular and Sql Server, Angular 7 with .Net Core Web API, Enable CORS in Asp.Net Core Web App, Insert Updat and Delete in .Net Core Web API, CodAffection

Id: fom80TujpYQ

Length: 103min 56sec (6236 seconds)

Published: Mon Jan 14 2019