Post array of strings to web API method

Question

this is my client side ajax call:

    var list = [\"a\", \"b\", \"c\", \"d\"];

    var jsonText = { data: list };

    $.ajax({
        type: \         


        

Answer 1

You should pass the list itself, and not any other object wrapping it.

E.g. pass the following:

var list = ["a", "b", "c", "d"];

in

$.ajax({
        type: "POST",
        url: "/api/scheduledItemPriceStatus/updateStatusToDelete",
        // Pass the list itself
        data: list, 
        dataType: "json",
        traditional: true,
        success: function() { alert("it worked!"); },
        failure: function() { alert("not working..."); }
    });

Your method signature on server is correct.

Answer 2

In the backend, you could use FormDataCollection.GetValues(string key) to return an array of strings for that parameter.

public HttpResponseMessage UpdateStatusToDelete(FormDataCollection formData) {
    string[] data = formData.GetValues("data");
    ...
}

Answer 3

Setting the dataType won't help you.

This is how I do it :

var SizeSequence = {};
SizeSequence.Id = parseInt(document.querySelector("dd#Sequence_Id").textContent);
SizeSequence.IncludedSizes = [];
var sizes = document.querySelectorAll("table#IncludedElements td#Size_Name");
// skipping the first row (template)
for (var i = 1, l = sizes.length ; i != sizes.length ; SizeSequence.IncludedSizes.push(sizes[i++].textContent));

$.ajax("/api/SizeSequence/" + SizeSequence.Id, { 
     method: "POST",
     contentType: "application/json; charset=UTF-8",
     data: JSON.stringify(SizeSequence.IncludedSizes), 
...

The Server Part

// /api/SizeSequence/5
public async Task<IHttpActionResult> PostSaveSizeSequence(int? Id, List<String> IncludedSizes)
    {
        if (Id == null || IncludedSizes == null || IncludedSizes.Exists( s => String.IsNullOrWhiteSpace(s)))
            return BadRequest();
        try
        {

            await this.Repo.SaveSizeSequenceAsync(Id.Value, IncludedSizes );
            return Ok();
        }
        catch ( Exception exc)
        {
            return Conflict();
        }
    }

References

jQuery.ajax()

Answer 4

You can also do this with JSON.stringify, which feels more semantically intuitive than putting things in an object with an empty string key. (I am using Web API 2, not sure if that matters.)

Client code

$.ajax({
    type: 'POST', //also works for PUT or DELETE
    url: '/api/UserRole',
    contentType: "application/json",
    data: JSON.stringify(["name1", "name2"])
})

Server Code

[HttpPost]
[Route("api/UserRole")]
public IHttpActionResult AddUsers(string[] usernames)

Answer 5

For passing simply types, the data to post must take the form of a name value pair with the name portion being an empty string. So you need to make the Ajax call like so:

$.ajax({
  type: "POST",
  url: "/api/values",
  data: { "": list },
  dataType: "json",
  success: function() { alert("it worked!"); },
  failure: function() { alert("not working..."); }
});

Additionally, on your Web API action, annotate it w/ the [FromBody] attribute. Something like:

public void Post([FromBody]string[] values)

That should do the trick.

Answer 6

use the method above to send array as suggested by cris in your jquery ajax call. JSON data is usually in key value pair.

  var tmp = [];
  tmp.push({
  //this is the key name 'a'  "a": "your value", //it could be anything here in 
   //string format.
    "b": "b",
    "c": "c",
    "d": "d"
   });

 { data: JSON.stringify(tmp);} 

You can also accomplish above by using two dimensional array

Additionally do this in the webapi project.

under the models folder in your web api project create a class file. Possibly class1.cs.

Create 4 properties

public string a {get; set;}
public string b {get; set;}
public string c {get; set;}
public string d {get; set;}

Now do this in your controller

using projectname.models

[HttpPost]
public return-type actionname(List<Class1> obj)
{
  //Further logic goes here
} 

I am sure this will work.