The Url.Action '@Url.Action(“Update”, “Admin”)'query string which is not working in .NET MVC

Question

The query string generated by Ajax

url:'@Url.Action("Update","Admin")'

is http://localhost:61887/Adimn/Update?id=16 which is not working but when the url is given as

url: '/Admin/Update'

it generates

http://localhost:61887/Adimn/Update/16

and it works fine.
Why is this happening?

Here is my Script:

function EditUser(value) {
       $.ajax({
           url: '@Url.Action("Update", "Admin")'
           url: '/Admin/Update',
           data: {
               id: value
           }
       })
       .done(function (response) {
           $("#Ajaxcontainer").html(response);
           focusAction("Ajaxcontainer");
       })
       .fail(function (XMLHttpRequest, textStatus, errorThrown) {
           alert("FAIL");
       });
   }

Here is the HTML Link:

<button type="button" class="btn btn-primary btn-sm" data-id="@item.ID" onclick="EditUser(@item.ID);">Edit</button>

Answer 1

You can pass parameters to Url.Action, for instance:

Url.Action("Update", "Admin", new { id = id });

So:

        $.ajax({
            url: '@Url.Action("Update", "Admin", new { id = 16})',
            //url: '/Admin/Update/16',
            contentType: "application/json",
            success: function (result) { 
                  //   your code here
            },
            error: function (xhr, resp, text) { console.log(xhr, resp, text); }
        });

This way, the requested url will be: http://localhost:61887/Adimn/Update/16

While,

        $.ajax({
            url: '/Admin/Update/',
            type: "GET",
            data: {
                "id":16
            },
            contentType: "application/json",
            success: function (result) { alert('success'); },
            error: function (result) { alert('Error'); }
        });

This way, the requested url will be: http://localhost:61887/Adimn/Update/?id=16

The reason why you see query string at the end of the url ?id=16 is because by default you're sending Get request by ajax. You may decide to use type: "POST", in ajax call to avoid query string, and instead, have the model data bundled and sent through body of message.