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<Person> 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
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