使用jQuery Ajax的ASP.NET MVC Web API删除调用，数据参数不起作用

Question

I have a web api method like below:

    /// <summary>
    /// DELETE: api/ftpapi/custom/deletefiles
    /// </summary>
    /// <param name="items"></param>
    /// <returns></returns>
    [HttpDelete]
    [ResponseType(typeof(void))]
    public IHttpActionResult DeleteFiles(string[] items)
    {
        return Ok();
    }

In my view I call this method using Ajax:

            var values = $('input:checkbox[name=items]:checked').map(function () {
            return this.value;
            }).get();

            $.ajax({
                url: uri_api + '/custom/deletefiles',
                method: "DELETE",
                data: { items: values }
            }).done(function (data) {
                    location.reload(true);
                })
            .fail(function (jqXHR, textStatus, err) {
                console.log('Error: ' + err);
            })
            .always(function () {
                $('#loader').fadeOut(200);
                $('body').removeClass('loader-in');
            });

When I place a breakpoint at the return Ok(); and test this out, it works. Except the param string[] items is always empty.

If I look into the network tab of Google Chrome I can see the items in my form data:

What am I missing here?

Answer 1

Change to this: As JSON.stringify turns a Javascript object into JSON text and stores that JSON text in a string.

  $.ajax({
            url: uri_api + '/custom/deletefiles',
            contentType: "application/json; charset=utf-8",
            method: "DELETE",
            data: JSON.stringify({ items: values })
        }).done(function (data) {
                location.reload(true);
            })
        .fail(function (jqXHR, textStatus, err) {
            console.log('Error: ' + err);
        })
        .always(function () {
            $('#loader').fadeOut(200);
            $('body').removeClass('loader-in');
        });

Answer 2

Instead of writing data: { items: values } , you should do data: JSON.stringify({ 'items': values }) .

This is how ajax works with arrays.

Answer 3

Thanks to @Stephen Muecke I first added some changes to my ajax call:

$.ajax({
     url: uri_api + '/custom/deletefiles',
     method: "DELETE",
     data: JSON.stringify({ 'items': values }), // Added Stringify
     contentType: 'application/json' // Added content type
});

Ater that I have created a new class model with one property:

public class FtpFilesModel
{
    public string[] Items { get; set; }
}

Then the last thing to do is changing the method property to the new created class:

[HttpDelete]
[ResponseType(typeof(void))]
public IHttpActionResult DeleteFiles(FtpFilesModel files)
{
    return Ok();
}

And now its working!