Sending a PUT request using AJAX with JSON payload to an ASP.NET Web API endpoint

When attempting to perform a simple AJAX PUT operation on my API method, I found that the parameters were not being set and remained as 0. This occurred despite the request reaching the API method without any errors. What could be causing this issue?

AJAX Call:

        var data = {
            productId: 100,
            oldIndex: 3
        };

        $.ajax({
            url: '/api/products/reorder',
            method: 'PUT',
            data: JSON.stringify(data),
            contentType: 'application/json'
        });

API:

        [HttpPut("api/products/reorder")]
        public IActionResult ReOrder([FromBody]int productId, [FromBody]int oldIndex)
        {
        }

Answer №1

In my opinion, the solution to your question is as follows:

    $.ajax({
        url: '/api/products/reorder/' + data.productId + '/' + data.oldIndex,
        method: 'PUT',
        contentType: 'application/json'
    });


    [HttpPut("api/products/reorder/{productId}/{oldIndex}")]
    public IActionResult ReOrder(int productId, int oldIndex)
    {
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to verify if a user is accessing a webpage through Electron?

If I were interested in creating a basic Electron application that notifies the user upon reaching example.com, is this achievable? If yes, then how can I determine if the user is on a particular webpage? ...

Using `req.body` to retrieve form data in express.js is not permitted

I have a form on my website that collects user data using input and selection fields. I'm looking to use an AJAX call triggered by the submit button's handler to save this data on the server. Below is an outline of the code: Client side: xhr.o ...

When utilizing an ajax content refresh, jQuery UI draggable does not inject properly

I recently set up a page with draggable elements and everything was working smoothly. However, I decided to add an ajax content refresh that updates the div containing the elements every 10 seconds. Since implementing this, the draggable functionality ha ...

What is the best way to create a dynamic graph in amcharts during runtime?

Below is the code for Multiple Value Axes: In this code, we aim to display a graph using dynamically generated random data. When executed, nothing will happen. <script> var chart; var chartData = []; // generate some random data within a different ...

Meta tag information from Next.js not displaying properly on social media posts

After implementing meta tags using Next.js's built-in Head component, I encountered an issue where the meta tag details were not showing when sharing my link on Facebook. Below is the code snippet I used: I included the following meta tags in my inde ...

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

Avoid removing content when using bootstrap popover

My goal is to incorporate HTML within a Bootstrap 5 popover. I made some modifications to the code to extract HTML content from a specific div without using the data-bs-content attribute. The current code structure is as follows: $(document).ready(fu ...

Updating Angular Material theme variables during the build processIs this okay?

How can I easily customize the primary color of my angular 6 application to be different for development and production builds? Is there a simple solution to automatically change the primary color based on the build? ...

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

I am currently working on a web app using JQuery Mobile 1.4.5. Encounter an issue that seems to be related to either the browser or JQM bug specifically when using Google Chrome in fullscreen mode on Android (v.4.4.2). Upon clicking on the Click Here!! ...

Using socket.io in a Django template without the need for the node.js service or socket.io.js file

I am working on a Django app that requires real-time push to clients. I have decided to use node.js and socket.io as it is considered the easiest platform for achieving this functionality. To implement this, I have included the socket.io framework code in ...

The canvas could not be loaded properly in THREE.Texture()

I'm having trouble with adding an image onto the side of a cube that I'm creating. The image loads onto the canvas, but I'm struggling to incorporate it into the texture. function createPictureCanvas(text, font, foreground, background, xres ...

Transmit progress updates while an Ajax request is in progress

Imagine we have an Ajax call. Here's an example: function delete_mov(id){ $.ajax("delete_mov.php?id="+id ) .success(function(){ $('#message').("Movimento "+id+" correttamente cancellato"); }) .fail(function(){ ...

The modal in Bootstrap V5 refuses to hide using JavaScript unless the window method is utilized

Currently in the process of developing a react application and utilizing standard bootstrap. The command to display a modal and switch to one is functioning properly; but, the command to hide the modal does not work unless I establish it as a property on t ...

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

What is the best method for invoking ajax requests from a service in AngularJS?

I am working on an Employee controller that includes properties such as Id, Name, and Specification. I have created an Employee service which makes an ajax call to retrieve a list of employees. However, every time I make the call, I receive an empty resp ...

The issue of CSS not functioning properly across various page sizes

I have created my toolbar: <header className='toolbar'> <nav className='toolbar_navigation'> ///hamburger: <SideDrawer drawerClicked = {props.drawerClicked} /> ///LOGO ...

Shutting down a React Semantic UI modal using a combination of a button and a close

I've created a Modal where users must fill out forms and save the entered information by clicking a button within the Modal. However, I'm facing an issue - even though I can close the Modal using the open prop on the Modal component, I'm una ...

Ways to display JSON data in Angular 2

My goal is to display a list of JSON data, but I keep encountering an error message ERROR TypeError: Cannot read property 'title' of undefined. Interestingly, the console log shows that the JSON data is being printed. mydata.service.ts import { ...

Steps for constructing an object containing an array of nested objects

I've been working on this problem for some time now, and it's starting to feel like a messy situation that just won't come together. I'm trying to recreate an object with 5 properties and a nested array of objects, but so far, it's ...

The error "req.user is not defined" occurs when accessing it from an Android

I am currently collaborating with an Android developer to create an android app. While my colleague handles the front-end development, I focus on the backend work. Specifically, I have implemented the login and authentication features using node.js, expres ...