How to process the response from server before the data will be serialized to Model instance?

[demos76]

Hi guys,

I use Store -> RestProxy -> JsonReader. How can I process the raw data from server before that the data will pass to JsonReader?

Thanks in advance!

[fabricio.murta]

Hello @demos76, and welcome to Ext.NET Forums!

It depends how you are doing the client-server communication. In general terms, I believe you want a callback handling the response, maybe success and failure ones.

Hope this helps!

[demos76]

Hi @fabricio.murta

I use code something like this:


var treePanel1 =
new TreePanel
{
ID = "treeId",
Border = false,
RootVisible = false,
Layout = LayoutType.Fit.ToString(),
Header = false,
Store =
{
new TreeStore
{
ID = "storeId",
ShowWarningOnFailure = true,
AutoLoad = true,
Proxy =
{
new RestProxy
{
Url = "/{0}/{1}".FormatWith("controllerName", "readActionName"),
ActionMethods =
{
Read = HttpMethod.POST,
Create = HttpMethod.POST,
Update = HttpMethod.POST,
Destroy = HttpMethod.DELETE
},

API =
{
Read = "/{0}/{1}".FormatWith("controllerName", "readActionName"),
Create = "/{0}/{1}".FormatWith("controllerName", "createActionName"),
Update = "/{0}/{1}".FormatWith("controllerName", "updateActionName"),
Destroy = "/{0}/{1}".FormatWith("controllerName", "destroyActionName")
},
Reader =
{
new JsonReader()
},
Writer =
{
new JsonWriter
{
RootProperty = "data",
AllowSingle = true,
ClientIdProperty = "ID",
WriteAllFields = true,
Encode = true
}
}
}
}
}
},
};


This is MVC application. And I want to correct the raw response (string containing JSON) from server before it will be deserialized to Model. Yes I want callback handling for success response. But I was not able to find appropriate listeners or events or methods in JsonProxy and JsonReader classes.

Could you please provide an example or link to example with response processing?


Thanks!

[fabricio.murta]

Hello again, @demos76!

If you want to change the response Ext.NET receives, before processing, your best bet is to actually change the endpoint you query from (that "/{0}/{1}".FormatWith("controllerName", "readActionName"), endpoint dynamically built depending on the address you open). That is, fix the response itself to fit the correct json format or provide custom data. It could come in the form of a new "wrapper" endpoint to that end.

If you need to manipulate the response after it's received from the server but before Ext.NET consumes it, you could use the Ext.data.reader.Json.transform config (https://docs.sencha.com/extjs/7.3.1/classic/Ext.data.reader.Json.html#cfg-transform) to the JsonReader() property set as your tree's Reader and implement a client-side (javascript) handler to manipulate the data.

And if you just need to points the root property where to look for the actual data from a json response, you can provide its path via the rootProperty config (https://docs.sencha.com/extjs/7.3.1/classic/Ext.data.reader.Json.html#cfg-rootProperty) to the JsonReader definition, just like your JsonWriter does.

I'm afraid we don't have any ready sample using this feature to share with you. But perhaps you have better luck reducing your problem to a simple test case to focus on the problem; then once you get a hang of the transform (if it really fits your scenario), implement the concept in the final project.

A good starting point perhaps would be with a GridPanel using remote json data, just to understand the concept. Besides, with a simplified test case you could share a working sample where we could provide help with. Here's a couple simple examples that could be useful for this:
- GridPanel > Plugins > GridFilters_Remote (https://mvc5.ext.net/#/GridPanel_Plugins/GridFilters_Remote/)
- GridPanel > Update > Restful (https://mvc5.ext.net/#/GridPanel_Update/Restful/)

The concept of a grid panel is very similar to a tree panel with server data. The first TreePanel in the following example uses server data (just not explicitly json-encapsulated), but it could serve as a good base if you want to make a simplified Json-fed TreePanel similar to the one you shared some code of.

Hope this helps!

[demos76]

Hi @fabricio.murta

Thanks a lot for your assistance. I will investigate your clues and report about results.

Actually my problem is the free hosting :) It adds additional data to response dynamically (like adverts as script). So the response (JSON) is not valid in this case. And I can not fix it on the controller side.

I just want to remove the extra data from response string before pass it to reader.

[fabricio.murta]

Maybe you can have the hosting provide a valid response by ensuring the headers state the response type is application/json.

Ext.NET should already do this but, for instance, say you have a .png file in the hosting, they know its type and don't prepend/append HTML or JavaScript code to the response, if for some reason the response doesn't state it is a JSON, the hosting may think it's plain HTML and mangle with the invalid data.

The request headers, if you check using F12 developer tools in chrome (or similar in other browsers) should have something like:



content-type: application/json; charset=utf-8


So maybe all that you need is to properly prepare your response and let the (free) webserver know the response data is a JSON payload. Otherwise, maybe even the transform approach won't help, and you'll need to basically write your own JsonReader extension to handle the scenario, which would probably just break once you move the website to another hosting that doesn't mangle the response.

Hope this helps!

[demos76]

Hi @fabricio.murta


I've checked the response headers and there is wrong content type header:
25613

I will try to set application/json type a bit late. Unfortunately don't have free time for now:)

Thanks for your advice.

[demos76]

Hi @fabricio.murta


Some actions in my controllers returned Json as string, so it leaded to that behavior. I've changed the string results to the StoreResult and currently it works well.


Thanks a lot!

The thread can be closed.