What is the best way to send data to an API controller using AJAX in an MVC framework?

Question

What is the best way to send data to an API controller using AJAX in an MVC framework?

I am facing an issue with POSTing a string data to the api controller in mvc using ajax. Despite my efforts, the data does not seem to reach the api controller. Here is what I have attempted:

This is the JavaScript code I have used:

        
        jQuery(function () {
            $(function () {
                $(".listing-listing").html("");
                
                const jsonData = { PageNom: 1, ShowInPage: 25 };
                var data = JSON.stringify(jsonData);
                
                $.ajax({
                    url: '/Api/apiListProduct/AjaxSearchAsync',
                    type: 'POST',
                    data: data,
                    dataType: 'jsonResult',
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        if (result.Data.Succeed) {
                            result.Data.ProductLst.forEach((product) => AddProduct(product));
                            //$('.PaginationCell').html(result.Data.Pagination);
                        }
                    },
                    error: function (e) {
                        // handle error
                    }
                });
            });
        });

And here is the corresponding api controller:


        public class apiListProduct : ApiController {
            [System.Web.Http.HttpPost]
            public async System.Threading.Tasks.Task<System.Web.Mvc.JsonResult> AjaxSearchAsync()
            {
                string raw = "";
                using (var contentStream = await Request.Content.ReadAsStreamAsync())
                {
                    contentStream.Seek(0, System.IO.SeekOrigin.Begin);
                    
                    using (var sr = new System.IO.StreamReader(contentStream))
                    {
                        raw = sr.ReadToEnd();
                    }
                }
            }
        }

Your assistance in resolving this issue with the web API route for the api controller will be greatly appreciated. Thank you.

javascript c#ajax asp.net-mvc asp.net-core

Answer 1

Answer №1

I am facing an issue with posting string data to an API controller in MVC using Ajax. Despite my attempts, the data does not reach the API controller. How can I successfully send data to the API controller through Ajax in MVC?

Based on your explanation and code snippet, it would be helpful if you provide the complete API controller code and specify the version of ASP.NET Core you are using.

After reviewing your code, I have identified two potential problems.

Firstly, the definition of your API route is crucial for this process to work correctly.

Another issue lies in the usage of

Request.Content.ReadAsStreamAsync

. Instead of this, try reading the request body content using HttpContext.Request.Body, as it accesses the request body Stream.

To resolve this problem, I suggest trying the following approach that has been successful:

Here is a practical example of how you can send your Ajax request to the API controller:

API Controller:

[Route("api/[controller]")]
[ApiController]
public class ApiListProductController : ControllerBase
{
    [HttpPost]
    [Route("AjaxSearchAsync")]
    public async Task<IActionResult> AjaxSearchAsync()
    {
        string raw = "";
        using (var contentStream = HttpContext.Request.Body)
        {
            using (var sr = new System.IO.StreamReader(contentStream))
            {
                raw = await sr.ReadToEndAsync();
            }
        }
        return Ok(raw);
    }
}

Note: If your API project and MVC project are separate, you can remove the route annotation

[Route("AjaxSearchAsync")]

. However, if they are within the same project, use an explicit route. Please refer to route details here.

Request Payload:

Request Body:

Output:

Alternatively, you can use a strongly-typed model to retrieve the parameters posted from the Ajax request. Here is an example of such a model:

public class SearchModel
{
    public int PageNumber { get; set; }
    public int ItemsPerPage { get; set; }
}

Controller:

[HttpPost]
[Route("AjaxSearchAsyncApproachTwo")]
public async Task<IActionResult> AjaxSearchAsyncApproachTwo(SearchModel searchModel)
{

    return Ok(searchModel);
}

Request Payload:

Request Body:

Note: Based on my test, your JavaScript/jQuery code appears to be correct. You can choose either of the above methods to read the request body or request parameters. Additionally, please refer to this official document for more information.

Answer 2

I am facing an issue with posting string data to an API controller in MVC using Ajax. Despite my attempts, the data does not reach the API controller. How can I successfully send data to the API controller through Ajax in MVC?

Based on your explanation and code snippet, it would be helpful if you provide the complete API controller code and specify the version of ASP.NET Core you are using.

After reviewing your code, I have identified two potential problems.

Firstly, the definition of your API route is crucial for this process to work correctly.

Another issue lies in the usage of

Request.Content.ReadAsStreamAsync

. Instead of this, try reading the request body content using HttpContext.Request.Body, as it accesses the request body Stream.

To resolve this problem, I suggest trying the following approach that has been successful:

Here is a practical example of how you can send your Ajax request to the API controller:

API Controller:

[Route("api/[controller]")]
[ApiController]
public class ApiListProductController : ControllerBase
{
    [HttpPost]
    [Route("AjaxSearchAsync")]
    public async Task<IActionResult> AjaxSearchAsync()
    {
        string raw = "";
        using (var contentStream = HttpContext.Request.Body)
        {
            using (var sr = new System.IO.StreamReader(contentStream))
            {
                raw = await sr.ReadToEndAsync();
            }
        }
        return Ok(raw);
    }
}

Note: If your API project and MVC project are separate, you can remove the route annotation

[Route("AjaxSearchAsync")]

. However, if they are within the same project, use an explicit route. Please refer to route details here.

Request Payload:

Request Body:

Output:

Alternatively, you can use a strongly-typed model to retrieve the parameters posted from the Ajax request. Here is an example of such a model:

public class SearchModel
{
    public int PageNumber { get; set; }
    public int ItemsPerPage { get; set; }
}

Controller:

[HttpPost]
[Route("AjaxSearchAsyncApproachTwo")]
public async Task<IActionResult> AjaxSearchAsyncApproachTwo(SearchModel searchModel)
{

    return Ok(searchModel);
}

Request Payload:

Request Body:

Note: Based on my test, your JavaScript/jQuery code appears to be correct. You can choose either of the above methods to read the request body or request parameters. Additionally, please refer to this official document for more information.

What is the best way to send data to an API controller using AJAX in an MVC framework?

Answer №1

Similar questions

The AngularJS framework is failing to disable the autocomplete feature for the input field with a password type

Creating a personalized .hasError condition in Angular 4

Creating a template based on an object type in JavaScript with Angular: A step-by-step guide

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Click on the link to open it in a SharePoint modal and populate it with the value from the

How to fetch files using URL in JavaScript

I can't seem to figure out why I keep encountering a runtime error whenever I attempt to create a basic route in the latest version of nextjs, version 13.5

Updating ng-model with the values from a property in a collection in AngularJS

Guide on utilizing JSON data sent through Express res.render in a public JavaScript file

Console log displays varied outputs for identical arrays

Creating an alarm clock with customizable time and date formats using ReactJS with Material-UI integration

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

Utilizing a third-party API within the next/api endpoint

The spotlight is shifting towards validating a datepicker field using jQuery

Issue with jQuery week calendar: Existing data not loading correctly into the calendar

Is it possible to utilize the addition assignment operator (`+=`) to modify the `transform:rotate('x'deg);` CSS property using

Switch out the arrow icon in the dropdown menu with an SVG graphic

Mootools powerfully handles form submissions

How to execute a system command or external command in Node.js

Building a Mongoose Schema with an Array of Object IDs: A Step-by-Step Guide