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

前端 未结 6 1912
孤街浪徒
孤街浪徒 2021-02-04 08:02

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

 publ         


        
相关标签:
6条回答
  • 2021-02-04 08:15

    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 ) {....});
    
    0 讨论(0)
  • 2021-02-04 08:18
       $(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();
            }
        }
    
    0 讨论(0)
  • 2021-02-04 08:19

    1-Create One model To NameOf User

    public class User
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Family { get; set; }
        }
    

    2-Create one ActionResult To NameOf GetUsers

    public ActionResult GetUsers()
            {
                List<User> users = new List<Models.User>()
                {
                    new Models.User(){Id=1,Name="Diako",Family="Hasani"},
                    new Models.User(){Id=2,Name="Sina",Family="Moradi"},
                    new Models.User(){Id=3,Name="Hamid",Family="Chopani"}
                };
    
                return Json(users,JsonRequestBehavior.AllowGet);
            }
    

    3-To Your View Create One div

    <div id="parent"></div>
    

    4-write this code to script

    <script>
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "/Home/GetUsers",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (result) {
    
                        for (var i in result) {
                            $('#parent').append('<p>' + result[i].Name + '</p>');
                        }
    
                    },
                    error: function (response) {
                        alert('eror');
                    }
                });
            });
    
    
        </script>
    
    0 讨论(0)
  • 2021-02-04 08:22

    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');
            }
        });
    
    }
    
    0 讨论(0)
  • 2021-02-04 08:24

    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');
            }
        });
    
    }
    
    0 讨论(0)
  • 2021-02-04 08:27

    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.');
    
                    }
    
                });
    
    0 讨论(0)
提交回复
热议问题