ASP.NET Minimal Web API - POSTing from client results in 404 error-CodePudding

I am trying to POST to my web API using Ajax, but for some reason, only one route in my code does not work from the client. It works perfectly fine from Swagger. Here is my ASP.NET code snippet:

app.MapGet("/clients", GetClients);
app.MapGet("/client/{clientID}", GetClient);
app.MapPost("/clients", CreateClient);
app.MapGet("/transactions/{clientID}", GetTransactions);
app.MapGet("/transactiontypes", GetTransactionTypes);
//app.MapPost("/transactions", CreateTransaction);
//The below route gives 404 error from client app:
app.MapPost("/transactions/{transactionID}", UpdateCommentTransaction);

public static async Task<IResult> UpdateCommentTransaction(ITransactionData transactionData, int transactionID, int clientID = 1, string updatedComment = "Test")
        {
            try
            {
                await transactionData.UpdateCommentTransaction(clientID, transactionID, updatedComment);
                return Results.Ok();
            }
            catch (Exception ex)
            {
                return Results.Problem(ex.Message);
            }
        }

My Ajax call:

$(".submit-comment-update").on("click", function(){
                $.ajax({
                    url: "https://localhost:7165/transactions",
                    type: "POST",
                    data: JSON.stringify({transactionID : 50011}),
                    contentType: "application/json",
                    success: function()
                    {
                        alert("Successfully updated comment!");
                    },
                    complete: function()
                    {
                        console.log("Completed");
                    },
                    error: function (request, status, error)
                    {
                        alert("Update failed!");
                    }
                });
            });

I get a 404 error. What could be the problem?

CodePudding user response：

You are getting a 404 not found as you haven't defined any route that could match url: "https://localhost:7165/transactions"

In the route definition, you expect to have the transactionID as part of the route

app.MapPost("/transactions/{transactionID}", UpdateCommentTransaction);

For instance /transactions/50011

However, in your Ajax call you don't pass the 50011 in the url but in the payload.

Your ajax call should be:

$(".submit-comment-update").on("click", function(){
            $.ajax({
                url: "https://localhost:7165/transactions/50011",
                type: "POST",
                contentType: "application/json",
                success: function()
                {
                    alert("Successfully updated comment!");
                },
                complete: function()
                {
                    console.log("Completed");
                },
                error: function (request, status, error)
                {
                    alert("Update failed!");
                }
            });
        });

Be careful, you will of course need your backend to handle the fact that your data will not be in the payload but the url.

CodePudding user response：

Your end point should be,

"https://localhost:7165/transactions/"   transcationID

The request body(payload) should be something like this

// data transfer object
var DTO = {
  transactionData: { // of type ITransactionData 
    // properties here
  },
  transactionID: 50011,
  clientID: 1, //optional
  updatedComment: "Test" // optional
};

//..
$.ajax({
  url: "https://localhost:7165/transactions/"   50011,
  type: "POST",
  data: JSON.stringify(DTO),
  contentType: "application/json",
  //...
});

according to the method signature