jQuery "POST" method

Details
Written by: Stanko Milosev
Category: Core
Hits: 2075
Here I have explained how to create empty Asp.Net Core application, now using this article here is one example on how to use jQuery Ajax call to send JSON to Asp.Net core API.

index.html: 

<!DOCTYPE html>
<head>
	<meta charset="utf-8" />
	<script defer type="text/javascript" src="lib/jquery-3.5.1.js"></script>
	<script defer type="text/javascript" src="js/index.js"></script>
</head>

<html xmlns="http://www.w3.org/1999/xhtml">
	 <button id="button" type="button">Click Me!</button> 
</html>
index.js: 
$( "#button" ).click(function() {
    var json = JSON.stringify({"cities": ["Aurel Vlaicu", "Asquins", "Arnoldstein"]});

    $.ajax({
        url: "api/Empty/",
        type: "POST",
        data: json,
        contentType: "application/json; charset=utf-8"
    }).done(function (data) {
        alert("Success.");
    }).fail(function (data) {
        alert("Sorry. Server unavailable. ");
    }); 
});
Asp.Net core API: 
using Microsoft.AspNetCore.Mvc;

namespace AspDotNetCorePostExample.Controllers
{
  [Route("api/[controller]")]
  [ApiController]
  public class EmptyController : ControllerBase
  {
    [HttpGet]
    public string Get()
    {
      return "Hello world";
    }

    [HttpPost]
    public string Get([FromBody] Filter filter)
    {
      string returnValue = string.Empty;

      foreach (var city in filter.cities)
      {
        returnValue = $"{city}, {returnValue}";
      }

      return returnValue;
    }

    public class Filter
    {
      public string[] cities { get; set; }
    }

  }
}
Notice in jQuery that in Ajax call I didn't add dataType: "json" since my API returns string and not JSON. In API notice [FromBody] in method signature, and Filter class which is defined exactly the same as JSON var json = JSON.stringify({"cities": ["Aurel Vlaicu", "Asquins", "Arnoldstein"]}); which I am sending to API.

Example download from here