How to call Html get method from js

Question

I have an user table. When I want to edit my user's infos, I want to open the update page as a popup. Right now I can open the popup but when I try to call HttpGet update method to get user's infos, it's not working. What am I missing here?

My update button to open the popup

 <button data-id="@obj.Id" type="button" class="classExample" onclick="onUpdateButtonClicked(@obj.Id)" data-toggle="modal"> update </button> 

My Popup

<div id="updateModal" class="modal"> //My Update fiels will be here </div> 

My Js code

const modal = document.querySelector("#updateModal") const spans = document.querySelectorAll('.close'); const cancelBtns = document.querySelectorAll(".cmsBtnCancel") window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } } spans.forEach(span => { span.addEventListener('click', () => { modal.style.display = "none"; }) }) cancelBtns.forEach(cancelBtn => { cancelBtn.onclick = () => { modal.style.display = "none"; } }) const onUpdateButtonClicked = function (id) { var deleteInput = document.getElementById('delete-input'); //modal.style.display = "block"; if (id == undefined) { deleteInput.value = this.dataset.id; } else { deleteInput.value = id } $.ajax( { type: "GET", page: 1, rp: 6, url: '@Url.Action("Update","User")' + "?id=" + id, dataType: "json", success: function (result) { modal.style.display = "block"; }, error: function (x, e) { } }); }; 

Answer 1

From a comment on the question:

I get a @Url.Action(%22Update%22,%22User%22)?id=30:1 Failed to load resource: the server responded with a status of 404 () error on console . My link becomes localhost:7177/xxx/ttt/@Url.Action(%22Update%22,%User%22)?id=30 when it should be localhost:7177/user/update/id?=30

Your JavaScript code has server-side C# code in it, but appears to be in a separate .js file instead of in the view. Server-side code isn't processed in .js files.

Either move the JavaScript code to the view, or at least move that value to the view. For example, you could have this in the view:

const updateUrl = '@Url.Action("Update","User")'; 

And then use that value in your .js file:

url: updateUrl + "?id=" + id,