ASP.NET MVC Web API Delete call using jQuery Ajax with data params not working

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?

What is the value of values? And set contentType: 'application/json' — user3559349
– user3559349, Commented Jun 12, 2017 at 11:03
@StephenMuecke ok now its solved. I have created a new class model with one property called Items of type string[] — Mivaweb
– Mivaweb, Commented Jun 12, 2017 at 11:20

brijrajsinh · Accepted Answer · 2017-06-12 11:22:28Z

3

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');
        });

answered Jun 12, 2017 at 11:22

brijrajsinh

4533 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yıldız Ardal · Accepted Answer · 2017-06-12 11:13:50Z

0

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

This is how ajax works with arrays.

answered Jun 12, 2017 at 11:13

Yıldız Ardal

836 bronze badges

Comments

Mivaweb · Accepted Answer · 2017-06-12 11:22:22Z

0

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!

answered Jun 12, 2017 at 11:22

Mivaweb

5,7523 gold badges30 silver badges59 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC Web API Delete call using jQuery Ajax with data params not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related