How to get a list from mvc controller to view using jquery ajax

Question

I need to get a list from mvc controller to view using jquery ajax. how can i do that. this is my code. Its alerting error message.

In Controller

 public class FoodController : Controller
    {
       [System.Web.Mvc.HttpPost]
        public IList<Food> getFoodDetails(int userId)
        {
            IList<Food> FoodList = new List<Food>();

                FoodList = FoodService.getFoodDetails(userId);

                return (FoodList);
        }
    }

In view

function GetFoodDetails() {
        debugger;
        $.ajax({
            type: "POST",
            url: "Food/getFoodDetails",
            data: '{userId:"' + Id + '"}',
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                debugger;
                alert(result)
            },
            error: function (response) {
                debugger;
                alert('eror');
            }
        });

    }

enter image description here

Change the method return type to ActionResult, and return your list as `return Json(new { MyList = FodList}, JsonRequestBehavior.AllowGet);` — markpsmith, Aug 14 '14 at 09:29

score 19 · Accepted Answer · edited Nov 08 '18 at 09:48

19

Why you use HttpPost for GET-method? And need return JsonResult.

public class FoodController : Controller
{

    public JsonResult getFoodDetails(int userId)
    {
        IList<Food> FoodList = new List<Food>();

        FoodList = FoodService.getFoodDetails(userId);

        return Json (new{ FoodList = FoodList }, JsonRequestBehavior.AllowGet);
    }
}


function GetFoodDetails() {
    debugger;
    $.ajax({
        type: "GET",
        url: "Food/getFoodDetails",
        data: { userId: Id },
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            debugger;
            alert(result)
        },
        error: function (response) {
            debugger;
            alert('eror');
        }
    });

}

edited Nov 08 '18 at 09:48

Community

1
1

answered Aug 14 '14 at 09:32

Igor Semin

2,486
1
20
21

This solution worked absolutely fantastic for me. When I presented this solution to the lead developer he asked me "Why JsonRequestBehavior.AllowGet?". Well sorry, no idea, I said. He suggested me to research to get an understand about it and voilà much clear now: http://stackoverflow.com/a/8464685/3812244 – AuroMetal Mar 30 '16 at 08:46
@IMAK, why not? It anyway will be serialized to array in json object. – Igor Semin Mar 02 '18 at 07:18

score 6 · Answer 2 · answered Aug 14 '14 at 09:35

you can do like this , return json data and print it

Read full tutorial : http://www.c-sharpcorner.com/UploadFile/3d39b4/rendering-a-partial-view-and-json-data-using-ajax-in-Asp-Net/

public JsonResult BooksByPublisherId(int id)
{
      IEnumerable<BookModel> modelList = new List<BookModel>();
      using (DAL.DevelopmentEntities context = new DAL.DevelopmentEntities())
      {
            var books = context.BOOKs.Where(x => x.PublisherId == id).ToList();
            modelList = books.Select(x =>
                        new BookModel()
                        {
                                   Title = x.Title,
                                   Author = x.Auther,
                                   Year = x.Year,
                                    Price = x.Price
                          });
            }
    return Json(modelList,JsonRequestBehavior.AllowGet);

        }

javascript

$.ajax({

                cache: false,

                type: "GET",

                url: "@(Url.RouteUrl("BooksByPublisherId"))",

                data: { "id": id },

                success: function (data) {

                    var result = "";

                    booksDiv.html('');

                    $.each(data, function (id, book) {

                        result += '<b>Title : </b>' + book.Title + '<br/>' +

                                    '<b> Author :</b>' + book.Author + '<br/>' +

                                     '<b> Year :</b>' + book.Year + '<br/>' +

                                      '<b> Price :</b>' + book.Price + '<hr/>';

                    });

                    booksDiv.html(result);

                },

                error: function (xhr, ajaxOptions, thrownError) {

                    alert('Failed to retrieve books.');

                }

            });

score 1 · Answer 3 · answered Aug 17 '14 at 10:15

The reason why i am not getting the result was.. I forgot to add json2.js in the library

 public class FoodController : Controller
    {
       [System.Web.Mvc.HttpGet]
        public JsonResult getFoodDetails(int userId)
        {
            IList<Food> FoodList = new List<Food>();

            FoodList = FoodService.getFoodDetails(userId);

            return Json (FoodList, JsonRequestBehavior.AllowGet);
        }
    }

function GetFoodDetails() {
    debugger;
    $.ajax({
        type: "GET",
        url: "Food/getFoodDetails",
        data: { userId: Id },
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            debugger;
            alert(result)
        },
        error: function (response) {
            debugger;
            alert('eror');
        }
    });

}

Kartikeya Khosla · Answer 4 · 2014-08-16T02:16:50.307

0

Try This :

View :

    [System.Web.Mvc.HttpGet]
    public JsonResult getFoodDetails(int? userId)
    {
        IList<Food> FoodList = new List<Food>();

        FoodList = FoodService.getFoodDetails(userId);

        return Json (new { Flist = FoodList } , JsonRequestBehavior.AllowGet);
    }

Controller :

function GetFoodDetails() {
    debugger;
    $.ajax({
        type: "GET",       // make it get request instead //
        url: "Food/getFoodDetails",
        data: { userId: Id },      
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            debugger;
            alert(result)
        },
        error: function (response) {
            debugger;
            alert('error');
        }
    });

}

Or if ajax request is creating problems then you can use $.getJSON as :

$.getJSON("Food/getFoodDetails", { userId: Id } , function( data ) {....});

edited Aug 16 '14 at 02:16

answered Aug 14 '14 at 09:29

Kartikeya Khosla

18,743
8
43
69

Sorry it is not working!! Its getting into error part. – Aiju Aug 14 '14 at 09:33
just see updated answer it will work..@AijuThomasKurian – Kartikeya Khosla Aug 14 '14 at 09:34
do i have to change any thing in routesconfig? – Aiju Aug 14 '14 at 09:47
just check because in your action... public JsonResult getFoodDetails(int userId)...if userid from ajax is null or empty... then it will create problem or just use "?" with int as i have used in my answer...@AijuThomasKurian – Kartikeya Khosla Aug 14 '14 at 09:52
Every thing is working fine till the return part. I have a list with some data. Only thing is how pass that data to view? The call is going to db and i am getting the result as a list. – Aiju Aug 14 '14 at 09:57
@AijuThomasKurian...just apply breakpoint below "Flist" according to my answer and see it has proper list or not??? – Kartikeya Khosla Aug 14 '14 at 10:00
try using $.getJSON instead of ajax ..just see updated answer..@AijuThomasKurian – Kartikeya Khosla Aug 14 '14 at 10:05

score 0 · Answer 5 · edited Feb 27 '19 at 09:40

   $(document).ready(function () {
        var data = new Array();
        $.ajax({
            url: "list",
            type: "Get",
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (data) {
                $.each(data, function (index) {
                    // alert("id= "+data[index].id+" name="+data[index].name);
                    $('#myTable tbody').append("<tr class='child'><td>" + data[index].id + "</td><td>" + data[index].name + "</td></tr>");
                });

            },
            error: function (msg) { alert(msg); }
        });
    });

    @Controller
    public class StudentController
    {

        @Autowired
        StudentService studentService;
        @RequestMapping(value= "/list", method= RequestMethod.GET)

        @ResponseBody
        public List<Student> dispalyPage()
        {

            return studentService.getAllStudentList();
        }
    }

How to get a list from mvc controller to view using jquery ajax

In Controller

In view

5 Answers5

Linked