The values of nested objects are not being passed as parameters from the AJAX call to the action method

How can I ensure that the nested object values in the parameter are passed correctly to the action method in the controller along with the full object?

When calling the AJAX method, the values in the object inside the red ring on the pictures do not get passed to the controller.

mapHub.client.requestForHelpInClient = function (requestDetails) {
                debugger;
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("RequestPartialView", "Supplier")',
                    data: requestDetails,
                    success: function (response) {
                        $("#Request").html(response);
                    },
                    error: function (error) {
                        console.log(error);
                    }
                });                
            }

https://i.stack.imgur.com/1HCaP.png

function requestForHelp() {
            requestDetails = {
                CustomerId: @Model.Customer.CustomerID,
                NumberOfHours: $("#numberOfHoursTextBox").val(),
                TypeOfMachine: $("#typeOfMachineDropDownMenu").children("option:selected").val(),
                CustomerLocation: CustomerPosition,
                NearestSupplierList: nearestSuppliers
                //StartDate: $( "#startDate" ).val(),
                //EndDate: $( "#endDate" ).val(),
            }
            mapHub.server.requestForHelp(requestDetails);


public class RequestDetails
{
    public int CustomerId { get; set; }
    public Customer Customer { get; set; }
    public MapClient CustomerLocation { get; set; }
    public int NumberOfHours { get; set; }
    public string TypeOfMachine { get; set; }
    public List<MapClient> NearestSupplierList { get; set; }    
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

The signalr hub

public void RequestForHelp(RequestDetails requestDetails)
    {

        requestDetails.Customer =   Service.CustomerService.GetCustomerById(requestDetails.CustomerId);
Service.SupplierService.GetAspNetUserIDBySupplierID(requestDetails.NearestSupplierList[0].ClientId);

Clients.User(supplierAspNetUserID).requestForHelpInClient(requestDetails);
    }

Answer №1

Here are two important adjustments for you to make.

  1. The current method being used is GET, which does not support data transfer. Switch both the controller and ajax from GET to POST.

  2. Include a [FromBody] tag in the controller function. The data binder may require this, depending on your MVC version.

Controller:

[HttpPost]
public ActionResult RequestPartialView([FromBody]RequestDetails reqDetails)
{
   // code goes here 
}

Ajax:

mapHub.client.requestForHelpInClient = function (requestDetails) {
    $.ajax({
        type: "POST",
        url: '@Url.Action("RequestPartialView", "Supplier")',
        data: requestDetails,
        success: function (response) {
            $("#Request").html(response);
        },
        error: function (error) {
            console.log(error);
        }
    });  
}

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

The transformation rotation applied in CSS must not have any impact on the styling of my span and paragraph

Snippet: .details-section{ background-color: rgb(83, 83, 83); height: 200px; } .icon-container{ border: 2px solid #c49b63; width: 90px; height: 90px; transition: 0.5s ease; } .box i{ font-size: 60px; color: black; margin-top: 13px ...

"Can you tell me the location of Microsoft's built-in dependency injection library within

In my project using .NET 4.5.2 and Visual Studio 2015, I require a Microsoft dependency injection library that is built-in. While attempting to add the Microsoft.Practices.Unity reference, I encountered difficulties locating it. I thoroughly checked both ...

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

Subscriber client successfully activated and operational via the command line interface

I have incorporated a script into my PHP file that reads the Pusher channel and performs various actions when a new event occurs on the specified channel. If I access the following URL in my browser: http:/localhost/pusher.php and keep it open, the p ...

Printing incorrect value in $.ajax call

I came across this code that I have been working on: var marcas = { nome: '', fipeId: '' }; var marcasVet = []; var select; $.ajax({ dataType: "json", url: 'http://fipeapi.wipsites.co ...

The functionality of JavaScript on an icon that is supposed to expand and collapse a table is not functioning properly when the enter

On this particular page, I have a toggleable table of information that expands and collapses when the user clicks on a clickable +/- icon. However, there seems to be an issue where if the user tabs to the icon and tries to expand/collapse it by pressing en ...

The @Input decorator in Angular 2/4 is designed to only transfer fundamental values and not collections or complex data

I have encountered an issue while attempting to use @Input with a list of objects, where the @Input variable ends up being undefined. What is functioning properly can be seen in home.component.html: <p> <it-easy [mycount]="countItem" (result ...

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

Using jQuery to manage multiple page requests on a single page

In my current project using Codeigniter, I encountered a challenge of loading multiple paginations on one page. After exploring various forums and websites, I decided to implement multiple methods and views to achieve this using jQuery. The code snippet I ...

Is there a way to capture real-time console output in an ExpressJS application while a script is running?

I'm facing a challenge in integrating the output of a bash script into an ExpressJS application to then send the data to a client. To address this, I have developed a simplified version of my actual script for testing purposes. My goal is to capture a ...

Unable to recreate the Jquery Mobile Autocomplete demonstration

Attempting to recreate a demo using my own remote data source: The HTML page mirrors the demo, with one change: url: "http://localhost/sample.php", Here is the dummy remote data source sample.php <?php $a = array('apple', 'mango&apo ...

Drawing graphics on an HTML5 Canvas with the power of React Native

How should html5 canvas be utilized in react native? Is it necessary to utilize webview, a plugin, or can plain html canvas be used in react native code? Appreciate your help! ...

Trouble with incorporating numbers into Titanium

I have a query about adding a decimal number to a latitude value obtained using forwardGeocoder. Here's the code snippet I am referring to: Ti.Geolocation.forwardGeocoder(textField.value, function(e) { var a = e.latitude; var ...

Tips for adjusting the color of boxes within a grid

I've built a grid containing multiple boxes, each identified with an id of box + i. However, I'm encountering difficulties when attempting to implement an on-click function to change the color of each box. Below is the code snippet in question: f ...

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...

Ways to examine attributes assigned in the controller.$onInit function in AngularJS

In a certain scenario, I am initializing some variables in the controller's $onInit method. How can I verify that these properties are being set correctly? Controller ctrl.$onInit = function () { ctrl.devices = _.cloneDeep(ctrl.formDevices); }; ...

What is the best way to confirm if a specific input is included in a JSON array?

This data belongs to me Each time a user inputs a code, it must be unique. If the value already exists, an error message should be displayed indicating that the branch code already exists. branches: [ { code: "test", na ...

Ways to convert an asynchronous operation to synchronous in JavaScript

Currently in the process of developing an eslint plugin, I have come across a particular issue. My goal is to implement real-time changes to the configuration file by making an HTTP request to retrieve the JSON configuration. When attempting to execute co ...

Tips on transitioning a Node.js application from JavaScript to TypeScript incrementally

I have a JavaScript node application that has grown quite large and I am considering migrating to TypeScript for faster development and easier code maintenance. I have installed TypeScript along with the node and mocha types using the following commands: ...