PDA

View Full Version : [CLOSED] [#1392] [4.2.0] Mobile.mvc do not support PolarChart?


hjk1130
Oct 10, 2016, 9:38 AM
I used Mobile.Mvc like X.PolarChart()
but the Ext.decode(response) been given you're trying to decode an invalid json string:
fabricio.murta
Oct 10, 2016, 8:11 PM
Hello @hjk1130!

I don't really see a reason for it not to work in MVC, it must be the way you are writing it in MVC.

But there's the possibility that a given syntax that should work was not properly supported in MVC Razor syntax. Can you provide us a test case showing how you are trying to build the chart? From that we can explore, worst case, at least a work around or another writing line to have it working.

You probably already browsed it, but as far as WebForms is concerned, we have sample pages with them here: Mobile Examples - Polar Charts (http://mobile.ext.net/#menu/PolarChart).

Looking forward for your feedback!
hjk1130
Oct 11, 2016, 2:02 AM
my codes :

@{
var X = Html.X();
}

@(
X.PolarChart().InnerPadding(10)
.Store(
X.Store().ID("StoreZic")
.ServerProxy(X.AjaxProxy().Url("/api/home/getzicdata"))
.Model(
X.Model().Fields(
new ModelField("CltZicTyp", ModelFieldType.String),
new ModelField("CltZicPer", ModelFieldType.Float)
)
)
)
.Interactions(
X.ItemHighlightInteraction(),
X.RotateInteraction()
)
.LegendConfig(X.ChartLegend().Docked(Dock.Right))
.Series(X.PieSeries()
.AngleField("CltZicPer").Donut(0)
.Label(X.ChartLabel().Field("CltZicTyp").FontSize("14").Display(SeriesLabelDisplay.Rotate))
.HighlightDefaults(X.Sprite().Margin(20))
)
)


[DirectMethod]
public ActionResult GetView(string viewName)
{
var path = @"~\Views\Home\";
path = String.Concat(path, viewName, ".cshtml");
return new Ext.Net.Mobile.MVC.PartialViewResult
{
ViewName = path,
RenderMode = RenderMode.Config
};
}

App.direct.GetView(viewName, {
success: function (response) {
console.log(response);
response = Ext.decode(response);
Ext.net.loadResources(response, function (config) {
var view = Ext.create(config[0]);
Ext.Viewport.animateActiveItem(view, {
type: "slide",
direction: 'left'
});
}, this);
}
scope: this
});


finally there is a js error:you're trying to decode an invalid json string.
the response is a invalid json string.
fabricio.murta
Oct 11, 2016, 8:59 PM
Hello @hjk1130!

Please provide full example so we can run it in our side.

I've ported the WebForms example to a simple view-only page in MVC and it works fine:




@{
Layout = null;
var X = Html.X();

var n = 5;
var floor = 20;

List<object> data = new List<object>(n);
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;

for (int i = 0; i < n; i++)
{
data.Add(new
{
id = i,
name = (char)('A' + i),
g0 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
g1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
g2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
g3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
g4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
g5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
g6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
});
}
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
@Html.X().ResourceManager().ScriptMode(Ext.Net.Mob ile.ScriptMode.Debug).SourceFormatting(true)

@(
X.PolarChart()
.InnerPadding(10)
.FullScreen(true)
.Store(
X.Store().ID("StoreZic")
.Data(data)
.Fields(
new ModelField("id"),
new ModelField("g0"),
new ModelField("g1"),
new ModelField("g2"),
new ModelField("g3"),
new ModelField("g4"),
new ModelField("g5"),
new ModelField("g6"),
new ModelField("name")
)
)
.Interactions(
X.ItemHighlightInteraction(),
X.RotateInteraction()
)
.LegendConfig(X.ChartLegend().Docked(Dock.Right))
.Series(X.PieSeries()
.AngleField("g1").Donut(30)
.Label(
X.ChartLabel()
.Field("name")
.FontSize("14")
.Display(SeriesLabelDisplay.Rotate)
)
.HighlightDefaults(X.Sprite().Margin(20))
)
)
</div>
</body>
</html>


So, there's something with your model. Additionally, please provide a sample code without layout, much like the one I just provided above. One possibility is a problem with the getzicdata action, it probably is not returning data the way it was meant to. Well, of course, it is possible that it returns correctly and Ext.NET is not handling it correctly. But only way to find out is being able to run the example.
hjk1130
Oct 12, 2016, 1:18 AM
yes,I know it runs very well in full example .
But I would like to create dynamic view like your example.
Read 'csthml' by [DirectMethod] GetView.
And create view page by js like this.



App.direct.GetView(viewName, {
success: function (response) {
console.log(response);
response = Ext.decode(response);
Ext.net.loadResources(response, function (config) {
var view = Ext.create(config[0]);
Ext.Viewport.animateActiveItem(view, {
type: "slide",
direction: 'left'
});
}, this);
}
scope: this
});

it works well in every page,but only in PolarChart View.
fabricio.murta
Oct 12, 2016, 11:06 PM
Hello!

Can you draw a simple example out of the approach you are using? I'm not sure how you are calling the direct method at all. Please provide the necessary views, models and controller codes so we can reproduce the error you're seeing in our side. Then we'll be able to provide you a good advice on how to solve the issue.
hjk1130
Oct 13, 2016, 3:54 AM
controllers:


[DirectController]
public class HomeController : Controller
{
public ActionResult test()
{
return View();
}

[DirectMethod]
public ActionResult GetView(string viewName)
{
var path = @"~\Views\Home\";
path = String.Concat(path, viewName, ".cshtml");
return new Ext.Net.Mobile.MVC.PartialViewResult
{
ViewName = path,
RenderMode = RenderMode.Config
};
}
}

test.cshtml


@{
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript">
var showView = function (viewName) {
App.direct.GetView(viewName, {
success: function (response) {
response = Ext.decode(response);
Ext.net.loadResources(response, function (config) {
var view = Ext.create(config[0]);
Ext.Viewport.animateActiveItem(view, {
type: "slide",
direction: 'left'
});
}, this);
},
complete: function () {
Ext.Viewport.setMasked(false);
},
scope: this
});
};
var onBack = function () {
var view = Ext.Viewport.getActiveItem();
Ext.Viewport.animateActiveItem(0, {
type: "slide",
direction: 'right'
});
Ext.Viewport.remove(view);
view.destroy();
};
</script>
</head>
<body>
@X.ResourceManager()

@(X.Container().FullScreen(true).Padding(10).Layou t(LayoutType.VBox)
.Items(
X.Button().Text("chart error").Margin(10).Handler("showView('chart');"),
X.Button().Text("view success").Margin(10).Handler("showView('view');")
)
)


</body>
</html>


chart.csthml


@{
Layout = null;
var X = Html.X();
var n = 5;
var floor = 20;
List<object> data = new List<object>(n);
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;
for (int i = 0; i < n; i++)
{
data.Add(new
{
id = i,
name = (char)('A' + i),
g1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
});
}
}

@(
X.Container().Layout(LayoutType.Fit)
.Items(
X.TitleBar().Title("test")
.Items(
X.Button().Text("back").UI(ButtonUI.Back).Handler("onBack();")
),
X.PolarChart().InnerPadding(10)
.Store(
X.Store().Data(data).Fields("id", "g1", "name")
)
.Interactions(
X.ItemHighlightInteraction(),
X.RotateInteraction()
)
.Series(X.PieSeries()
.AngleField("g1").Donut(30)
.Label(
X.ChartLabel().Field("name").Display(SeriesLabelDisplay.Rotate)
)
)
)
)



view.cshtml


@{
Layout = null;
var X = Html.X();
}

@(
X.Container()
.Items(
X.TitleBar().Title("this is a test view")
.Items(
X.Button().Text("back").UI(ButtonUI.Back).Handler("onBack();")
)
)
)


you can tap the button in test.cshtml
the first button runs incorrectly
the sencond button works fine
fabricio.murta
Oct 13, 2016, 3:33 PM
Thanks! That looks perfect! We'll be working on it and will return to you soon with a solution (or a bug statement if really hard to make it work).
fabricio.murta
Oct 13, 2016, 10:03 PM
Hello again!

There's a problem both on your approach -and- in Ext.NET in this case.

Using charts requires the chart resources to be loaded. While in a single page it can handle loading nicely, how is it supposed to load the charts dependencies from a partial load you bring as a config object?.. That's like chasing the tail.

We can (and should) fix Ext.NET to provide the script as a config block, but as you are not running any script, but want the component JavaScript object only, it can't be helped, but the scripts must be loaded somewhere else. So you either just fall back to load the resources by yourself (and wait for a fix in this config>script issue) or use a partial view approach where you load the scripts necessary to create the components you want.

I'm now investigating a fix for this config return so at least it returns a config when we specify we want a config object! :)
fabricio.murta
Oct 14, 2016, 2:32 AM
After further investigating, I found out that if the component's .ToConfig() method is called, it appends the resources that will be correctly allocated using the approach you are, and this should also happen on partial views when returning components' config objects.

We are working in a fix, it already works in your specific case but we'll do some tests to check whether it does not affect other partialView usages before marking the issue as done.

Github issue #1392 (https://github.com/extnet/Ext.NET/issues/1392) is logged to track this defect, and we will update here as soon as we have this fixed.

As this issue is also present in Ext.NET, we'll apply the fix for both Ext.NET and Ext.NET mobile!
fabricio.murta
Oct 14, 2016, 9:50 PM
Hello! I didn't really double check Ext.NET and it seems its PartialViewResult does not support RenderMode.Config at all! So this issue can only be reproduced with Ext.NET Mobile.

Well, it is now fixed in Ext.NET Mobile and you can run your sample code without issues! Notice this will only make it to NuGet once the next public version is released. To this point, the fix is available if you build from GitHub sources only.

We're looking forward for your feedback!
hjk1130
Oct 17, 2016, 2:09 AM
thank you !
By the way,i found this problem does not exist on webform ext.net.mobile.
only in mvc
fabricio.murta
Oct 17, 2016, 7:12 PM
Yes! This is only related to RenderMode.Config when using the PartialViewResult class. There's actually no way to trigger this issue from webforms.

Thanks for the feedback!