Sending List/Datatable from MVC Controller to JQuery-AJAX

Option A: Send as List

        Server Side
        
        public class Person
        {
            public int Id { get; set; }
            public String Name { get; set; }

        }

        [HttpPost]
        public JsonResult GetData()
        {
              List persons = PersonManager.GetList();
              return Json(new { ServerResponse = “Success”, PersonList = persons },                     
                                 JsonRequestBehavior.AllowGet);
        }


        Client Side
        success: function (response) {
              if (response.ServerResponse === “Success”) {
                       var persons = response.PersonList;                        
                       //Looping persons array without any function parameter
                       $.each(persons, function () {
                           console.log(‘Id-‘ + this.Id + ‘, Name-‘ + this.Name);
                      });


                     //Looping persons array with function parameter
                     $.each(persons, function (index, person) {
                          console.log(‘SL-‘ + index + ‘, Id-‘ + person.Id + ‘, Name-‘ + person.Name);
                          $.each(person, function (key, value) {
                                console.log(key + ‘:’ + value);
                          });
                    });

                    //JavaScript Loop

                    persons.forEach(function (person,index) {
                        console.log(‘Id-‘ + person.Id + ‘, Name-‘ + person.Name);
                    });

              }
        },

========================================================

Option A: Send as DataTable

        Server Side
        
        public class Person
        {
            public int Id { get; set; }
            public String Name { get; set; }

        }
      

        using Newtonsoft.Json;

        [HttpPost]
        public JsonResult GetData()
        {
             DataTable persons = PersonManager.GetList(); //As DataTable
             String SerializedDatatable = JsonConvert.SerializeObject(persons, Formatting.None);
             return Json(new { ServerResponse = “Success”, PersonList = persons },                     
                                 JsonRequestBehavior.AllowGet);
        }


        Client Side
        success: function (response) {
              if (response.ServerResponse === “Success”) {
                       var persons = JSON.parse(response.PersonList);
                       
                      //Looping persons array without any function parameter
                       $.each(persons, function () {
                           console.log(‘Id-‘ + this.Id + ‘, Name-‘ + this.Name);
                      });


                     //Looping persons array with function parameter
                     $.each(persons, function (index, person) {
                          console.log(‘SL-‘ + index + ‘, Id-‘ + person.Id + ‘, Name-‘ + person.Name);
                          $.each(person, function (key, value) {
                                console.log(key + ‘:’ + value);
                          });
                    });

                    //JavaScript Loop

                    persons.forEach(function (person,index) {
                        console.log(‘Id-‘ + person.Id + ‘, Name-‘ + person.Name);
                    });

              }
        },


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s