Full CRUD Operations | How To Consume WEB API in ASP.NET Core MVC | Consuming Web API

hi friends welcome back in previous session we have created one web API to perform the card operations this is the final output of that session in today's session we are going to consume this API inside our asp.net core MVC application so in this API we have not displayed the action methods we have displayed API slash controller name here we have to add the action name also so that easily we can identify the action method for that I am going to open the controller inside our API project go to the product controller here along with the controller name I am going to display the action also save it I'm running the application again now our API is showing action names also along with the controller name we will check it out here we have two records it's displayed now we are going to create a new project with the asp.net core MVC and we are going to consume this API inside that MVC application this is my solution I am going to right click on the solution I am going to create a new project here I'm going to use asp.net core web application with model view controller this is my project name I'm going to store in this location I'm going to use the latest.net framework I'm going to create a project now our project has been created here here I am going to create one view model inside these models folder right click on the models I'm going to create a product class here here I have created product P model class I'm going to copy the properties from our API these are all the properties we required if you want you can access this product class by referencing this project to the over MVC project here I am going to make a separate class as product view model I am going to use this properties here I am going to add display name here I am going to add here I will make it as product I'll add the space between product and name here we have to import the namespace this is component model now we have to create a controller to access the API right click on the controllers add the controller here I am going to create one empty controller I'll name it as product controller here we have to initialize our API URL for that I am going to add URI and I'll make it as Base address here we have to pause the our AP URL along with the port number this URI we can get it from our API project go to the properties expand the launch settings.json here we are going to use the https I'm going to copy this along with this we have to pass the port number which is SSL port number I am copying it here I'll pause it here then slash API this is the base URL of our API if your API is hosted in somewhere in the server then you have to pause that server API address here in our case we have not hosted this API we are going to run from our solution so that's that's why I'm passing as localhost and the SSL port number I am passing here to access this API first we have to fetch the data from our API here we need HTTP client I'll create a Constructor here I'll initialize the HTTP client here I am going to assign the Base address to our HTTP client here we are going to display the list of products this will be get method here I am going to Define list and also I will pass the product view model here product list here we will get the data as HTTP response it will come as message I'll make it as response here we have to pause the Base address and also we have to pass the controller name product is our controller and also we have to pause the action method this is our API controller we have to pause our controller name also action method so I am passing here already we defined the API so we now need to pause this API here I am going to pause Base address along with the controller and action method and pause here we have to check the response status if it is Success we will get the data in a string format we will get result here now we have to deserialize this string data to Json format here we have to add the required namespace that is newtonsoft.json I am going to install it now here I am deserializing this string data into list of product view model here I have to pass data here we will get it as result after deserializing these products we have to pause this product list to our view here I am going to create a view now right click on the index action method add View here I am going to click on razor view add here we will select the template as list here we are going to receive list of products and here we have to pause our model class name here I am selecting product view model and click on ADD here we are using this cap folding to generate our view we are not going to design manually so this Entity framework will generate view for us index view is generated now now we have to test this whether data is binding or not for that we have to run both the applications API and our MVC application for that right click on the solution properties to access the API we need to run the API also here instead of single startup project we have to set as multiple starter projects here select our MVC application also we need to start the application it is already started apply the changes click on OK save it suppose your API is hosted in the server then you no need to do the settings if it is running from local machine then you have to do this I'll keep debug Point here inside our API controller also from the MVC controller now now we will run the application in debug mode here now two applications are running this is our API and this is our asp.net core MVC application here we are going to access the products list here I am going to call product controller from my MVC application so whenever you are consuming any API that AP should always in the running mode then only you can consume the APO I am going to access the product controller so it's coming into my MVC application index page from here I am passing my Base address to access the product slash get method now it is hitting into AP and it is coming to product controller and here we are getting product list from the API product counties so two records available so it's coming into the else block it is returning here we are going to check the response status it is true here data is coming in Json format here we are deserializing into product V model now we will get as list we will go to The View here we are get two records from the products table now we are going to display inside our view so it is displaying both the records which is available inside the database we will go to the database and we will see how many products available inside the DB this is my SQL Server this is the database which I am using for this AP I'll execute this select query so we have two records which is displayed inside the MVC application here there is a hyperlink whenever user clicks on this hyperlink that form should come for the data entry and whenever user submits it should go to the API and it should insert inside the database this is the functionality which we are going to implement in today's session go to the MVC application open the controller this is the controller which we used to consume the API here I am going to create one more method HTTP get and here I will make it as create this method I am going to use it for product creation view purpose right click on this action method click on ADD View here I'm going to select the razor View here I will select the template as create I am going to select model class here that is product view model click on ADD here also we are going to use this scaffolding mechanism to generate the views view generated to create a product and here I am going to create another action method to post the data to the API for that I will make it as HTTP post and I am going to create another action method this is also create here we will get the data in the product view model I'll make it as model here I am going to serialize the data into Json format here we will receive the data as model here we are going to serialize into Json format I am going to use the Json convert here serialize object here I have to pause model here I have to pause the string content to pause data and I have to define the encoding type here and here I have to pause application slash Json we are sending the data in the form of Json here we have to add the required namespace that is system.txt here I am going to get the response from the API here we are going to post the data here again we have to pass Base address as well we have to pass the controller name and action method name we have to check the action method name here open the web API go to the controller so this is the action name we used for post the data we have to pause same thing here so along with this we have to pause the content if status code is Success then we are going to return this to index View I'll use the redirect to action here I'm going to pause index also here we have to check is there any error here for that I am going to use the try catch if there is any unhandled exceptions are there we can handle easily here I am going to display this here we have to make it as result we will get it as result so that we can avoid this error also once this data is successfully inserted we have to display the message to user for that I will use stem data I'll make it key value as success message and I'll add it as product created this is the message which I am going to display after the product creation also if there is any error I am going to display that in error message here I will display the exception message these success and error message we are going to display globally for that I am going to use the shared layout.cs HTML and before entering the body I am going to display this message so I used in my previous examples and we explained already how to use this I am going to copy this content and I am going to reuse there I'll paste it here we have used the same key value as error message and success message here error and success run the application now both our API and MVC applications are running here I am going to access product controller so our product controller is loading and this is the index page I am going to click on create new and we are able to see our form to create the product here we no need of ID so I am going to remove this ID here I'll go to the create view because ID is identity field we now need to insert any values this primary key so this will be incremented automatically and also I want to add top margin here margin top to and run the application once again I am going to access product controller again click on create new so now ID has been removed here I am going to add one product here add price and quantity click on create so product is created and it is added to our list of products here also we can Implement to close this alert automatically that also we can Implement in previous sessions already we implemented that go to the WW root here I have created one custom Js to close the alert automatically after 5 Seconds this is the simple JavaScript function which we are going to implement it here I'll go to the root folder JS here I'm going to create one custom Javascript file and create a new item here say Javascript file I'll make it as custom here I'm going to paste this I'll copy it again I'm pasting here so this is we are setting timeout for all the alerts like 5 Seconds Whenever there is a alert is showing after five seconds automatically it will be closed if user wants to close before this 5 Seconds user can close with close button so now this custom.js we have to add inside our layout.cshtml then only it will be implemented globally I'll drag and drop here so this script is added to our layout.cs HTML run the application I am creating new product here create it so our bootstrap already showing here it should close automatically after five seconds it is working fine like this we can use the bootstrap alert also inside asp.net core MVC application whenever user clicks on this edit hyperlink it will display the edit form and user can update the data this is our table which we are using to perform the crowd operations and I am going to open the consume web API which we used for previous sessions I am going to open controller this is the product controller which we consumed our web API this is the API URL and here we are passing the Base address along with the controller name and action name for update the data here I am going to create one action method this will be get method here based on product ID we have to load the data for that I am going to pause input parameter as ID here I am declaring product view model so we have to pass the ID to fetch the product details here I have to pass HTTP client and it will be get a sink here we have to pause the Base address here we have to pause the action name also we'll see the action name inside our web API controller this is our product controller so this is the action method name I'll copy this and here I'm going to pause it along with this we have to assign the ID here we will get the response from the API here we have to check success status code if it is if it is true here we are going to deserialize the Json data I will get the data as response Dot content here I will assign the deserialized data for that I am going to use Json convert here I am going to deserialize our Json format data to product view model here we have to pass data to deserialize so once it is status code is Success we have to assign this product V model to our view here I am going to create a view for edit the data right click on the action method add View if you are not aware of how to consume vbp inside MVC application please watch my previous videos we have explained the process in previous sessions so I am going to share the video links in the description here I am going to select razor view to create edit form add here I am selecting template edit here we have to select model class what is product view model click on ADD so here we are using this scaffolding for view creation we are not going to design manually so that we can save time so view has been created here instead of this product view model I want to display this title here I'll make it as edit product now we are able to read the data based on the product ID and we are going to display inside this edit view form so now once it is updated we have to post the data to EAP again for the updation for that I am going to create one more action method here which is going to be HTTP post here we will receive the data in product view model now here this model we have to serialize into Json format for the updation here we have to pass the model for serialization here we are receiving data in product V model this data we are serializing into Json format here we have to pass the data along with the encoding type it is going to be UTF eight and here we have to pass the type of data here it is going to be Json here we will get the response from jpa here it is going to be put so in our case we are updating the data here we have to pass Base address to the HTTP client and then here we have to pass the controller name and also we have to pass the action name so we will check the action name inside the API for the update so it is going to be put so along with this we have to pass the content also here we will get the result here we have to check what type of response we are getting here if each status code is true then I am going to redirect to action method it is going to redirect to index view or here one more thing we have to do we have to keep this block inside try catch block so that if there is any unhandled exception we can handle easily snip it surround width also here we have to display the error message in previous sessions already we have discussed how to pass the error message in temp data so same thing we are going to use it in this update form also here we have to Define exception I'm going to pause exception message here here I have to pause the key name for error message we are going to handle globally inside our shared folder same thing I am going to use it here also so this is the this is the error message I'm copying this key value and I'm going to paste it here suppose if it is updated successfully then again I am going to display the success message here and here I will pause message as success message that also we can take it from here so this is a message which we are going to display to the user to this content also we have to keep inside try catch so I'll copy this one I'll paste it here now we have completed both get and post method for update the data I am going to index and whenever user clicks on this hyperlink edit so we have to pause the primary key value here we are not going to use details here we are going to perform only Cloud operations here I am going to pass ID that is product ID we are going to pause it this one I can make it as ID here for delete also I'll use the same thing so anyway we are going to implement delete functionality also that's it we'll run the application now both our API and MBC applications are loaded I am going to call product controller here here we are going to update one product I'll click on edit so we are going to update the product which is having ideas 1006 edit so here only ID is loading we are not able to get the data like product name price and quantity and I will check the API once by pausing this so this is the action method try it out I'll execute this here data is loading perfectly some way something is missed yes we missed something here we'll check the get functionality this is the Base address Base address is API okay APA slash product slash get okay it should be slash ID okay okay it should be slash ID that is what uh we are not getting the data I'll make it as slash now I think we will get the data perfectly I'll run the application I'll call the product controller I'm going to edit now yes now the data is loading perfectly and I am going to make it as instead of TV I'll make it as something and the price I'm changing 55 000 and I will make it as 80. I'll save the data product details updated this is the data we entered so we have updated the data check the DB whether this data is updated inside our products table so this is our product table earlier we had TV and forty two thousand eighties quantity I'll execute this select query so it is updated in the DB also your user clicks on this delete button we have to show the confirmation message once user is confirmed we have to delete that record so this is our MVC application I am going to control us this is product controller which we are using for consuming the API and Performing crowd operations in MBC application here I am going to create one new action method for deletion this is going to be get method here also we are going to read the data based on the product ID I am passing input parameter as ID here I am going to get the data from API here we have to pass Base address along with the controller name and action method here I am pausing product is my controller name and my action method name is get and here I have to pause the product ID to get the data here I'll get the result from the API if response dot e status code is true then I am going to return the data I'll get the data as Json format here I have to deserialize the Json data into our product V model here we have to pause the product view model to deserialize and along with this we have to pass the Json data so finally we are going to written this data to view I'll keep this inside try cash block here if there is any error we are going to display the messaging this error map also we need post action method for a deletion whenever user confirms the deletion then we have to post the data to API and it will be deleted for that I am going to create one more action method here this is going to be post here I'm going to make it as delete confirmed here we are going to pass the ID as input parameter along with this we have to pause the action and we are going to use it action name for post and get as delete so I am passing the action name along with this post action method here I am going to delete the data I'm going to call delete a sync and here I will pause the Base address along with this I am going to pass product controller as well as delete action method we have to pause I will check that action name go to the API this is my API controller and this is the action method for deletion I'll use this and here we have to pause the product ID also here we will get the result from the API you have to check response Dot this is going to be response message here we will get the E status code if it is true I am going to redirect to index View this block also I will keep it inside try catch if there is any exception I am going to catch it and I will display in the bootstrap alert suppose if it is status code is true then I am going to display the success message like here we showed in the update action method if it is successfully deleted I am going to display the product details deleted so we have completed both get and post action methods and we assign the EAP Base address along with the controller name and action method I'll run the application now now our AP and MVC application both are running if you are not aware how to consume the web API we have explained in previous sessions please I am going to call product controller here so I'm going to click on delete here I am getting error delete was not found okay we have not created any view for deletion so we have created action methods like get and post we have not created The View that is the error we are getting here we'll go to the delete right click on the delete action method which is get add view click on ADD I am going to select the template as delete here I'll select the model class product view model click on ADD it will generate the view for us so view has been generated I'll run the application I'll access the product controller click on delete here user has to confirm the deletion I am clicking on delete so it's not deleting we will check the API whether we have provided the proper URI or not so this is APA slash product slash delete whereas inside our product controller we will check how we are posting the data here we are passing as delete this is not required I'll run the application I'll click on delete so data also not loading here so delete somewhere we are doing mistake here okay here we have to add the slash here there is a typo error in product controller I am correcting that and I will check it here here it's correct I'll run the application I'll try to delete this record click on delete so product details are displaying here and it's expecting the user confirmation I will confirm here by clicking on delete button so it's not deleting we will see what is happening here delete here this is the API URL the little sync product slash delete and here we are posting the ID so inside our delete action method in our API controller we will add the ID parameter also I will copy this and this is our delete action method I am going to pause ID also now this same parameter we are going to pause here I corrected in API here I'll pause delete slash that ID on the application I am confirming the deletion here the product details deleted so this product has been removed from the list and we can check in the database also earlier we had two products now I am going to execute this select query execute that second record has been deleted we will try to delete this record also I'll delete this one also click on delete product details deleted we don't have any products here I'll check in the database so that product is deleted here so like this we can consume the API in asp.net core MVC application and we can implement the crowd operations so that's it for today if you like this video please like And subscribe to my channel thanks for watching

Channel: CodeWithGopi

Views: 15,279

Keywords: .net 5 web api, .net 5 web api crud, .net core, asp.net core mvc, asp.net core mvc crud, asp.net core web api, asp.net core web api tutorial, codewithgopi, consume web api in asp.net core, consuming web api in mvc, crud operations usin web api and asp.net mvc, entity framework, entity framework core, how to consume web api, how to consume web api in c#, how to consume web api in mvc, mvc, mvc tutorial, sql, web api asp.net core, web api crud, web api tutorial .net core, webapi

Id: 68IyfnjtduE

Length: 48min 44sec (2924 seconds)

Published: Wed Mar 29 2023