Home » Jquery » jquery – MaximumJsonLength property error when trying to display 300,000 records

jquery – MaximumJsonLength property error when trying to display 300,000 records

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a jQuery Datatable instance to display a lot of records from my DB. I fetch data using AJAX.

I have already set the maxJsonLength property to 2147483644 in web.config, but that only allows the application to fetch 10,000 records. If I tried more than that then I get an error:

The length of the string exceeds the value set on the maxJsonLength property

What should I do? Is there any alternate to do displaying 300,000 records in a Datatable?

[WebMethod]
public void GetStudents()
{
  var gd = new List<GeneralDetails>();
  VisaSetUpBAL bl = new VisaSetUpBAL();
  SqlDataReader dr;
  dr = bl.returnTableReader("vwVisaApplnV3", "top 10000 *", "1=1");
  while (dr.Read())
  {
    var student = new GeneralDetails
    {
      ApplicationID = Convert.ToInt32(dr["ApplicationID"]),
      RefNo = Convert.ToString(dr["RefNo"]),
      AppliedDate = Convert.ToString(dr["AppliedDate"]),
      VisaType = Convert.ToInt32(dr["VisaType"]),
      ServiceType = Convert.ToInt32(dr["ServiceType"]),
      LocationID = Convert.ToInt32(dr["LocationID"]),
      Surname = Convert.ToString(dr["Surname"]),
      VisaNo = Convert.ToString(dr["VisaNo"]),
      ServiceName = Convert.ToString(dr["ServiceType"]),
    };
    gd.Add(student);
  }
  var js = new JavaScriptSerializer();
  Context.Response.Write(js.Serialize(gd));
}
$(document).ready(function() {
  $.ajax({
    type: "POST",
    dataType: "json",
    url: "webservice.asmx/GetStudents",
    success: function(data) {
      var datatableVariable = $('#example').DataTable({
        data: data,
        serverSide: true,
        ordering: false,
        searching: false,
         columns: [  
           { 'data': 'ApplicationID' },  
           { 'data': 'RefNo' },  
           { 'data': 'AppliedDate' }, 
           { 'data': 'VisaType' },  
           { 'data': 'ServiceType' },  
           { 'data': 'LocationID' },  
           { 'data': 'Surname' }, 
           { 'data': 'VisaNo' }, 
           { 'data': 'ServiceName' }
         ]  
      });

      $('#example tfoot th').each(function() {
        var placeHolderTitle = $('#example thead th').eq($(this).index()).text();
        $(this).html('<input type="text" class="form-control input input-sm" placeholder = "Search ' + placeHolderTitle + '" />');
      });
    }
  });
});
How to&Answer: