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
– markpsmith, Commented Aug 14, 2014 at 9:29

Community · Accepted Answer · 2018-11-08 09:48:56Z

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 8, 2018 at 9:48

CommunityBot

11 silver badge

answered Aug 14, 2014 at 9:32

Igor Semin

2,5061 gold badge22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AuroMetal Over a year ago

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: stackoverflow.com/a/8464685/3812244

Igor Semin Over a year ago

@IMAK, why not? It anyway will be serialized to array in json object.

Pranay Rana · Accepted Answer · 2014-08-14 09:35:25Z

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.');

                }

            });

Aiju · Accepted Answer · 2014-08-17 10:15:27Z

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 · Accepted Answer · 2014-08-16 02:16:50Z

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, 2014 at 2:16

answered Aug 14, 2014 at 9:29

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

7 Comments

Aiju Over a year ago

Sorry it is not working!! Its getting into error part.

Kartikeya Khosla Over a year ago

just see updated answer it will work..@AijuThomasKurian

Aiju Over a year ago

do i have to change any thing in routesconfig?

Kartikeya Khosla Over a year ago

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

Aiju Over a year ago

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.

|

Zippy · Accepted Answer · 2019-02-27 09:40:45Z

   $(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();
        }
    }

Collectives™ on Stack Overflow

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

In Controller

In view

5 Answers 5

2 Comments

Comments

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

In Controller

In view

5 Answers 5

2 Comments

Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related