We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. maxJson lengthexception in grid

maxJson lengthexception in grid

Hi,


I've a filter section and a grid. I bind the grid with ajax. Without filters, I've get an exceeding maxJson exception, with filters it works fine. Some similar at this:



My form filter

@using (Html.BeginForm("Filtrar", "NuevasPoblaciones", FormMethod.Post, new { id = "frmFiltros" }))
{



Comunidad
@*@Html.EJ().DropDownList("ddlComunidad").Datasource(ds => ds.URL("/NuevasPoblaciones/GetComunidades").Adaptor(AdaptorType.UrlAdaptor)).DropDownListFields(f => f.Text("Nombre").Value("IdComunidad")).CascadeTo("ddlProvincia").HeaderTemplate("
").ClientSideEvents( ev => ev.Create("onDropDownCreate"))*@
@Html.EJ().DropDownList("ddlComunidad").Datasource((IEnumerable)ViewBag.dsComunidades).DropDownListFields(f => f.Text("Nombre").Value("IdComunidad")).CascadeTo("ddlProvincia").HeaderTemplate("
").ClientSideEvents(ev => ev.Create("onDropDownCreate")).ShowCheckbox(true)


....

My grid

@(Html.EJ().Grid("gridNNPP")
.Locale("es-ES")
.Datasource((IEnumerable)ViewBag.dsNNPP) // This is empty
//.Datasource(ds => ds.URL("/NuevasPoblaciones/Filtrar").Adaptor(AdaptorType.JsonAdaptor))
.AllowSorting()
.AllowPaging()

my script section

$(document).ready(function () {

//$('input').on("ejDropDownListpopupHide", loadGridNNPP);
//$('button').on("click", loadGridIncidencias);

$("#frmFiltros").submit(function () {
var form = $(this);
$("#gridNNPP").ejWaitingPopup("show");
$.ajax({
dataType: 'JSON',
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
success: function (result) {
var grid = $("#gridNNPP").ejGrid("instance")
grid.dataSource(result);
$("#gridNNPP").ejWaitingPopup("hide");
},
error: function (jqXHR, textStatus, errorThrown) {
alert("ko");
console.log("Error en submit: " + jqXHR + ' ' + textStatus + ' ' + errorThrown);
$("#gridNNPP").ejWaitingPopup("hide");
}
});
return false;
})

})

My controller action

public JsonResult Filtrar(FormCollection form)
{
string idComunidades = form["ddlComunidad"].Replace(';', ',');
//TODO: Poner bien cuando saquen el parche
string prov = form["ddlProvincia"].Replace(';', ',');
string idProvincias = string.Join(",", prov.Split(',').ToList().Where(x => Utils.IsNumeric(x)).ToList());
//string idProvincias = form["ddlProvincia"].Replace(';', ',');
string idSituacionMunicipio = form["ddlSituacionMunicipio"].Replace(';', ',');
string idTipoSuministro = form["ddlTipoSuministro"].Replace(';', ',');
string idEstadoCompetencia = form["ddlEstadoCompetencia"].Replace(';', ',');
string idPlanOcupacion = form["ddlPlanOcupacion"].Replace(';', ',');
string idSituacionAutorizacion = form["ddlSituacionAutorizacion"].Replace(';', ',');
string idDistribuidoraEfectiva = form["ddlDistribuidoraEfectiva"].Replace(';', ',');
string idAñoPlanEstrategico = form["ddlAñoPlanEstrategico"].Replace(';', ',');
string idGLP = form["ddlGLP"].Replace(';', ',');
string txtMunicipio = form["txtMunicipio"];

var datos = GetNNPP(idComunidades, idProvincias, txtMunicipio, idSituacionMunicipio, idEstadoCompetencia, idTipoSuministro, idPlanOcupacion,
idSituacionAutorizacion, idDistribuidoraEfectiva, idAñoPlanEstrategico, idGLP).ToList();

return Json(datos);
}

I've read this article

https://www.syncfusion.com/kb/3063/script-error-throws-for-exceeding-maxjson-length-while-performing-serialization-or-deserialization

But I am not able to apply Load on demand in this scenario.




7 Replies
MS Mani Sankar Durai Syncfusion Team January 12, 2017 12:43 PM UTC

Hi Manolo, 


Thanks for contacting Syncfusion support. 


We have analyzed your query and the cause of this issue is due to binding huge amount of data without using any adaptor in grid. Since it didn’t serialize those data and throws the error. 
Please refer the below Kb link to avoid this issue. 


We suggest you to use the URL Adaptor to bind the huge amount of data. 

For you convenience we have modified your sample that can be downloaded from the below link. 

In this sample we have achieved your requirement by changing the dropdown value and the selected value will be passed to the server side and perform filtering for the grid. Based on that the data will be bind to grid. These are all performed by using UrlAdaptor. 

Please refer the below code example. 
<div class="ctrllabel"> 
    Select a car 
</div> 
@Html.EJ().DropDownList("selectCar").TargetID("carsList").Width("150px").ClientSideEvents(e => e.Change("change")) 
                      ... 
</div> 
 
@(Html.EJ().Grid<object>("Grid")             
            .AllowPaging() 
            
            .Columns(col => 
            { 
          ... 
            }) 
) 
 
<script type="text/javascript"> 
    
    function change(args) { 
        if (args.itemId == 1) { 
          
                var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" }); 
                $("#Grid").ejGrid({ 
                    dataSource: data, 
                    query: new ej.Query().addParams("employeeID", 4) 
                }); 
            
        } 
        if (args.itemId == 0) { 
 
            var data = ej.DataManager({ url: "/Home/Event", adaptor: "UrlAdaptor" }); 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                query: new ej.Query().addParams("employeeID", 2) 
            }); 
 
        } 
    } 
    </script> 
 
[Controller.cs] 
   public ActionResult Event(DataManager dm, int? employeeID) 
        { 
            var DataSource = OrderRepository.GetAllRecords(); 
            DataSource = OrderRepository.GetAllRecords().Where(e => e.EmployeeID == employeeID).ToList(); 
            DataResult result = new DataResult(); 
            result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList(); 
            result.count = DataSource.Count(); 
            return Json(result, JsonRequestBehavior.AllowGet); 
        } 


Also please refer the documentation link about dataSource method. 



Please let us if you need further assistance. 


Regards, 
Manisankar Durai. 


MA Manolo January 12, 2017 04:59 PM UTC

Hi,

I need pass all form as parameter. I try dhis code:

    $(document).ready(function () {
        $("#frmFiltros").submit(function () {
            $("#gridNNPP").ejWaitingPopup("show");
            var form = $(this);
            var dataManager = ej.DataManager({ url: "/NuevasPoblaciones/Filtrar2", adaptor: "UrlAdaptor" });
            var query = new ej.Query();           
            query.addParams("form", form);
            // query.addParams("form", form.serialize()); not work also
           
            $("#gridNNPP").ejGrid({
                dataSource: dataManager,
                query: query
            });
            $("#gridNNPP").ejWaitingPopup("hide");

            return false;
}
But in controller I don't received the form parameters.

Y try  also use ajax. I do this:

$("#frmFiltros").submit(function () {
            $("#gridNNPP").ejWaitingPopup("show");                      
            $.ajax({
                dataType: 'JSON',
                type: 'POST',
                url: form.attr('action'),
                data: { dm: grid.dataSource, form: form.serialize()} ,
                success: function (result) {
                    var grid = $("#gridNNPP").ejGrid("instance")                   
                    grid.dataSource(result);
                    $("#gridNNPP").ejWaitingPopup("hide");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("ko");
                    console.log("Error en submit: " + jqXHR + ' ' + textStatus + ' ' + errorThrown);
                    $("#gridNNPP").ejWaitingPopup("hide");
                }
            });
            return false;
        })

But i don't know how pass the grid's datamanager



MF Mohammed Farook J Syncfusion Team January 13, 2017 12:29 PM UTC

Hi Manolo,  
 
We have validated your reported issue and we were unable to reproduced at our end. Please find the code example. 
 
 
[View] 
<form id="myform"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br><br> 
    <input type="submit" value="Submit"> 
</form> 
 
<div id="ControlRegion"> 
    @(Html.EJ().Grid<object>("FlatGrid") 
         .AllowPaging()    /*Paging Enabled*/ 
                         .Columns(col => 
                { 
                    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                    col.Field("FirstName").HeaderText("First Name").Width(100).Add(); 
                    col.Field("Title").Width(120).Add(); 
                    col.Field("City").Width(100).Add(); 
                    col.Field("Country").Width(100).Add(); 
 
                })) 
 
</div> 
<script> 
    $("#myform").submit(function (e) { 
        var dataManager = ej.DataManager({ url: "Grid/Data", adaptor: new ej.UrlAdaptor() }); 
        var form = $(this).serialize(); 
        $("#FlatGrid").ejGrid({ 
            dataSource: dataManager, 
            query: new ej.Query().addParams("a", form) 
        }); 
        }) 
    
 
 
</script> 
 
[controller] 
 
        public ActionResult Data(DataManager dm, string a) 
        { 
           // do your action here 
            return View(); 
        } 
    } 
 
 
 
Please find the screen shot for your reference. 
 
 
 
 
 
Regards, 
J.Mohammed Farook   


MF Mohammed Farook J Syncfusion Team January 13, 2017 12:30 PM UTC

Hi Manolo,  
 
We have validated your reported issue and we were unable to reproduced at our end. Please find the code example. 
 
 
[View] 
<form id="myform"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br><br> 
    <input type="submit" value="Submit"> 
</form> 
 
<div id="ControlRegion"> 
    @(Html.EJ().Grid<object>("FlatGrid") 
         .AllowPaging()    /*Paging Enabled*/ 
                         .Columns(col => 
                { 
                    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                    col.Field("FirstName").HeaderText("First Name").Width(100).Add(); 
                    col.Field("Title").Width(120).Add(); 
                    col.Field("City").Width(100).Add(); 
                    col.Field("Country").Width(100).Add(); 
 
                })) 
 
</div> 
<script> 
    $("#myform").submit(function (e) { 
        var dataManager = ej.DataManager({ url: "Grid/Data", adaptor: new ej.UrlAdaptor() }); 
        var form = $(this).serialize(); 
        $("#FlatGrid").ejGrid({ 
            dataSource: dataManager, 
            query: new ej.Query().addParams("a", form) 
        }); 
        }) 
    
 
 
</script> 
 
[controller] 
 
        public ActionResult Data(DataManager dm, string a) 
        { 
           // do your action here 
            return View(); 
        } 
    } 
 
 
 
Please find the screen shot for your reference. 
 
 
 
 
 
Regards, 
J.Mohammed Farook   


MA Manolo January 15, 2017 05:28 PM UTC

Ok, I've found my problem

in the view, I've defined this form

"@using (Html.BeginForm("Filtrar", "NuevasPoblaciones", FormMethod.Post, new { id = "frmFiltros" }))"

And the javascript

 $("#frmFiltros").submit(function (e) {
        $("#gridNNPP").ejWaitingPopup("show");
        var dataManager = ej.DataManager({ url: "/NuevasPoblaciones/Filtrar2", adaptor: new ej.UrlAdaptor() });
        var frm = $(this).serialize();
       
        $("#gridNNPP").ejGrid({
            dataSource: dataManager,
            query: new ej.Query().addParams("form", frm)
        });
        return false;
    })

So, in my controller I don't received the DataManager values. The FormCollection yes.

I've defined the form:

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "frmFiltros" }))

and now, I recived the datamanager and a string with all form values. My form has drop down values with check box option. The string that I received is similar at this

hiddenEle=1%3B2%3B3&ddlComunidad=1&ddlComunidad=2&ddlComunidad=3&ddlProvincia=&txtMunicipio=&ddlSituacionMunicipio=&ddlEstadoCompetencia=&ddlTipoSuministro=&ddlPlanOcupacion=&ddlSituacionAutorizacion=&ddlDistribuidoraEfectiva=&ddlA%C3%B1oPlanEstrategico=&ddlGLP=

Can I received a formCollection instead a string?

Thanks

MA Manolo January 15, 2017 05:33 PM UTC

and why this post looks bad?

MS Mani Sankar Durai Syncfusion Team January 16, 2017 12:59 PM UTC

Hi Manolo, 

Query 1: Can I received a formCollection instead a string? 

We have analyzed your query and we have also prepared a sample based on your requirement that can be available from the below link. 
In this sample we have passed the form value as a string to server side and thereby we can Deserialize the string into FormCollections. 
Please refer the below code example. 
  public ActionResult Event(DataManager dm, string a) 
        { 
            string responseString = a; 
            var dict = HttpUtility.ParseQueryString(responseString); 
            string json = JsonConvert.SerializeObject(dict.Cast<string>().ToDictionary(k => k, v => dict[v])); 
            var respObj = JsonConvert.DeserializeObject<object>(json); 
 
} 

After converting the string to object we can handle it in serverside. 
Refer the screenshot below. 
 
Also please refer the Kb link of about how we have handle the FormCollection in server side. 
 
Query 2: why this post looks bad? 
 
Sorry for the inconvenience.  
 
We have resolved the issue and the page is showing fine now. 
 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Up arrow icon