asp.net core api PUT 请求从不命中方法

Question

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.

Answer 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>

Answer 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.