Question 69582 in Ajax Question posted in
You can find the official documentation here.

ASP.NET Minimal Web API – POSTing from client results in 404 error – Jquery ajax

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?

Tags:

2

Answers


  1. 0

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

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search