.NET Core MVC CRUD using .NET Core Web API and ajax call | Consume secured .NET Core API in MVC

Hello friends welcome to my channel Hira techies in this video I am going to explain how to consume dotnet core baby APN MBC applications so basically we can do two ways One is client-side using jQuery and die Jack skull and the second one is server side so we can directly call our API from the c-sharp code itself okay so in this video I am going to take this client-side approach so using this client-side approach we can do the complete predictions additionally I will cover this JWT token handling so let's start the implementation first I am going to create one brand new application so the template is cmbc so let me provide the name is MVC credit okay and the framework we can use the dotnet 7 so the project is created with the default template so let me So currently we have one controller that is home controller so next I am going to create a new controller we can use the AMT controller that is fine I am going to provide the name as customer so similarly I am going to create one more controller so the name is login next we can create the respective views just right click and add View so let me choose this razor View no need to take any template so let me click this ad okay okay the view is created so similarly we can create the view for this customer so here I'm going to include two more action result so the default one we can consider for loading the list of customer information after that we can create One Max and result for create and the next one is edit so the next thing is we have to create all the views so the same way just right click and add View go to the last one is edit okay all the views are created we can see in this customer said yeah there are three views are there okay so next in the designing perspective we are going to use the board shaft and the functionality point of view as I mentioned I'm going to use the client State Technology so the jquid is needed so since we are using this dotnet core MBC templates this jQuery and bootstrap are defaultly included from the template itself okay so next we have to start the implementation before that let me show our APA so the AP application also in the running mode see this is my Swagger so we are going to use this customer section okay so it's having around the sixth method we are going to use the first five methods okay so the first service is for returning all the customer information and the second one is for returning the individual customer information based on the code and the third one is for the create for Tunis update and the 15 is removed okay and this is the security APA so let me try to access this one see it is returning the 4920 error so we need to pass the authorization token also so let me take this URL so in this Postman I'm just added anyway this one also get method and here you can see this authorization enabled and here we need to put our token and we can generate from our API itself using this generate token see now we have the token here I'm just replacing providing our actual token newly generated one okay so if I clicked okay it is returning the list of customer information so the same way we can access all the methods by using this access token okay and if you want no more details about this dotnet core with BPA just to follow my.net core ppapa tutorial so I will add lingers in the description and this application also created from the same media itself okay so next we can focus on the implementation so let me take this index we can use some bootstrap classes so in this card party I am going to include the table we can initiate the header so the fields are code name email and the phone number and status and the final one is action so let me run the application so we can provide the URL like this so the static design was there the next thing is the table body we have to load dynamically the data available from our APA and also let me include the add button for creating new customer and our icing is create also let me include some class okay so let me save this one and we can see the response okay the changes are not reflected we have to enable the runtime completion from the application then only the changes will be reflected automatically so let me install one package I'm adding this package the package name is microsoft.asp.net core mvc.racer runtime combination we are installing the latest version okay so I will add this comment also in the description okay once it is installed go to the program.cs file add like address or runtime compilation okay so that is fine so the next thing is uh we have to fetch the data from our APA so I'm going to include the script section here and we can include this jQuery reference also basically it is not needed but sometime we will get some error so better we can include it next in this and load I'm just calling load customer okay also we need to Define this function so we can use the edge X so the first one is type so this is the get method okay and the next one is URL URL is the same mode our AP URL there is no data need to pass next we can include the content type application bar Json and the character set UT of eight so similarly data type the data rep is Json and here we will get the success and the failure we can input the debugger here okay and the next thing is we need to pass the authorization token so initially what I'm going to do let me make the services the open service there is no need Securities required so let me comment this authorize once our normal credaction is completed we can work for the authentication token okay okay the AP is running the same time let me run our MSC application also okay application is running we can use our customer URL see it is returning the list of customer informations so that means we are able to consume the data from our APA and the next thing is we have to bind this data in our table okay so for that we can use the data table UI jQuery data table CDM see the latest version is 13.6 okay so we have to include this CS file and also the JS file so let me include both in our application okay next I am declaring one array here next we can generate the for Loop for this data now we can push the values into our array okay so the if you want to check the values okay code name email phone and we are going to use the status name also all are a small letters only and we have the final one is action so here we have to include the buttons so initially I'm just providing empty okay so once we have the data using the data table concept we can bind into our table okay so let me provide the ID table customer data table here the data is server array so let me save this one okay it is showing in one error so this is actually the conflict from our jQuery for resolving this one let me declare like this here also the conflict is kepts okay so let me refresh this one okay from the load itself we are getting the error see now the datas are binded and defaultly this pagination and the search functional disk and it is sorting also included you know for this action let me include the buttons so we can generate that also in the dynamic manner so let me include it here you know the edit button is coming this okay see now the remove button also coming right so next we can focus on the create new record So currently we don't have any design and this is the HTML page we can copy this content so the title is create customer and this button is not needed even this table also so here we can have the farm group so the first step will Discord and the ID is text code let me see now okay so it is taking the full page if needed we can reduce that and also this menu and this portal also not needed so let me remove everything from our layout page itself okay and let me reduce the size by adding some custom CSS China okay now it is somewhat fine okay so the same way I'm going to include the other controls so the second field is name next to email then phone number and then credit limit and the final one is exactly checkbox and the class also we can provide form check for the checkbox we can provide default it is set now see the response okay and let me include one button after this card party we can include the card food term okay so this is more than fine and here I'm going to include this click event and we need to Define this function I'm just copying this jQuery file added it here so similarly this script area okay we can replace based on our requirement I just removed so instead of the load customer we can use this save customer so initially I just commanded this area so next from this function I am trying to get the values from these controls first accessing all the elements one by one and changing the respect to your IDs next I'm getting the values under the finally check box so we need to check whether it is sector or not okay and the next thing is we can include the validation for this code and the name so let me make this all the mandatory field so the same way I'm going to apply for the name if it is fine we are going to make our Ajax call we can try now see I have not entered any value so it is in the red color okay so the validation is fine so before calling our APA we have to prepare one object so next one is credit limit so anyway let me check it here it should be credit limit and this credit limit field is the integer one so we can check if there is no data so now we have the object next we can work for the Ajax area so the method type is post next we need our URL customer slash create okay so these areas are fine here I am going to include this debugger but the very important thing is we need to pass the data so already we have this object json.stringify so we done our changes let me verify okay once our create is completed we can easily complete the next two functionalities because most of the codes we can reuse okay so let me provide zero and zero sum phone number okay once I'm saved I got the positive response only there is no error message so then this is the success scenario only okay so let me just continue so if I'm going to the listing also see it's the newly created record was there so actually once my save from Shield is completed I if response code is to not one we can redirect to end over listing page PLS we can just to provide a alert failed to save and here also we can provide one JavaScript alert customer so let me try one second saved successfully and also it is redirected to our listing page okay we not provided the mobile number so it's not coming so next we can focus on the edit So currently I'm not defended the function so in our index screen itself be generated as in the dynamic manner right okay we are passing just this uh so that means whatever control we are clicking we are able to access the control and our thing is we need to fetch the this unique value code so what I'm going to do let me include one hidden field it's here so let me generate that also dynamically it's damn okay I'm just added here I have to move these all the codes inside the loop okay now this is fine when showing see we have one hidden field after that our edit button and then remove button so it is generated in the dynamic manner so now I am trying to access this hidden field obviously I can get the value let me include one ID also look but it's much better foreign I am able to get the ID right so I'm going to redirect this into over edit base customer slash edit and we can pass this code okay next to from the controller I am going to include this one so what our data is coming I am just including in the view data okay next in our edit CS HTML whatever code available in the create side we can just copy everything and put in the edit side so this is the edit screen I mean the edit customer and here the code is disabled on and we can bind the value because the value is available in the view data okay so we can run and verify so if I'm clicking this edit button it is redirected in this code it's binded right so what we can do in this initial page load itself we can get the same value then we have to pass this code into get by code API method once we got the individual customer information we can bind in the controls okay so here we can include this this conflict also not needed if it is not equal to empty not equal to 12. we can call our APA so that I'll say I get method so let me copy this sample code so get method we need to change the url okay so this is the URL but this code we have to provide in the dynamic way so it will return the object so once we have the data we can bind in our controls okay so let me take all the controls here so here the code is not needed name for the same way we can include the email and then this phone then this credit limit under the final run is checkbox so in this credit limit we have to provide this exact value otherwise we will get the error similarly in this checkbox we can set the property select as okay so let me refresh the screen see it is binded all the data okay so here we can include on back button also so in case if you want redirect to the listing writing syntax issue it looks like we need to mention the action also so now we are in the listing page so once I clicked it is in the edit page if I'm clicking again it is back to our customer listening okay now we loaded the existing data next we can work for the update function okay so that actually we can finish very quickly because already we have this save customer function we are assigning all the datas there is one small sense we need to change this URL so if you are going to the APA this should be update okay also we need to pass the code so code we can get it from here and other objects are fine this is the put method look saved successfully and other things are same so let me refresh it I'm changing this credit limit into 10. okay I'm getting some error okay so the URL is the problem I'm just refreshing one second changing this into 10 once I click to save or failed it to save so the status code I am received as the uh 200 but actually it's sectors two not one maybe that is the reason let me put the debugger here just to refresh C the record is already updated so we can provide a tool okay the Response Code I'm getting the 200 so that's what it is returning as the field to save so that's okay so now just changing this email once I'm shared saved it successfully and it is redirect to our listing see this is updated so similarly this string string see so the values are updated fine so now we have completed this uh create and also update loading the listing so the final one is remove okay so let me focus on that first time creating one function similar to this function edit because this function removed and here I will get the code also and then I'm just checking do you want to remove if it is confirmed we can call one more function so here we can pass this code okay so also defining this function here so here I'm getting this code I can copy this size X color section I just added it here so the first one is type delete and then this URL it is removed so this data is not needed I am expecting 200 as the response anyway let's see once I'm clicked I am getting this confirmation so removed successfully and also it is simply refreshed our page okay so now we successfully completed our credactions by using the dotnet core maybe APA okay so next what I'm going to do so let me make this APS the security so Hereafter we have to pass the secured JWT token otherwise we are unable to access the APA functions okay so let me show you okay our AP is ready if I'm refreshing the screen nothing is loaded if you are checking in this network you will get this get all method it is returning another rest error okay so in this AP point of view behold function for generating the token so basically it is expecting username and password so it's our credential only So based on that it will validate and generate the token so let me implement the login page so this one also I'm not going to take much time we can reuse some of the codes so whatever code available in this create page I'm just copying and including in our login okay we can say this is the user login for the first one is username and the second one is password we can give this is there type also password and other fields are not needed text username and this password again here also other things are not needed and we can reuse the same validation also foreign username password and the request type is post only okay this is server you are so here I am going to include the debugger so expected thing is we will get the token so I can set like give data not equal to null so whatever token we are receiving I am going to include in the local storage itself so basically we can store in the session uh since we are doing everything from the client side I am going to use the local storage okay once it is assigned we can redirect into our customer page see now so let me provide my valid credential so it is redirected into our customer and in this local storage yeah the token is included maybe if I'm removing everything let me go to the login page one second okay it is included token so next we can access the same token from our customer page first in this initial load function once we have this token after this you can say headers and this is the authorization header and our token is barrier I mean the type is period type then we have to pass this docker so now let me refresh it so let me try to log in once again okay these are authorization spelling mistake okay so let me log in once again let's see the initial data is loaded fine but the same time if you are trying to remove it won't work so the reason is we just passed this authorization getter for this load function only so make sure we have to include all the areas okay so meanwhile we can include further create and edit area also so in this create we have to use in this save function in this edit we have to use in the save also this guitar function you can copy this header also first in this create included so next in this edit so let me try to log in one second okay so the listing is loaded I'm going to create one new record saved successfully and we can see the new record added it here I am trying to edit this one since this edit page the record is loaded I am going to provide Ravi Kumar email so again I'm trying to say it is updated successfully we can see the records is here so finally I am going to remove the record so remove the successfully and also it's refreshed so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel so the same activity we can do from the server set also for handling all the events we can use the racer controls in order to be connect you the same way for the AP carrying also we can do this is upside maybe I will cover in the separate video if it is needed please let me know in the comment okay thank you thanks for watching

Channel: Nihira Techiees

Views: 1,789

Keywords: dot net core mvc crud actions, .NET 7 MVC crud actions, consume .net core api in mvc applications, .NET Core MVC crud actions using dot net core web api, dot net core mvc crud actions using ajax call, consume secured api in mvc application, how to pass authorization header in mvc application, jwt token handling in MVC application, dot net core mvc tutorial, .NET 7 MVC examples with crud actions, MVC crud using client side

Id: zj6Bm7PbVEs

Length: 50min 42sec (3042 seconds)

Published: Tue Oct 03 2023