$.ajax patch method and .net 8 api action

Question

Error Response Test -

"{"type":"https://tools.ietf.org/html/rfc9110#section-15.5.1","title":"One or more validation errors occurred.","status":400,"errors":{"$":["The JSON value could not be converted to Microsoft.AspNetCore.JsonPatch.JsonPatchDocument`1[HttpPatchApi.Models.ProductModel]. Path: $ | LineNumber: 0 | BytePositionInLine: 1."],"productDoc":["The productDoc field is required."]},"traceId":"00-4d8533ec8e406ab17aa1ca6e2ac847e6-627f8f472a9de603-00"}"

.Net 8, Wep Api Action -

[HttpPatch]

public ActionResult UpdateOffer(int id, [FromBody] JsonPatchDocument<ProductModel> productDoc)

{

ProductModel product = ProductModelFaker.GetProductModel(id);

productDoc.ApplyTo(product);

return Ok(ProductModelFaker.UpdateProductModel(product));

}

jQuery Ajax Patch Call -

function saveOffer() {

var apiUrl = _baseApiUrl + "UpdateOffer/?id=" + $("#txtID").val();

var prodcutDoc = [

    { "op": "replace", "path": "/OfferDescription", "value": $("#txtOfferDescription").val() },

    { "op": "replace", "path": "/OffferPercentage", "value": $("#txtOffferPercentage").val() }

];

$.ajax({

    url: apiUrl,

    type: 'PATCH',

    data: JSON.stringify(prodcutDoc),

    contentType: 'application/json-patch+json',

    accepts: 'application/json',

    success: function (response) {

        loadProductToUi(response);

    },

    error: function (error) {

        console.log("Error in saveOffer:");

        console.log(error);

        alert("Error in saveOffer:" + error.responseText);

    }

});

return true;

}

Payload -

Clarification -

What is the misting? What is the fix?

Thanks in advance.

Senthil S R

Answer 1

Hi, I had a test in my side with your code snippet which worked well, I didn't reproduce your issue. I created a new .net 8 MVC application, and in the Index.cshtml, I have codes like below

<button onclick="saveOffer()">send request</button>
@section Scripts{
    <script>
        function saveOffer() {
            alert(1);
            var apiUrl = "https://localhost:7051/api/test?id=1";
            var prodcutDoc = [
                { "op": "replace", "path": "/OfferDescription", "value": "changedDesc" },
                { "op": "replace", "path": "/OffferPercentage", "value": "changedPer" }
            ];
            $.ajax({
                url: apiUrl,
                type: 'PATCH',
                data: JSON.stringify(prodcutDoc),
                contentType: 'application/json-patch+json',
                accepts: 'application/json',
                success: function (response) {
                    loadProductToUi(response);
                },
                error: function (error) {
                    console.log("Error in saveOffer:");
                    console.log(error);
                    alert("Error in saveOffer:" + error.responseText);
                }
            });
            return true;
        }
    </script>
}

Then I followed this document to complete Patch request configuration, including adding .AddNewtonsoftJson(). Then please see my screenshot below, I create a simple ProductModel which worked well.

======================================

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Tiny

Answer 2

builder.Services.AddControllers().AddNewtonsoftJson(); - This will resolve ths issue. Thanks @Tiny Wang-MSFT .