Get the ko.observable array to the server side in asp.net

Question

I have the ajax call below which will do a POST to give me the below data

self.present_conditions = "[{"Township":"12","Range":"21","Section":"111","Acres":"19"}]"

    var data = ko.toJSON(self.present_conditions());
    $.ajax({
        type: "POST",
        url: "/Home/PBHEP",
        contentType: "application/json; charset=utf-8",
        data: data
    }).done(function () {
        alert("Data Saved");
    });

I want to receive this data on my server side at the action result below but I always end up with null value.

[HttpPost]
    public ActionResult PBHEP(string[] data)
    {
        return View();
    }

What should I do here to get that array onto the server side.

Thank you in advance.

`.done()` does not imply the data was saved... what if an exception was thrown or connection lost? — Brad M, Sep 11 '13 at 15:58
Have you tried using fiddler to see what is passed in your post? — Giannis Paraskevopoulos, Sep 11 '13 at 15:58
I am not familiar with fiddler I did debug in my chrome dev tools and see that the "data" has that value — sss111, Sep 11 '13 at 16:02
Besides Fiddler2, also look into Glimpse to see what happens on you server. I believe you don't send anything aspnetmvc considers a string array and you can use Glimpse to see the routing. Both tools are worth investing time in. — LosManos, Sep 11 '13 at 16:04

score 0 · Answer 1 · answered Sep 11 '13 at 16:08

0

You send an array of objects (or set a of key value pair) and server expect an array of String.

So try to change the type argument of the server method, to Dictionary[] or dynamic.

I hope it helps.

answered Sep 11 '13 at 16:08

Damien

8,889
3
32
40

No matter what argument I try I am always having a null – sss111 Sep 11 '13 at 18:57

score 0 · Answer 2 · answered Sep 11 '13 at 18:55

You send key-value array object but receive string array in action of controller: 1) As it mentioned by Damien you need to change your input parameter to Dictionary 2) You need to change you post request and add datatype: "json"

var data = ko.toJSON(self.present_conditions());
$.ajax({
    type: "POST",
    url: "/Home/PBHEP",
    datatype: "json",
    contentType: "application/json; charset=utf-8",
    data: data
}).done(function () {
    alert("Data Saved");
});

I am sorry I tried to use the Dictionary and still have a null value — sss111, Sep 11 '13 at 19:43

score 0 · Answer 3 · answered Sep 11 '13 at 22:22

0

From my experience, when I stringify an array it has the same format as your present_conditions but what I receive on the server side isn't an array but individual fields. If you change your controller to

[HttpPost]
public ActionResult PBHEP( string Township, string Range, string Section, string Acres)
{
    return View();
}

those fields should be populated with the matching data from the array that was sent. Hopefully this helps.

answered Sep 11 '13 at 22:22

Matt Bodily

6,403
4
29
48

I still see that the form data is [{"Township":"23","Range":"23","Section":"23","Acres":"23"}]: but I am still having nulls for each field – sss111 Sep 12 '13 at 14:06
Just looked closer at my string after I stringify it. It is the same except for the brackets you have around the string. The only other difference I see was mentioned in another answer (adding dataType: 'json' to the ajax call). I am not sure how you create your string. I build mine like JSON.stringify({ Township: $('#Township').val(), etc – Matt Bodily Sep 12 '13 at 14:43
The data I have is a row in a table from the UI and all rows are in an ko.observable array as I mentioned in my code above the self.present_conditions() is that array and when I check my headers in the dev tools I see that this is being passed as a Request response from var data = ko.toJSON(self.present_conditions()); as I mentioned earlier – sss111 Sep 12 '13 at 17:24
when i further use JSON.stringify(data) it will just add up "" to the whole string but neither of them is retrieved at the controller even when I use string[] or a dictionary or a string. – sss111 Sep 12 '13 at 17:26
I am out of ideas :(. I just did a search for sending an array to a controller and found the link below, they recommended setting jQuery.ajaxSettings.traditional = true. Good luck! http://stackoverflow.com/questions/5489461/pass-array-to-mvc-action-via-ajax – Matt Bodily Sep 12 '13 at 17:40

score 0 · Answer 4 · answered Sep 18 '13 at 15:14

0

I faced the same issue and then I fixed it by passing the array as a JSON serialized string.

$.ajax({
    type: 'GET',
    url: '/Controller/ActionMethod/',
    data: { idsJSON: ko.toJSON(ids) },

From the server side, I received it to deserialize an array

public JsonResult ActionMethod(string idsJSON)
{
    List<long> ids = JsonConvert.DeserializeObject
        <List<long>>(idsJSON);

answered Sep 18 '13 at 15:14

Stallin

1

I havent tried this but I did solve it. Thank you for the suggestion – sss111 Sep 18 '13 at 16:16

score 0 · Accepted Answer · answered Sep 18 '13 at 16:15

SO here is the what happened I finally gave up on doing the post with ajax and i used a simple jquery post and it,now I am able to get the values in my controller

JS:

    self.submit_conditions = function () {
    var PC_data = ko.toJSON(self.present_conditions());
    var FC_data = ko.toJSON(self.future_conditions());

    $.post("/Home/PBHEP", { "PC": PC_data, "FC": FC_data});
}

Controller

 [HttpPost]
    public ActionResult PBHEP(string PC,string FC)
    {
        JavaScriptSerializer ser = new JavaScriptSerializer();
        List<Conditions> PC_rows = ser.Deserialize<List<Conditions>>(PC);
        List<Conditions> FC_rows = ser.Deserialize<List<Conditions>>(FC);
    }

Hope this helps some one. Thank you all for the help.

Get the ko.observable array to the server side in asp.net

5 Answers5