jQuery ajax webmethod error

Question

I have a webmethod returning an object and I am having difficulty accessing the object returned from the jQuery Ajax method. I would like to access the HighlightResults and display in a repeater. I keep getting the error: There was an error processing the request. Internal server error.

My object is:

  public class SearchResults
  {
    internal SearchResults()
    {

    }

    public virtual IQueryable<Document> DocumentResults { get; internal set; }
    public virtual IQueryable<Page> PageResults { get; internal set; }
    public virtual IQueryable<Word> WordResults { get; internal set; }
    public ICollection<String> HighlightResults { get; internal set; }
    public int QueryTime { get; internal set; }
    public int TotalResults { get; internal set; }

}

And my ajax function:

var query = String($('[id$=txtSearch]').val());            
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Viewer.aspx/GetHighlightResults",
            dataType: "json",
            data: JSON.stringify({docID: docid, query: query, 
                  pageNumber: 1, resultsPerPage: 10}),
            success: function (response) {
                alert("Success!!");                 
                var data = response.d;

                // none of these are displaying....
                alert(String(data));
                alert(String(data.HighlightResults));
                alert(String(data.HighlightResults[0]));

                $.each(data, function(index, item) {
                    alert(item);
                    alert(item.HighlightResults);

                    $("#search-results").append("<b>" + item + "</b>");
                })
            },
            error: function (xhr, status, error) {
                alert("responseText=" + xhr.responseText + 
                      "\n textStatus=" + status + "\n errorThrown=" + error);
            }
        });

And finally, my web method:

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static SearchResults GetHighlightResults(String docID, String query, 
                  String pageNumber, String resultsPerPage)
    {
        SearchResults results = null;
        try
        {
            ArchiveSearcher searcher = new ArchiveSearcher();
            if (!String.IsNullOrEmpty(query) && Convert.ToInt32(docID) > 0 && 
                Convert.ToInt32(pageNumber) > 0 && Convert.ToInt32(resultsPerPage) > 0)
            {
                results = searcher.SearchDocument(Convert.ToInt32(docID), query, 
                Convert.ToInt32(pageNumber), Convert.ToInt32(resultsPerPage)); 
            }
        }
        catch (Exception ex)
        {
            // Log the exception.
            ArchiveViewer.Logic.ExceptionUtility.LogException(ex, "GetSearchResults in Viewer.aspx.cs");
        }
        return results;
    }

Help is appreciated.

EDIT: If I return the ICollection<String> Highlight results from the web method, I can access it from the jquery ajax function using:

success: function (response) {
    var data = response.d;
    $.each(data, function(index, item) {
         alert(item);
....

I think my issue is related to how I access the entire SearchResults object. Any ideas as to what I'm doing wrong?

EDIT 2: I've commented out everything in my ajax success function and it still fails. So the issue is with passing back the class. Any ideas?

Answer 1

Ahhh!!! I figured it out. Thank you Zaki, you nudged me in the right direction!!

I didn't have any errors in the web method, but exception occurred when my object was being serialized to JSON. The issue is with serializing IQueryable<T> in my class. I've changed it to List<T> and everything is working now. (A day of my life gone!)

Just to be complete, the correct way to access the objects being returned in the client is:

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Viewer.aspx/GetSearchResults",
    dataType: "json",
    data: JSON.stringify({ docID: docid, query: query, pageNumber: 1, resultsPerPage: 10 }),
    success: function (response) {
        var data = response.d.HighlightResults;
        $.each(data, function (index, item) {
            $("#search-results").append("<b>" + item + "</b>");
        })
    } 
......