How to make PUT from ASP.NET MVC to ASP.NET Core Web API?

Question

I am having trouble with the put method of Web API. I am working with Kendo UI Jquery inside ASP.NET MVC and it has to make a PUT through API.

Please guide me what am I doing wrong, also at the end of this is the error code.

Here it is what I have tried so far:

API controller:

[HttpPut] //It never reaches here
[Route("api/Update")]
public async Task<IActionResult> Update(Guid id, UpdateProductCommand command)
{
    if (id != command.Id)
    {
        return BadRequest();
    }

    return Ok(await _mediator.Send(command));
}

ASP.NET MVC controller:

public ActionResult Update(Guid id, [FromBody]Product product)
{
    using (var client = new HttpClient())
    {
        client.BaseAddress = new Uri("https://localhost:44393");
            
        var json = JsonConvert.SerializeObject(product);

        var contentData = new StringContent(json, Encoding.UTF8, "application/json");

        var response = client.PutAsync("/api/Product", contentData);

        var result = response.Result;

        if (result.IsSuccessStatusCode)
        {
            return RedirectToAction("Index");
        }
    }

    return View(product);
}

View with Kendo UI:

<script>
    //----------TRANSPORT -------------------//
    var dataSource = new kendo.data.DataSource({
        batch: false,
        transport: {
            read: {
                url: "https://localhost:44393/api/Product",
                dataType: "json"
            },
            update: {
                url: "@Url.Action("Update", "Home")",
                dataType: "json",
            },
            create: {
                url: "@Url.Action("Create", "Home")",
                dataType: "json",
                contentType: "application/json",
                type: "POST"
            },
            destroy: {
                url: "@Url.Action("Delete", "Home")",
                dataType: "json",

            },
           },
        pageSize: 5,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    productName: { type: "string", editable: true },
                    prouctSKU: { type: "string", editable: true },
                    productType: { type: "string", editable: true },
                }
            }
        }
    });

Error:

jquery.min.js:4 GET https://localhost:44385/Home/Update?id=1e8332f1-ae69-4997-b851-08d9ae81e7de&productName=sd&prouctSKU=string&productType=string 415

score 1 · Answer 1 · answered Nov 24 '21 at 09:24

1

You need to tell your component to make a PUT request otherwise it will default to GET. According to the docs, you should specify the type of the request. For example:

update: {
    url: "@Url.Action("Update", "Home")",
    dataType: "json",
    type: "PUT" //<---- Add this
},

answered Nov 24 '21 at 09:24

DavidG

113,891
12
217
223

Thank you for the answer David, already tried it but doesn't work, I think my problem may be to my MVC Controller somehow. – mambaxk Nov 24 '21 at 09:26

score 1 · Accepted Answer · answered Nov 24 '21 at 10:35

1

In your MVC Controller you are using PutAsync in a non async method. Change your Action to an async method, change the ActionResult to async Task<ActionResult> and use the await keyword when calling the PutAsync.

Or if you do not want to change your method to an async method change the call client.PutAsync to client.Put

answered Nov 24 '21 at 10:35

Max

794
3
7

If you want to read more information about Asynchronous programming I advise you to read the official documentation https://learn.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/ or there is a discussion on stack https://stackoverflow.com/questions/14455293/how-and-when-to-use-async-and-await – Max Nov 24 '21 at 10:39

How to make PUT from ASP.NET MVC to ASP.NET Core Web API?

2 Answers2