Implement Web API in ASP.Net Core Razor Pages

hello friends welcome to my youtube channel today i'll teach you how to use web api in hp.net core razer pages [Music] so let's start first i'll open the startup.cs class so here i am adding a namespace newtonsoft.json.serialization now let's move to the configure services method here i am calling add json options and i am setting the serializer for the json serialization i am making use of newton's of json serialization in this project the reason being that the default serializer convert the property names to camel case for example if your property name is first name then when you are accessing the property through ajax on client side then it will be changed to small letter first name like for example the capital letter f in the property will be changed to small letter so in such cases it becomes very difficult to access the properties and let's say on server side you have capital f and then client side you have small f so it leads to inconsistency in the code also so to avoid that i am using newton's of json serializer which solves this problem and makes it easy to use finally i am adding the header name for the anti-forgery token the same header name will be used on client side while making use of the jquery ejects function so this completes the startup.cs class code now i'll be adding a model class to our project i'll right click then add then class now i'll give it a name as person model now i'll be adding some properties to the class before moving ahead i would like to inform you that an article has already been posted on this topic the link for the article and the code sample are available in the description also if you need any further help feel free to ask on forums the link for the forum is also available in the description finally i would like to request you to please subscribe to my channel and click the bell icon as you can see i have added two properties both string properties name and date time now i'll be adding a controller to the project this is a web api controller i'm selecting the empty option i'll give it a suitable name so here i will be creating an action method and this particular action method will be called through jquery ajax function this particular action method will accept an object of percent model class and also return an object of percent model class as you can see i am setting the current date time in the date time property of the percent model class object while the name will be sent from the client side so basically the date time will verify that the call is successful and the date time is from the server itself you can see the person model class object is returned back to the client here i am decorating the method with the http post attribute and then i am setting its root this particular route will be used to call this particular method through jqueryagexcall the root will be set in the url property of the jquery ajax function finally i'll add attribute validate nt for jerry token to the method this particular attribute will make sure that this particular handler method validates the anti-forgery token with this we have completed the web api part now let's move to the laser page now here i am creating the anti-forgery token using the htable helper classes the anti-forgery token function creates an html hidden field with the token value here i am starting by adding a text box and this particular text box will accept the name which we need to send to the web api controller the next thing i am adding a button and this particular button will be used to execute the jquery ajax function so now we can proceed with the jquery code i'll start by inheriting the jquery library after that i am adding script tag and inside which will write the jquery code or in other words the javascript code inside the script tags i'll start by adding a jquery document ready function here i am referencing the button and i am assigning it a jquery click event handler so that when the button is clicked this particular event handler is triggered so here very first thing i am creating a json object and inside this particular json object i will be storing the value which is entered by the user in the name text box since we are receiving the object of person model class so here also we have to create a similar object hence here there is a property name which is very similar to the property in the percent model class now i am creating an ajax function the very first property of the ajax function is type since we are doing a post call so i am setting the type as post so the next property is url property and here i will be setting the root of the web api method now inside the before sent event handler i will be setting the anti-forgery token header the value of the anti-forgery token will be fetched from the hidden field choosing the name request verification token now you might have a question that from where i got this particular hidden field name so for that you need to simply run the page and do a view source and after that you will see a hidden field with this particular name so here i am fetching the value of the anti-forgery token from the hidden field itself using the name the third property is data here i'll be passing the person object and after that the jquery ajax function is a standard what we use hence i'll not go into the explanation part if you need to know the details of how a jquery ajax call is made in asp.net core razer pages please refer to the video on the right hand side inside the success event handler i am accepting the response which is nothing but the person model class object and then i'll be displaying the data of both the properties that is name and date time separately inside an alert message box then comes the failure and error event endless of the jquery ejects function so i'll just move fast forward in it so with this we complete the jquery part and in turn we complete our project programming part now we can run the project and see it in action so in the text box i'll enter my name now i'll click on the button as you can see my name as well as the current date time from the server is displayed using javascript alert message box so with this we come to the end of this video today we learned how to create a web api and also we learnt how to call it using jquery ajax in hp.net core razer pages thanks for watching please like share and subscribe and don't forget to click the bell icon goodbye [Music] you

Channel: ASPSnippets

Views: 6,790

Keywords: ASP.Net, Web API, jQuery, AJAX, Core, .Net, Example, Tutorial, Beginners, Razor, Pages, RazorPages, Step by Step

Id: FDx43P_3PKk

Length: 9min 29sec (569 seconds)

Published: Tue Jun 28 2022