Integrating WEB API In .NET MAUI Blazor App (CRUD Operation)

[Music] [Music] [Music] hello guys welcome to my channel in this video i'm just going to show you demo about integrating web api in dot net mavi blazer app so here let me create a new blazer app and [Applause] so here i'm just going to create project like a web api integration in blazer app okay so this is the like a default structure of a dot net mavi blazer and i'm just going to use web api that i already created so for uh this web api demo i already uploaded one video so just click on above suggestion link to see that so in that video i show you like how you can create web apis like adding student updating student then deleting student also like creating a user then assigning some role to particular user so that kind of stuff i just saw that in a one video so just click on that suggestion link to see that so in this video i'm just going to integrate this get all student api to display student list and after that i will perform like a card operation like adding updating and deleting student so that thing i'm just going to show you in this video okay so like when i run the this uh dotnet mavi default blazer app so it's just displaying first this index dot raiser component and in that it's just showing this hello world welcome to new app and it has like uh this uh three navigation options like navigation menus home counter and patch data so here on index dot raiser component i'm just going to display student list and after that here i will add like add update student one menu option and in that i will just integrate api related to adding and updating student list so before that let me now create a services so here in this project i'm just going to add new folder called services and in that i'm just going to add interface and class so i student service interface here i just created and this api like if you see this get all student list api returning data like student id first name last name email gender and address so let me create a model for it so here i'm just going to add another folder called models and in that i will add one class [Applause] student response model [Applause] so let me add this property here like first name [Applause] okay so this much property is returning from the web api so that i added here now the i'm just going to add one method here in interface so that matter declaration here so that api going to written data in this student response model format so this is the api response format [Applause] now i'm just going to create another class in this student service uh service folder so let me just add student service class here and this class going to implement i student service interface [Applause] now let me add here base url so base url will be this vbpi project this url i'm just going to set as a base url and here i'm just going to write code related to api so getting data from api [Applause] so here i'm just going to set like a page url plus this one slash api students get all students so let me add that api endpoint here [Applause] so [Applause] so here i'm just going to check [Applause] if the response status code is ok then i am just going to read that api content so here in web api so it's returning data in this format like first name last name email and general and this data is wrapped inside content property so i need to create another model that has these three property like is success error message and content because like in web api project so all the method returning data in this format like a main response format and that main response contained like this three property is success error message and the content so let me create a model like a main response model so here in models folder i am just going to add main response model and that model going to has this property is success error message and content [Applause] okay now i'm just going to use this main response model in this student service api response so this api response will be in the main response format so let me add another plugin to use json convert so i am just going to install this newton shop.json package so i'm just going to use this this serialize and so this api responds i'm just going to pass it here now here i will check like this dc realize response if success property is true then i'm just going to return this student list so let me just create another object written response [Applause] okay so here written response equal to json convert deserialize object in the form of student response model and this written response i'm just going to return from this api okay now let's integrate this get all student list my third response in index.razer component so before that uh let me register this student service in my program.cs so here like i'm just going to register this i student service interface and student service implementation so i can use this student service interface in laser component so here in razer component i'm just going to inject i student service so i'm just going to remove now this survey chrome component we don't need this so i'm just going to overwrite this on initializer sync and in that i'm just going to call this student service dot get all student and that response will be in in the form of student response model okay and here i'm just going to check like if student list is null that means like it's a record is loading otherwise in this div tag i'm just going to display this get all student response here so let me just create table [Applause] so from the student list i'm just going to catch each student and i will display that in td tag so that will be [Applause] student dot first name then last name gender and email so i'm just using some bootstrap property to make ui responsive okay now let me run the app and let's see like it's displaying students in index page or not okay so it's throwing some error like an unhandled error has occurred so let me see here in web apis so i'm just going to add try cash block to identify our style like is that any error in api response okay so it's throwing error like clear http traffic to this ip address is not permitted so for that here in android dot manifest so you need to set property like android clear text traffic to true so after that it's going to work so now let me re-run the app and let's see now it's loading records or not okay so now it's displaying student information from the apis now let me create another page to add this student list information okay so here in pages i'm just going to add another razor component called add update student okay and here i'm just going to add some design so that i already copied from bootstrap so you can just learn about this ui from the bush trap okay now here in navigation option so let me add another menu for like adding updating students so here inside component now navigation menu component is available so here i'm just going to add another link called add student and here that link hrdf link will be so whatever the here page name i specify here so let me just declare so add student this link i'm just going to set here now let me run the app and let's see it's displaying this student form like at student form or not okay so here one navigation link is available call at student and on the click of add students now it's displaying add update student page so here like this first name last name email and gender selection is available okay so now let me add another api for adding student so here in i student service i'm just going to add another api call add student and this api will written data in like a boolean like either a student is added or not so here in api for add student so i need to pass first name last name email gender and address property so i'm not using this address property so we need to pass firstness first name last name email and gender so here in model i'm just going to add another class for add update student request so in this class add update student request class i am just going to use this much property student id first name last name email and gender okay now let me implement this add student in student service so here i'm just going to copy this code so here now instead of getting i need to use processing for writing student because this api method is post so for that i am just using post and here url will be this one add student so i am just going to convert this student request in serialize content so here in post method i can pass string content so here i am just going to check like if the response this main response status is succeed is success then i'm just going to return true otherwise it it will return false like something wrong in this api like that okay so now let's implement this add student method in add update student component so first here i am just going to inject student service [Applause] so i can access all the method available in this student service interface now let me create another method here [Applause] add update student details in that i'm just going to call this ad student api so it's accepting argument type of this ad update student request so let me create one object [Applause] here and this add update student object i'm just going to pass it here now i'm just going to create properties like [Applause] first name [Applause] okay so last name gender and email so this all property i'm just going to bind here [Applause] [Applause] [Applause] okay now let me bind this like right now this first name last name and gender is not binded with this all input control so let me bind all property one by one so here you can use this add red bind property to bind whatever the property you want so here at the red bind then i'm just going to bind here first name then same way here last name and then email and for here radio button so i need to use add rate on change event so here i'm just going to create one method call [Applause] set gender and in that i will pass gender that i am just going to set to this variable so here in one change i will just create expression like this and here i will call said gender and in that i will pass nail like if i selected this mail radio button then it's going to set this gender as a mail same way here if i select another radio button then it's going to cite as a female now like once like if the response is true then i'm just going to set this all property like first name last name gender and email to empty and i will just call this state has changed to update this all the form ui so for that i just calling this one and after that i will just display [Applause] display alert [Applause] okay now let me run the app and let's see okay okay so sorry i forgot here i need to call this add update student detail also so here on click event so i'm just going to call at student detail method so for that let me just add it here so on the click of this button now it's going to call add student detail and this going to call this api add student and it's going to add recording database now let me run the app okay so right now here tree records are available now let me add another record okay so it's not adding let me see here in response okay so here it's showing error message like student is already exist with this email so because of that it's not adding the code so now let me convert this add student api to main response and i am just going to return now this serialized response and in student service also i'm just going to set this response as a main response so here in add student component i can check like if response dot each succeed is success then i'm just going to display this message otherwise i will display like whatever the error message coming from api so that error message i will display here now let me run the app and let's see okay so here also i need to [Applause] set written response as a new main response model and instead of here returning i will set written response is equal to this one okay now let me add record so right now i'm just going to add email that is already exist so on the submit so it's uh showing a message like student is already exist with this email now let me change to abcdeatdegmail.com so now it's showing me that i could edit successfully and let's see here in uh home so it's now displaying here snail mystery like first name last name then gender and that email address okay now i'm just going to add here like on the click of this record i will display one alert to select either update record or delete record so let's do that okay so here in index.razer component i'm just going to add on click event so on the click of this record i'm just going to display accent sheet so let me just create here one method [Applause] and here i will pass student object on the click of a particular record so that responds that object will be the type of student response model so [Applause] okay so on the click of this button i'm just going to call this display option method so for that okay so here i just added expression like on the click of this record it's going to so this x and c and on the click of update student i'm just going to navigate to add update student component and on the click of delete student i'm just going to delete record from the database so now let me add here another method called for update student and another one for delete student okay so for updating student i'm just going to copy this code and i will add it here and the api will be this one updates to the name that i'm just passing first name last name and address so i'm just going to use update student and method is uh put method so for that i'm just going to now instead of post testing i will use put a sink method and let me also modify web api so here in student con controller update student i am just going to now provide option of updating email also [Applause] [Applause] okay so i'm just going to rerun this web api okay now same code i'm just going to copy here for delete student and for delete student i need to pass student id so here i will use delete async and the same object and update student request because this request has a student id so i'm just going to use a same object add or update student request or you can also create one class that has only student id okay so here in direct async i cannot pass a string content request like i did for put a sync and poster sync so here i need to create now a request that it will be the type of http message request so that will be the http request message here now i will just set request dot method will be http method dot delete and that request uri will be this one this url and here insider instead of update student i will call delete student and request dot content will be this one so here now instead of delay testing i will call send async method and in that i will pass this request so let me see here in web api delete student method so i'm just returning response in main response format so here i will check let me return data in this format only main response model okay so now here in index component i will call student service dot delete student and in that i will pass student detail dot let me pass this student detail entire stream in detail okay so here in student delete student i am using add update student request so that i am just going to set it and here student id will be the student detail dot student id [Applause] [Applause] so once the like api response came and that will be like if success is equal to true then i'm just going to call this on initializer sync method [Applause] okay now let me run the app and let's see that delete student method is working or not okay so here on the click of options like any students it's showing me update student and delete student now on the click of delete students okay so let me again check from home so yeah that record are deleting but it's not updating in ui because i didn't call here this dot state has changed now let me rerun and let's see okay so now on the click of delete students it's deleting record from the database now here on the click of update student i'm just going to navigate to this page add add student add update student component and here i will bind existing value like first name last name email and the gender and on the click of submit i will update the record okay so for navigating let me add here navigation service so navigation manager i'm just going to add here and here i will use like navigate to and here i need to pass page name so let me add here at update student component so i'm just going to now add another page directive of like update student and in that i will pass student id and that will be the type of integer so here i'm just going to call this update student and i will pass student id in this add update student component so here i need to access this student id to get existing student details so for that i am just going to create one property student id that will be the parameter property so i'm just accessing this value from this like navigation where like a navigation request you uri from that i'm just accessing student id so because of that here i'm just setting student id here like this [Applause] okay now let me also add here another method on initializer sync and here i will call one api to get existing student details so for that now let me create another method [Applause] like get student detail by student id so that api method name will be this one get student by student id and here i will just pass student id and this api response will be single student response model so i'm just going to remove this list top and i will pass only student response model here and let me add this method also in here student service interface okay so here in add update student component like on initializer sync i will check like if student id greater than 0 then i am just going to catch existing student details and if the response detail dot student id greater than zero that means like a student detail is available then i'm just going to set this existing property like first name last name gender and email so for that let me set like first name equal to existing student detail dot first name [Applause] okay now for a gen like selecting gender like if it is male then select this mail radio button so for that i'm just going to check i'm just going to use check event so like if gender equal to equal to male then it's going to select this check box otherwise like if it is female then it's going to check this check box okay now here now i will check like this if student id greater than 0 [Applause] then i will just call update student [Applause] and i will display like success message if the record is updated okay also here in app add update student request so i need to pass student id so let me add like if the student id is available then it's going to cite here otherwise this student id will be the zero now let me run the app okay so it's a throwing error like an unhandled error has occurred so let me see navigation here okay so here in update student i need to pass like i need to access query parameter like this and also the student id will be the integer so i need to set like this format now let me run the app and let's see okay so now it's displaying records now on the click of update students so it's a patching detail from api and displaying here and now let me again go back to home and select another option like a another record an update student so it's displaying that record now let me just update to like that last name and that gender i'm just going to update and on the click of submit it's displaying record updated successfully now let me see on the home screen so that surname is updated now let me add another record [Applause] okay so it's showing record added successfully and on the home screen so it displaying this test detail and on the click of delete so it's deleting record okay so here this surname is not updating so let me see here in index.razer component okay so okay so see this record passing value correct so i think that was the issue of api so let me see here in update student okay so here i didn't set gender and also i'm not passing gender from update student dto so due to that this not updating now let me again try to update it and now here on home screen so it's record is updated okay so that's all for today i hope you like this video and please subscribe my channel

Channel: Programming With Pragnesh

Views: 12,581

Keywords: .NET MAUI, .NET MAUI C#, MAUI, .NET MAUI Blazor App, Blazor App, Integrating API In .NET MAUI Blazor App, Integrating API In .NET MAUI, CRUD Operation In .NET MAUI Blazor App, CRUD Operation in .NET MAUI.

Id: mNM5Z_pHGqM

Length: 59min 56sec (3596 seconds)

Published: Sun Jul 24 2022