{"id":122,"date":"2019-09-19T12:11:02","date_gmt":"2019-09-19T12:11:02","guid":{"rendered":"http:\/\/sumitjangid.com\/?p=122"},"modified":"2019-09-19T12:11:02","modified_gmt":"2019-09-19T12:11:02","slug":"handle-ajax-requests-in-asp-net-core-razor-pages","status":"publish","type":"post","link":"http:\/\/sumitjangid.com\/index.php\/2019\/09\/19\/handle-ajax-requests-in-asp-net-core-razor-pages\/","title":{"rendered":"Handle Ajax Requests in ASP.NET Core Razor Pages"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.talkingdotnet.com\/tag\/razor-pages\/\" rel=\"noreferrer noopener\" target=\"_blank\">Razor Pages<\/a>&nbsp;are a new feature of ASP.NET Core that makes coding page-focused scenarios easier and more productive. Razor pages use handler methods to deal with the incoming HTTP request (GET\/POST\/PUT\/Delete). These are similar to Action methods of ASP.NET MVC or WEB API. Razor Pages follow particular naming convention and that is also true for Handler methods. They also follow particular naming conventions and prefixed with \u201cOn\u201d: and HTTP Verb like&nbsp;<code>OnGet()<\/code>,&nbsp;<code>OnPost()<\/code>&nbsp;etc. The handler methods also have asynchronous version:&nbsp;<code>OnGetAsync()<\/code>,&nbsp;<code>OnPostAsync()<\/code>&nbsp;etc. Calling these handler methods from jQuery Ajax is tricky. This post talks how to handle Ajax requests in ASP.NET Core Razor Pages.<\/p>\n\n\n\n<h2>Handle Ajax Requests in ASP.NET Core Razor Pages<\/h2>\n\n\n\n<p>Before we look into handling Ajax requests in ASP.NET Core Razor Pages, it\u2019s important to understand how handler methods work. BTW, if you are new to ASP.NET Core Razor Pages, following articles will help.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/tutorials\/razor-pages\/razor-pages-start\" rel=\"noreferrer noopener\" target=\"_blank\">Getting started with Razor Pages in ASP.NET Core<\/a><\/li><li><a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/mvc\/razor-pages\/?tabs=visual-studio\" rel=\"noreferrer noopener\" target=\"_blank\">Introduction to Razor Pages in ASP.NET Core<\/a><\/li><li><a href=\"https:\/\/www.youtube.com\/watch?v=yyBijyCI5Sk\" rel=\"noreferrer noopener\" target=\"_blank\">Introduction to ASP.NET Core Razor Pages<\/a><\/li><\/ul>\n\n\n\n<p>As mentioned earlier, the handler method follows a pattern. They are prefixed with \u201cOn\u201d and the name of HTTP verb like,<\/p>\n\n\n\n<ul><li>OnGet<\/li><li>OnPost<\/li><li>OnPut<\/li><li>OnGetAsync<\/li><li>OnPostAsync<\/li><li>OnPutAsync<\/li><\/ul>\n\n\n\n<p>The&nbsp;<code>OnGet<\/code>&nbsp;method gets called on the page load and&nbsp;<code>onPost<\/code>&nbsp;gets called when the form gets submitted. The default template for ASP.NET Core 2.0 web application comes with a couple of razor pages. When you open About.cs.html file, you should see the following code.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>1234<\/td><td><code>public<\/code> <code>void<\/code> <code>OnGet()<\/code><code>{<\/code><code>Message = <\/code><code>\"Your application description page.\"<\/code><code>;<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>The&nbsp;<code>onGet()<\/code>&nbsp;gets called when the request comes for the About page. Besides these default Handlers, we can also specify custom names. The custom name must come after the followed naming convention like,<\/p>\n\n\n\n<ul><li>OnGetCountries()<\/li><li>OnPostUserMaster()<\/li><li>OnPostUserDetails()<\/li><\/ul>\n\n\n\n<p>In case of multiple POST handlers on the same page, how do you call them? You need to use&nbsp;<code>asp-page-handler<\/code>&nbsp;Tag Helper and assign the handler name. Like,<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>123456<\/td><td><code>&lt;form asp-page-handler=<\/code><code>\"usermaster\"<\/code> <code>method=<\/code><code>\"post\"<\/code><code>&gt;<\/code><code>&lt;input type=<\/code><code>\"submit\"<\/code> <code>id=<\/code><code>\"btnSubmit\"<\/code> <code>value=<\/code><code>\"Save Master\"<\/code> <code>\/&gt;<\/code><code>&lt;\/form&gt;<\/code><code>&lt;form asp-page-handler=<\/code><code>\"userdetail\"<\/code> <code>method=<\/code><code>\"post\"<\/code><code>&gt;<\/code><code>&lt;input type=<\/code><code>\"submit\"<\/code> <code>id=<\/code><code>\"btnSubmit\"<\/code> <code>value=<\/code><code>\"Save Details\"<\/code> <code>\/&gt;<\/code><code>&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Or, we can achieve the same thing with one form, and two submit inputs inside of that form:<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>1234<\/td><td><code>&lt;form method=<\/code><code>\"post\"<\/code><code>&gt;<\/code><code>&lt;input type=<\/code><code>\"submit\"<\/code> <code>asp-page-handler=<\/code><code>\"usermaster\"<\/code> <code>value=<\/code><code>\"Save Master\"<\/code> <code>\/&gt;<\/code><code>&lt;input type=<\/code><code>\"submit\"<\/code> <code>asp-page-handler=<\/code><code>\"userdetail\"<\/code> <code>value=<\/code><code>\"Save Details\"<\/code> <code>\/&gt;<\/code><code>&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>That\u2019s enough for quick understanding. Read&nbsp;<a href=\"https:\/\/www.mikesdotnetting.com\/article\/308\/razor-pages-understanding-handler-methods\" rel=\"noreferrer noopener\" target=\"_blank\">Razor Pages \u2013 Understanding Handler Methods<\/a>&nbsp;for detailed information about handler methods.<\/p>\n\n\n\n<h3>Making Ajax Requests in ASP.NET Core Razor Pages<\/h3>\n\n\n\n<p>Now, let talk about calling the handler methods from jQuery Ajax. You must be thinking what is so different. Here is a&nbsp;<code>GET<\/code>&nbsp;handler method defined in \u201cDemo\u201d razor page.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12345678910<\/td><td><code>public<\/code> <code>JsonResult OnGetList()<\/code><code>{<\/code><code>List&lt;<\/code><code>string<\/code><code>&gt; lstString = <\/code><code>new<\/code> <code>List&lt;<\/code><code>string<\/code><code>&gt;<\/code><code>{<\/code><code>\"Val 1\"<\/code><code>,<\/code><code>\"Val 2\"<\/code><code>,<\/code><code>\"Val 3\"<\/code><code>};<\/code><code>return<\/code> <code>new<\/code> <code>JsonResult(lstString);<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>The HTML contains only div element without a form tag.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12<\/td><td><code>&lt;div id=<\/code><code>\"dvItems\"<\/code> <code>style=<\/code><code>\"font-size:24px;\"<\/code><code>&gt;<\/code><code>&lt;\/div&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>The following jQuery code will call the&nbsp;<code>OnGetList<\/code>&nbsp;handler method available in Demo razor page and populate the list.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12345678910111213141516<\/td><td><code>$.ajax({<\/code><code>type: <\/code><code>\"GET\"<\/code><code>,<\/code><code>url: <\/code><code>\"\/Demo\/OnGetList\"<\/code><code>,<\/code><code>contentType: <\/code><code>\"application\/json\"<\/code><code>,<\/code><code>dataType: <\/code><code>\"json\"<\/code><code>,<\/code><code>success: function (response) {<\/code><code>var<\/code> <code>dvItems = $(<\/code><code>\"#dvItems\"<\/code><code>);<\/code><code>dvItems.empty();<\/code><code>$.each(response, function (i, item) {<\/code><code>var<\/code> <code>$tr = $(<\/code><code>'&lt;li&gt;'<\/code><code>).append(item).appendTo(dvItems);<\/code><code>});<\/code><code>},<\/code><code>failure: function (response) {<\/code><code>alert(response);<\/code><code>}<\/code><code>});<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.talkingdotnet.com\/wp-content\/uploads\/2017\/10\/Handle-Ajax-requests-in-ASP.NET-Core-Razor-Pages.png\"><img src=\"https:\/\/www.talkingdotnet.com\/wp-content\/uploads\/2017\/10\/Handle-Ajax-requests-in-ASP.NET-Core-Razor-Pages.png\" alt=\"Handle Ajax requests in ASP.NET Core Razor Pages\" class=\"wp-image-5099\"\/><\/a><\/figure><\/div>\n\n\n\n<p>But, you will be surprised to see 404 not found error. See below screenshot.<br>To understand the reason for getting 404 error, we need to see how the handler methods are rendered. In one the earlier code sample, we created 2 forms and called 2 handler methods. Following is the output of generated HTML on the client side. For now, ignore the&nbsp;<code>__RequestVerificationToken<\/code>&nbsp;and look at the value of the&nbsp;<code>action<\/code>&nbsp;attribute of form tag.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>1234567<\/td><td><code>&lt;form method=<\/code><code>\"post\"<\/code> <code>action=<\/code><code>\"\/Demo?handler=usermaster\"<\/code><code>&gt;<\/code><code>&lt;button <\/code><code>class<\/code><code>=<\/code><code>\"btn btn-default\"<\/code><code>&gt;Save Master&lt;\/button&gt;<\/code><code>&lt;input name=<\/code><code>\"__RequestVerificationToken\"<\/code> <code>type=<\/code><code>\"hidden\"<\/code> <code>value=<\/code><code>\"CfDJ8KW5cuB058RCnNyZSLI7AUjUAtTwe54jQ4Z9Goyn3WKPcpVFYSFUM5J-JDFC3E-MZIUcyR0UnbrvrC_sHv6MbUONStuIMhqDc7i00pQiGkrzf3hK6t5gZFVrjUpyAcargow4zvKU_ISjdPfoLTNF588\"<\/code> <code>\/&gt;&lt;\/form&gt;<\/code>&nbsp;<code>&lt;form method=<\/code><code>\"post\"<\/code> <code>action=<\/code><code>\"\/Demo?handler=userdetail\"<\/code><code>&gt;<\/code><code>&lt;button <\/code><code>class<\/code><code>=<\/code><code>\"btn btn-default\"<\/code><code>&gt;Save Details&lt;\/button&gt;<\/code><code>&lt;input name=<\/code><code>\"__RequestVerificationToken\"<\/code> <code>type=<\/code><code>\"hidden\"<\/code> <code>value=<\/code><code>\"CfDJ8KW5cuB058RCnNyZSLI7AUjUAtTwe54jQ4Z9Goyn3WKPcpVFYSFUM5J-JDFC3E-MZIUcyR0UnbrvrC_sHv6MbUONStuIMhqDc7i00pQiGkrzf3hK6t5gZFVrjUpyAcargow4zvKU_ISjdPfoLTNF588\"<\/code> <code>\/&gt;&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>The thing to notice here is, the name of the handler is added to the form\u2019s action as a query string parameter. We need to use similar URL pattern while making the jQuery Ajax call. Like,<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12345678910111213141516<\/td><td><code>$.ajax({<\/code><code>type: <\/code><code>\"GET\"<\/code><code>,<\/code><code>url: <\/code><code>\"\/Demo?handler=List\"<\/code><code>,<\/code><code>contentType: <\/code><code>\"application\/json\"<\/code><code>,<\/code><code>dataType: <\/code><code>\"json\"<\/code><code>,<\/code><code>success: function (response) {<\/code><code>var<\/code> <code>dvItems= $(<\/code><code>\"#dvItems\"<\/code><code>);<\/code><code>dvItems.empty();<\/code><code>$.each(response, function (i, item) {<\/code><code>var<\/code> <code>$tr = $(<\/code><code>'&lt;li&gt;'<\/code><code>).append(item).appendTo(dvItems);<\/code><code>});<\/code><code>},<\/code><code>failure: function (response) {<\/code><code>alert(response);<\/code><code>}<\/code><code>});<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Now, this should work. You can use the same approach for&nbsp;<code>POST<\/code>&nbsp;requests as well. Here is a&nbsp;<code>POST<\/code>&nbsp;handler method defined in \u201cDemo\u201d razor page.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12345678910<\/td><td><code>public<\/code> <code>ActionResult OnPostSend()<\/code><code>{<\/code><code>List&lt;<\/code><code>string<\/code><code>&gt; lstString = <\/code><code>new<\/code> <code>List&lt;<\/code><code>string<\/code><code>&gt;<\/code><code>{<\/code><code>\"Val 1\"<\/code><code>,<\/code><code>\"Val 2\"<\/code><code>,<\/code><code>\"Val 3\"<\/code><code>};<\/code><code>return<\/code> <code>new<\/code> <code>JsonResult(lstString);<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>The HTML contains only div element without a form tag.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12<\/td><td><code>&lt;div id=<\/code><code>\"dvPostItems\"<\/code> <code>style=<\/code><code>\"font-size:24px;\"<\/code><code>&gt;<\/code><code>&lt;\/div&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Here is jQuery Ajax call for the POST method.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12345678910111213141516<\/td><td><code>$.ajax({<\/code><code>type: <\/code><code>\"POST\"<\/code><code>,<\/code><code>url: <\/code><code>\"\/Demo?handler=Send\"<\/code><code>,<\/code><code>contentType: <\/code><code>\"application\/json; charset=utf-8\"<\/code><code>,<\/code><code>dataType: <\/code><code>\"json\"<\/code><code>,<\/code><code>success: function (response) {<\/code><code>var<\/code> <code>dvItems = $(<\/code><code>\"#dvPostItems\"<\/code><code>);<\/code><code>dvItems.empty();<\/code><code>$.each(response, function (i, item) {<\/code><code>var<\/code> <code>$tr = $(<\/code><code>'&lt;li&gt;'<\/code><code>).append(item).appendTo(dvItems);<\/code><code>});<\/code><code>},<\/code><code>failure: function (response) {<\/code><code>alert(response);<\/code><code>}<\/code><code>});<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/www.talkingdotnet.com\/wp-content\/uploads\/2017\/10\/Handle-Ajax-requests-in-ASP.NET-Core-Razor-Pages_1.png\"><img src=\"https:\/\/www.talkingdotnet.com\/wp-content\/uploads\/2017\/10\/Handle-Ajax-requests-in-ASP.NET-Core-Razor-Pages_1.png\" alt=\"Handle Ajax requests in ASP.NET Core Razor Pages\" class=\"wp-image-5107\"\/><\/a><\/figure><\/div>\n\n\n\n<p>Bang!!!&nbsp;This gives you a 400 bad request error.<br>You must be wondering now, what\u2019s wrong with the above code. Well, there is nothing wrong with the above code. The reason is,<\/p>\n\n\n\n<p>Razor Pages are designed to be automatically protected from&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Cross-site_request_forgery\" rel=\"noreferrer noopener\" target=\"_blank\">cross-site request forgery<\/a>&nbsp;(CSRF\/XSRF) attacks. You don\u2019t have to write any additional code. Antiforgery token generation and validation is automatically included in Razor Pages. Here the request fails, there is no AntiForgeryToken present on the page.<\/p>\n\n\n\n<p>There are 2 ways to add the AntiForgeryToken.In ASP.NET Core MVC 2.0 the FormTagHelper injects anti-forgery tokens for HTML form elements. For example, the following markup in a Razor file will automatically generate anti-forgery tokens:<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>123<\/td><td><code>&lt;form method=<\/code><code>\"post\"<\/code><code>&gt;<\/code><code>&lt;!-- form markup --&gt;<\/code><code>&lt;\/form&gt;<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Add explicitly using&nbsp;<code>@Html.AntiForgeryToken()<\/code><\/p>\n\n\n\n<p>To add AntiForgeryToken, we can use any of the approaches. Both the approaches add an input type hidden with name&nbsp;<code>__RequestVerificationToken<\/code>. The Ajax request should send the anti-forgery token in request header to the server. So, the modified Ajax request looks like,<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>1234567891011121314151617181920<\/td><td><code>$.ajax({<\/code><code>type: <\/code><code>\"POST\"<\/code><code>,<\/code><code>url: <\/code><code>\"\/Demo?handler=Send\"<\/code><code>,<\/code><code>beforeSend: function (xhr) {<\/code><code>xhr.setRequestHeader(<\/code><code>\"XSRF-TOKEN\"<\/code><code>,<\/code><code>$(<\/code><code>'input:hidden[name=\"__RequestVerificationToken\"]'<\/code><code>).val());<\/code><code>},<\/code><code>contentType: <\/code><code>\"application\/json; charset=utf-8\"<\/code><code>,<\/code><code>dataType: <\/code><code>\"json\"<\/code><code>,<\/code><code>success: function (response) {<\/code><code>var<\/code> <code>dvItems = $(<\/code><code>\"#dvPostItems\"<\/code><code>);<\/code><code>dvItems.empty();<\/code><code>$.each(response, function (i, item) {<\/code><code>var<\/code> <code>$tr = $(<\/code><code>'&lt;li&gt;'<\/code><code>).append(item).appendTo(dvItems);<\/code><code>});<\/code><code>},<\/code><code>failure: function (response) {<\/code><code>alert(response);<\/code><code>}<\/code><code>});<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Since the script sends the token in a header called&nbsp;<code>X-CSRF-TOKEN<\/code>, configure the antiforgery service to look for the&nbsp;<code>X-CSRF-TOKEN<\/code>&nbsp;header:<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>12345<\/td><td><code>public<\/code> <code>void<\/code> <code>ConfigureServices(IServiceCollection services)<\/code><code>{<\/code><code>services.AddMvc();<\/code><code>services.AddAntiforgery(o =&gt; o.HeaderName = <\/code><code>\"XSRF-TOKEN\"<\/code><code>);<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Now, when the Post request is executed, it should work as expected. Below is another working example of&nbsp;<code>POST<\/code>&nbsp;request, sending data from client to server.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>123456789101112131415161718192021222324252627282930<\/td><td><code>$(<\/code><code>'#btnPost'<\/code><code>).<\/code><code>on<\/code><code>(<\/code><code>'click'<\/code><code>, function () {<\/code><code>var<\/code> <code>item1 = $(<\/code><code>'#txtItem1'<\/code><code>).val();<\/code><code>var<\/code> <code>item2 = $(<\/code><code>'#txtItem2'<\/code><code>).val();<\/code><code>var<\/code> <code>item3 = $(<\/code><code>'#txtItem3'<\/code><code>).val();<\/code><code>$.ajax({<\/code><code>type: <\/code><code>\"POST\"<\/code><code>,<\/code><code>url: <\/code><code>\"\/Demo?handler=Send\"<\/code><code>,<\/code><code>beforeSend: function (xhr) {<\/code><code>xhr.setRequestHeader(<\/code><code>\"XSRF-TOKEN\"<\/code><code>,<\/code><code>$(<\/code><code>'input:hidden[name=\"__RequestVerificationToken\"]'<\/code><code>).val());<\/code><code>},<\/code><code>data: JSON.stringify({<\/code><code>Item1: item1,<\/code><code>Item2: item2,<\/code><code>Item3: item3<\/code><code>}),<\/code><code>contentType: <\/code><code>\"application\/json; charset=utf-8\"<\/code><code>,<\/code><code>dataType: <\/code><code>\"json\"<\/code><code>,<\/code><code>success: function (response) {<\/code><code>var<\/code> <code>dvItems = $(<\/code><code>\"#dvPostItems\"<\/code><code>);<\/code><code>dvItems.empty();<\/code><code>$.each(response, function (i, item) {<\/code><code>var<\/code> <code>$tr = $(<\/code><code>'&lt;li&gt;'<\/code><code>).append(item).appendTo(dvItems);<\/code><code>});<\/code><code>},<\/code><code>failure: function (response) {<\/code><code>alert(response);<\/code><code>}<\/code><code>});<\/code><code>})<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>Here, we can\u2019t access the passed data via query string as the querystring contains \u201c?handler=Send\u201d value. Hence, to access the passed value on the server, read the Request object\u2019s body. Like,<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>1234567891011121314151617181920212223242526272829303132<\/td><td><code>public<\/code> <code>ActionResult OnPostSend()<\/code><code>{<\/code><code>string<\/code> <code>sPostValue1 = <\/code><code>\"\"<\/code><code>;<\/code><code>string<\/code> <code>sPostValue2 = <\/code><code>\"\"<\/code><code>;<\/code><code>string<\/code> <code>sPostValue3 = <\/code><code>\"\"<\/code><code>;<\/code><code>{<\/code><code>MemoryStream stream = <\/code><code>new<\/code> <code>MemoryStream();<\/code><code>Request.Body.CopyTo(stream);<\/code><code>stream.Position = 0;<\/code><code>using<\/code> <code>(StreamReader reader = <\/code><code>new<\/code> <code>StreamReader(stream))<\/code><code>{<\/code><code>string<\/code> <code>requestBody = reader.ReadToEnd();<\/code><code>if<\/code><code>(requestBody.Length &gt; 0)<\/code><code>{<\/code><code>var<\/code> <code>obj = JsonConvert.DeserializeObject&lt;PostData&gt;(requestBody);<\/code><code>if<\/code><code>(obj != <\/code><code>null<\/code><code>)<\/code><code>{<\/code><code>sPostValue1 = obj.Item1;<\/code><code>sPostValue2 = obj.Item2;<\/code><code>sPostValue3 = obj.Item3;<\/code><code>}<\/code><code>}<\/code><code>}<\/code><code>}<\/code><code>List&lt;<\/code><code>string<\/code><code>&gt; lstString = <\/code><code>new<\/code> <code>List&lt;<\/code><code>string<\/code><code>&gt;<\/code><code>{<\/code><code>sPostValue1,<\/code><code>sPostValue2,<\/code><code>sPostValue3<\/code><code>};<\/code><code>return<\/code> <code>new<\/code> <code>JsonResult(lstString);<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>The above code also deserialize the JSON data into&nbsp;<code>PostData<\/code>&nbsp;class object and below is the definition of&nbsp;<code>PostData<\/code>&nbsp;class.<\/p>\n\n\n\n<table class=\"wp-block-table\"><tbody><tr><td>123456<\/td><td><code>public<\/code> <code>class<\/code> <code>PostData<\/code><code>{<\/code><code>public<\/code> <code>string<\/code> <code>Item1 { <\/code><code>get<\/code><code>; <\/code><code>set<\/code><code>; }<\/code><code>public<\/code> <code>string<\/code> <code>Item2 { <\/code><code>get<\/code><code>; <\/code><code>set<\/code><code>; }<\/code><code>public<\/code> <code>string<\/code> <code>Item3 { <\/code><code>get<\/code><code>; <\/code><code>set<\/code><code>; }<\/code><code>}<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n<p>You can find the source code in the&nbsp;<a href=\"https:\/\/github.com\/talkingdotnet\/ASPNETCoreRazorPageDemoApp\/tree\/ASPNETCoreRazorAjax\" rel=\"noreferrer noopener\" target=\"_blank\">Github<\/a>.<\/p>\n\n\n\n<h3>Summary<\/h3>\n\n\n\n<p>The post talks about ASP.NET Core Razer Pages handler methods naming conventions and creating named handler method. Razor Pages are designed to be protected from (CSRF\/XSRF) attacks. Hence, Antiforgery token generation and validation are automatically included in Razor Pages. The post also provide solutions for making Ajax requests for Razor pages handler methods.<\/p>\n\n\n\n<p>Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Razor Pages&nbsp;are a new feature of ASP.NET Core that makes coding page-focused scenarios easier and more productive. Razor pages use handler methods to deal with the incoming HTTP request (GET\/POST\/PUT\/Delete). These are similar to Action&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,5,2],"tags":[],"_links":{"self":[{"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/posts\/122"}],"collection":[{"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":1,"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":123,"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/posts\/122\/revisions\/123"}],"wp:attachment":[{"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sumitjangid.com\/index.php\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}