How can I pass and access an array of objects on the server-side using AJAX in the C#.net Web-Pages with WebMatrix environment?

Question

Firstly, I have already tried to find this answer on my own. I found a couple of pages on the topic:

http://forums.asp.net/t/1934999.aspx?Convert+any+json+string+to+an+array+or+object+in+c+ (This one uses a JSON string, and all, but it is an object and not an array of objects, so it doesn't seem to apply here).

Convert json to a C# array? (Here, it seems to have relevant answers, but none of them have helped me [probably because I am not handling this correctly on the server-side]).

Now, I have the following simple $.ajax request in jQuery:

$("#savePageBtn").click(function () {
    $.ajax({
        url: "/AJAX Pages/Compute_Save_Edit_Page.cshtml",
        async: false,
        type: "POST",
        data: { "objectArr": jsonArr }, //more on exactly what jsonArr contains below...
        success: function (response) {
            console.log(response);
        },
        error: function (jqXHR, textStatus, error) {
            alert("Oops! It appears there has been an AJAX error.\n\nPlease check the page you were attempting to edit.\n\n Error: " + textStatus + ".\n\nError Type: " + error + ".");
        }
    });
});

I have also tried: data: JSON.stringify(jsonArr), for the data line, but they both give me internal server errors of the code 500 when I try to access a property of a given object. Reading these errors, I can tell that the data is in "string" format (with JSON syntax, I'm sure) so I am not able to access the data as I would like. Even after I try to use C#'s Json.Decode method.

Here is the server-side code I have so far (Compute_Save_Edit_Page.cshtml):

@{
    Layout = "";

    if (IsAjax)
    {
        var reader = new StreamReader(Request.InputStream);
        var json = reader.ReadToEnd();
        var objectArr = Json.Decode(json);

        for (var i = 0; i < objectArr.Length; i++)
        {
<!--      -->@:@objectArr[i].objectName;
<!--      --><br/>
        }
    }
    else
    {
        Context.RedirectLocal("~/");
    }
}

I think I know what I need, but I can't seem to get anything to convert the JSON string back into an array of objects, like I want.

In jQuery I have been accessing this exactly like you would expect. To get the object name of an object at the first index, for instance, I would type: jsonArr[0].objectName

I would like to be able to get this accessible in much the same way once I have it on the server-side, but nothing I try works.

Additional Info:

It's appropriate to mention that the array of objects contains objects that don't all have the same properties (which is why trying the top answer in the second link I provided won't work, if I'm even understanding it correctly).

Here is a sample of a few objects in the array of objects (in no real particular syntax):

Object { 
    caption: "", 
    fileName: "Okmulgee_Library.jpg",
    objectID: "176",
    objectName: "Image",
    pageOrder: "1",
    size: "medium"
}

Object {
    alignment: "center",
    bold: false,
    italic: false,
    objectID: "177",
    objectName: "Paragraph",
    pageOrder: "2",
    underline: false,
    value: "For more information about the Okmulgee Public Library, call (918)-756-1448."
}

Object {
    bold: false,
    italic: false,
    objectID: "179",
    objectName: "Text",
    pageOrder: "3",
    underline: false,
    value: "Or visit their website at"
}

UPDATE FROM CHROME'S Network > Headers

Request URL:http://localhost:10226/AJAX%20Pages/Compute_Save_Edit_Page.cshtml
Request Method:POST
Status Code:500 Internal Server Error
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Cookie:.ASPXAUTH=AEBDE22DCB622D796F8897945434328CECAEB25BF5D24CBA9CB1C32A58D82BC5CF68F33EF2CA7012DECFE87F91C39E7471DE7C2903CE476DF8781E0B0CE862C8AF10A23CD1B52BDFBA9042290426BBD024663A2D95C02A54EBA9E98D3DE25A44415395F5CDAA1E65A0EDDC3D9598F2A7660E3376159D82986E3E4EFEB05F150D02DC788D8F0FC0D62FF8B80708D05A276789A3D54DC79F598D57D19990426F68
Host:localhost:10226
Origin:http://localhost:10226
Referer:http://localhost:10226/CMS%20Interface/EditPages/E-UtilityBilling.cshtml
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:private
Content-Length:5732
Content-Type:text/html; charset=utf-8
Date:Fri, 25 Oct 2013 19:00:34 GMT
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcVXNlcnNcY3JhZGViYXVnaFxEb2N1bWVudHNcTXkgV2ViIFNpdGVzXE9rbXVsZ2VlIE9ubGluZSA0LjBcQUpBWCBQYWdlc1xDb21wdXRlX1NhdmVfRWRpdF9QYWdlLmNzaHRtbA==?=

Answer 1

I think you'll find your data in the Request.InputStream. Try the following:

var reader = new StreamReader(Request.InputStream);
var json = reader.ReadToEnd();
var objArray= Json.Decode(json);

You will need to convert your Javascript object to JSON first by using JSON.stringify on it:

 data: JSON.stringify(jsonArr),

Answer 2

Okay, I think I've finally got it.

I decided to try something I had tried previous to posting this question: JSON.stringify in the AJAX call (apparently jQuery doesn't automatically format the data based on contentType nor simply detecting the kind of data that it is).

The problem before was that I had NO idea that I would be able to find my data on the server-side with Request.InputStream. In fact, I am still not clear as to why or when data could be found in this manner or even what determines that it should be stored there as opposed to something that could be called by, say, Request.Form["objectArr"], etc.

So, when I tried to use JSON.stringify this time, I combined that with what Mike had posted in his answer for how to retrieve this server-side (i.e., using the Request.InputStream method).

Once I used both (as well as, removing the identifier in the data: portion of the ajax call), I started to see and even return relevant data.

In short, here is what I have now that works...

The jQuery AJAX code:

$.ajax({
    url: "/AJAX Pages/Compute_Save_Edit_Page.cshtml",
    async: false,
    type: "POST",
    data: JSON.stringify(jsonArr),
    success: function (response) {
        console.log(response);
    },
    error: function (jqXHR, textStatus, error) {
        alert("Oops! It appears there has been an AJAX error.\n\nPlease check the page you were attempting to edit.\n\nError Type: " + error + ".");
    }
});

And here is the server-side (C#) code that simply returns two properties of each object in the array:

@{
   Layout = "";

    if (IsAjax)
    {
        var reader = new StreamReader(Request.InputStream);
        var json = reader.ReadToEnd();
        var objectArr = Json.Decode(json);

        for (var i = 0; i < objectArr.Length; i++)
        {
@:@objectArr[i].objectName - @objectArr[i].objectID
        }
    }
    else
    {
        Context.RedirectLocal("~/");
    }
}

So, if I understand it correctly (and PLEASE correct me if I'm wrong), you CAN'T just send an array of objects to the server with AJAX. In fact, I wouldn't be surprised if you couldn't even send a array, at all. But you CAN send a simple variable like string or int. So, using JSON.stringify, I am using a function that translates the array of objects into one large JSON string, reading the input stream on the other side with C#, and then using another C# method to parse the JSON string back into an array of objects, which was how I wanted the data.

Thanks to all who helped me through this one, and for what it's worth, I really feel like I even learned something about the very purpose of JSON in the web environment today.