Display JSON Array Data Returned from Controller in Asp.Net MVC

Question

I have an action method in my controller as;

public ActionResult IndexWithJson(int Id, int? page)
{
    int pageSize = 2;
    int pageNumber = (page ?? 1);

    using (var adsRepo = new AdvertisementRepository())
    {
        if (Id > 0)
        {
            return Json(new{
                Data = adsRepo.GetAdvertisementBySubCategoryId(Id).ToPagedList(pageNumber, pageSize)
            }, JsonRequestBehavior.AllowGet);
        }
        else
        {
            return View("404");
        }

    }
}

the result output in the browser is; As you can see in the picture, I have an wrap up the data (in controller as well) with an object called "Data".
Now when I call this using jQuery like this;

var serviceBase = "/catalog/";

$.ajax({
    url: serviceBase + 'IndexWithJson',
    contentType: 'application/json; charset=utf-8',
    dataType:'json',
    data: { Id: categoryId, page: page },
    success: function (data) {
        alert(data.Title);
    }
});

I see null in alert box.
What is the problem here?
How do I actually display just one property (see the picture fro properties) in alert box.
Is my dataType attribute right in jQuery ajax function? (I guess it should be JSONP

Answer 1

try this:

data.Data[0].Title

This should be working

Answer 2

Try

alert(data[0].Title)

It's an array.

To display all you could do something like this:

$.each(data, function(index, value) {
    $('#somediv').append(value.Title);
});

Answer 3

I think you need to use JSON.stringify to send arguments(in your ajax call to controller. Something like
data: JSON.stringify({ Id: categoryId, page: page }),
Are you getting Id and page values at controller end properly? I think your result of ajax call is coming as null i.e. data = null at client end.