CODEWITHSUNDEEP
javascriptc#ajaxasp.net-corerazor
Warbler
Warbler

Reputation: 71

AJAX call is sending null data to controller action

I'm currently writing a website using ASP.NET Core, HTML, and Javascript. Currently, I have a page of the website that loads a chart of Equipment and stats on them. Below the chart is an area where the user can select specific equipment whose details they want to view. This info is then sent to the controller, which returns info back to the View about them.

However, while I know that the AJAX call does go to the controller when I look at it with breakpoints, and I know the value of my selected equipment is corrected, it always returns a "null" string value to the controller and I don't know why.

I've attempted a couple of different ways of writing it according to code I've seen on SO. My code was similar (structurally speaking) to the code on this page. I attempted the solution, which is the code I have now, but it didn't seem to change anything.

Here is my current javascript code:

function filterInterventions() {


        var equipment = $(".equipmentCheckboxes:checkbox:checked").map(function () {
            return this.value;
        }).get();




        $("#IntrvTable tbody tr").remove();


        $.ajax({

            type: "GET",

            data: equipment,
            cache: false,


            //url: "GiveData?jsonString=",
            url: '@Url.Action("GiveData")',
            success: function (data) {
                if (data) {
                    alert("success");
                    var parent = $("#parent");
                    parent.empty();
                    parent.append(data);
                }
            }
        });
    }

And here is my controller code:

public ActionResult GiveData(string jsonString){
    //do stuff....
    return View("RawData", myModel);
}

When I step through it in the browser and on my IDE, I know that the equipment in the actual javascript is correct. For example, if I selected equipment 'AA' and 'BB' to look at, I know I'm sending in ["AA/", "BB/"]. But I just cannot get the "jsonString" in the controller action to be non-null.

I thought it might be because I'm sending in an array, but the things I've found online about turning on traditional have also not helped. I would love any help. Thanks.

Upvotes: 1

Views: 1247

Answers (2)

Steve Py
Steve Py

Reputation: 34773

I believe what you'd be looking for would be:

data: { 'jsonString': JSON.stringify(equipment) }

Normally though JSON would be used for an object rather than an array of strings, and the method signature would reflect the object definition of the data being passed as a POCO class. If you just want an array then something like this should work:

data: { 'equipment' : equipment }

with the controller action signature: public ActionResult GiveData(string[] equipment)

Edit: JSON / POCO example

For a typical JSON example let's say you have a view model representing editing a new or existing order. This may have an Order ID, an order date, a customer ID, delivery address details, and a list of order lines. (product ID, quantity) On the client side you would construct a JS object view model for the data and then compose that to JSON to look something like:

{
  "order": {
       "orderId": 1234,
       "orderDate": "2019-07-21",
       "customerId": 216,
       "deliveryAddress": {
            "street": "216 Cuckoo Crescent"
            "city": "Sydney"
       }
       "orderLines": {
            { "productId": 22, "quantity":1 },
            { "productId": 15, "quantity":3 }
       }
    }
}

where the Ajax call data component would look like:

data: { 'order': orderJson }

If the order data was just a Javascript object then you would use JSON.stringify(order) to pass the JSON representation.

In your server you would define these view models:

[Serializable]
public class OrderViewModel
{
    public int? OrderId { get; set; }
    public DateTime OrderDate { get; set; }
    public int CustomerId { get; set; }

    public AddressViewModel Address { get; set;}
    public ICollection<OrderLineViewModel> OrderLines { get; set; } = new List<OrderLineViewModel>();
}

[Serializable]
public class AddressViewModel
{
    public string Street { get; set; }
    public string City { get; set; }
    // ...
}

[Serializable]
public class OrderLineViewModel
{
    public int ProductId { get; set; }
    public int Quantity { get; set; }
}

In your method signature you would like: public ActionResult CreateOrder(OrderViewModel order)

ASP.Net will accept the JSON object and your code can work with the POCO classes automatically. This is pulling from memory, and might require/involve a library like JSON.Net with some attribute goodness or extra steps so there may be some tweaking and config needed, especially to accommodate Pascal vs. Camel casing conventions between the JS and C# code. The onus though is on the developers to keep the POCO definitions and JS objects in-sync, and ensure the data types are compatible.

Upvotes: 1

Artyom Ignatovich
Artyom Ignatovich

Reputation: 601

It is now quiet a default behavior - to map raw data to plain string.

Instead of mapping to string it is usually a better way - to map the JSON to the corresponding class type.

If raw data is the goal - here might be something you are looking for.

Upvotes: 0

Related Questions