What is wrong with the following query where as i want to fetch data from server in JSON format?

Question

I just run into a problem where i can't fetch data from SQL Table running a query. I have a GetData ActionResult in my controller i want to retrieve data in JSON format from the server but i am unable here is the code for the action:

public ActionResult GetData(int pageIndex, int pageSize)
{
    EFDbContext db = new EFDbContext();

    var query = (from c in db.Products
              orderby c.ProductName ascending
             select c)
             .Skip(pageIndex * pageSize)
             .Take(pageSize);
    return Json(query.ToList(), JsonRequestBehavior.AllowGet);
}

In my view i have placed this JQuery Ajax code to get data from the action and then append it to a container defined in the body of my view, here is the code.

<head>
    <title>Infinite Scroll</title>

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">

        var pageSize = 10;
        var pageIndex = 0;

        $(document).ready(function () {
            GetData();

            $(window).scroll(function () {
                if ($(window).scrollTop() ==
                   $(document).height() - $(window).height()) {
                    GetData();
                }
            });
        });

        function GetData() {
            $.ajax({
                type: 'GET',
                url: '/Product/GetData',
                data: { "pageindex": pageIndex, "pagesize": pageSize },
                dataType: 'json',
                success: function (data) {
                    if (data != null) {
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                            data[i].ProductName + "</h2>");
                        }
                        pageIndex++;
                    }
                },
                beforeSend: function () {
                    $("#progress").show();
                },
                complete: function () {
                    $("#progress").hide();
                },
                error: function () {
                    alert("Error while retrieving data!");
                }
            });
        }
    </script>
</head>

I always get

500 (Internal server error)

, any idea?

@TryingToImprove how to check that? Sorry i am new to programming! — , Feb 09 '16 at 08:05
You could use the Chrome Developer tools (https://developer.chrome.com/devtools/docs/network).. What happens if you visits? `/Product/GetData?pageindex=1&pagesize=10` — TryingToImprove, Feb 09 '16 at 08:13
Download [Fiddler](http://www.telerik.com/fiddler) or check the HTTP using your [browsers debugging tools](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code). — Liam, Feb 09 '16 at 08:13
Not related, but you should only send the data that is needed i.e. `select c.ProductName` and then in the loop `data[i]` (not `data[i].ProductName`) — , Feb 09 '16 at 08:22
You can use your browser tools to insect the response (Network tab) which will give you more details about the error that was thrown on the server. — , Feb 09 '16 at 08:41

score 0 · Answer 1 · answered Feb 09 '16 at 08:18

0

Try method: "GET" on your javascript method instead of type: "GET"

answered Feb 09 '16 at 08:18

AdrienTorris

9,111
9
34
52

Have you check your HTTP request ? Maybe your controller's method throws an exception, add a try/catch in your method and launch your app in debug – AdrienTorris Feb 09 '16 at 08:24
i downloaded fiddler even that could find a way how to check http request? – Feb 09 '16 at 08:29
Launch Fiddler2 and execute your application. The request will appear in Fiddler, with the status (column "result") – AdrienTorris Feb 09 '16 at 08:34
Then it is server related, nothing to do with client side script. – jlvaquero Feb 09 '16 at 08:36
1

This is the reason why javascript throw an error, you have a server error. Like `TryingToImprove` said, is the url well formatted like this `/Product/GetData?pageindex=1&pagesize=10` ? Also, add a try/catch to your controller's method to see what happens – AdrienTorris Feb 09 '16 at 08:37
Is your method `GetData` contained in a controller named `Productcontroller` or a controller who has `product` as route template ? – AdrienTorris Feb 09 '16 at 08:41
@Adrien The url is the same as you written. /Product/GetData?pageindex=0&pagesize=10 with a small difference that in your url the page index is 1 but in mine is 0. By the way where to put try and catch and what to do with it? – Feb 09 '16 at 08:41
[Try catch documentation](https://msdn.microsoft.com/en-us/library/0yd65esw.aspx) – AdrienTorris Feb 09 '16 at 08:43
@NaserDostdar You should get a exception of some sort if you vists `/Product/GetData?pageindex=0&pagesize=10`. What happens when you use your browser to see the JSON returned? – TryingToImprove Feb 09 '16 at 08:44

anand · Answer 2 · 2016-02-09T09:32:24.680

-1

Your sending string data instead of int data to controller.

var pageindex = 0;
var pagesize = 10;
$.ajax({
    type: 'GET',
    url: '/Product/GetData',
    data: { pageIndex : pageindex , pageSize : pagesize},
    dataType: 'json',
    .
    .
});

hope this helps

edited Feb 09 '16 at 09:32

answered Feb 09 '16 at 09:26

anand

1,559
5
21
45

You are not asked if you don't know the answer. What is that bro? – Feb 09 '16 at 11:06
you are give integer value to pageindex, but in ajax call your giving like string value and defining it as integer in controller. that is what caused the error 500 – anand Feb 09 '16 at 11:15

What is wrong with the following query where as i want to fetch data from server in JSON format?

2 Answers2