asp.net core api PUT request never hits method

I am attempting to create a web api in asp.net. I am trying to use ajax to send my query parameters to the action method, but it never reaches it. FYI I am not well experienced with ajax.

I am trying to use a form in my view to pass the data to the action method but it does nothing. Here is my view:

<form action="/api/values" method="put">
    <ul>
        <li>
           <input type="text" id="Id" />
        </li>
        <li>
           <input type="text" id="FirstName" />
        </li>
        <li>
           <button onclick="Update()" class="btn btn-primary">Update</button>
        </li>
    </ul>
</form>

Here is my ajax:

<script>
    function Update(Id, FirstName) {
       $.ajax({
           url: "/api/values/" + Id + "/" + FirstName,
           type: "PUT",
           data: {
             Id: Id,
             FirstName: FirstName
           },
           success: function () {
              alert("success");
           }
       )};
    }
</script>

My url will look like: /api/values?Id=123XXXjxn&FirstName=Billy

This never reaches my controller:

[HttpPut("{Id}/{FirstName}")]
public ActionResult PutRequest([FromQuery] string Id, [FromQuery] string FirstName)
{
    //do stuff
}

I have tried it with just the [HttpPut] attribute, and used the [Route("{Id}/{FirstName}")] attribute, and without [FromQuery] in the parameters. I am stuck and am thinking it has to do with my ajax, and my method not being able to read the query parameters but I am not totally sure.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Your code should look like that

Controller

[Route("api/values")]
public class ValuesController : Controller
{
    [HttpPut("{Id}/{FirstName}")]
    public ActionResult PutRequest(string Id, string FirstName)
    {
        return new EmptyResult();
    }
}

View

<script>
    function Update(Id, FirstName) {
       $.ajax({
           url: "/api/values/" + Id + "/" + FirstName,
           type: "PUT",
           success: function () {
              alert("success");
           }
       });
    }
</script>

Since you do ajax call, you don’t need form attributes, prevent navigating to url with event.preventDefault()

<script>
    function Update(Id, FirstName) {
        event.preventDefault();

        $.ajax({
            url: "/api/values/" + Id + "/" + FirstName,
            type: "PUT",
            success: function () {
                alert("success");
            }
        });
    }
</script>

<form>
    <ul>
        <li>
            <input type="text" id="Id" />
        </li>
        <li>
            <input type="text" id="FirstName" />
        </li>
        <li>
            <button type="button" onclick="Update()" class="btn btn-primary">Update</button>
        </li>
    </ul>
</form>

And, of course, you need some version of jquery. You can get latest here

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Method 2

Your Controller code should look like that

[Route("api/values")]
public class ValuesController : Controller
{
    [Route("~/api/values/{Id}/{FirstName}")]
    public ActionResult PutRequest(string Id, string FirstName)
    {
       .......
    }
}
Your url shood look like: /api/values/123XXXjxn/Billy

Change in javascript

type: "PUT",
data: {

             Id: Id,
             FirstName: FirstName
           },

To

type: "POST",
data: null,

and check if you have app.UseRouting(); in Configure section of your startup file.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0