PartialView does't Rendering on Screen with ViewBags values

Question

I have a controller with Two Actions and a View with Two Charts, the first one is directly on the View and the second is a Partial View, such below:

<div class="chart" style="margin-top: 10px;"> @(Html.Telerik().Chart(Model) .Name("CustomerCount") .Title(title => title.Text("TotalCustomersPerHour")) .Legend(settings => settings.Position(ChartLegendPosition.Bottom)) .Series(series => series.Line(p => p.CustomerCount.Total).Name("TotalCustomersPerHour")) .CategoryAxis(a => a.Categories(p => p.CustomerCount.Intervalo).Labels(l => l.Rotation(-40))).Theme("vista") .Tooltip(true) .HtmlAttributes(new { style = "height: 300px;" }) .DataBinding(dataBinding => dataBinding.Ajax() .Select("CustomerCountData", "Indicators", new { storeId = "TR_001", startDate = DateTime.Today, endDate = DateTime.Today.AddDays(10) })) .ClientEvents(b => b.OnDataBound("OnCustomerCountDataBound")) ) </div> <div class="chart" style="margin-top: 10px;"> @Html.Partial("_ChartTest") </div>

The first Action is called by a Telerik Chart Ajax calling, when its done I call the another Action by OnDataBound event in order to populate my Partial View Chart using ViewBags.

function OnCustomerCountDataBound(e) { $.ajax({ type: "POST", url: "Indicators/ChartTest", data: { retailStoreId: "TR_001"}, }); }

I debugged the Partial view and I can get the ViewBag values but the result is not shown on the Page.

@(Html.Telerik().Chart() .Name("TimeOfPermanency") .Title(title => title.Text(TrackerMessages.TimeOfPermanencyPerArea)) .Legend(settings => settings.Position(ChartLegendPosition.Bottom)) .Series(series => { if (ViewBag.Series != null) { foreach (var area in ViewBag.Series) { series.Column(area.Data).Name(area.Name); } } }) .CategoryAxis(axis => { if (ViewBag.Categories != null) { axis.Categories(ViewBag.Categories); } }) .Tooltip(true) .HtmlAttributes(new { style = "height: 300px;" }) .ClientEvents(b => b.OnDataBound("OnTimeOfPermanency")) )

Anyone knows why the results are not rendering on my second chart?

Thanks!

Darin Dimitrov · Accepted Answer · 2013-05-29 15:01:08Z

I debugged the Partial view and I can get the ViewBag values but the result is not shown on the Page.

That's because you don't seem to be doing anything in the success callback of your ajax call. You haven't even subscribed to it.

So go ahead, subscribe to it and update your partial with the result returned by your controller:

function OnCustomerCountDataBound(e) { $.ajax({ type: "POST", url: "Indicators/ChartTest", data: { retailStoreId: "TR_001"}, success: function(result) { $('#childChart').html(result); } }); }

Notice that I have used the $('#childChart') selector because you have 2 elements with class="chart" and from what I understand you want to update only the second. So make sure you assign an unique id to the containing div:

<div class="chart" id="childChart" style="margin-top: 10px;"> @Html.Partial("_ChartTest") </div>

I didn't cause I don't return no one result on this Ajax Call, I just call an Action that populated ViewBags to render on my Series and Categories section of Telerik Chart, as I shown on the code above.
The controller action that you are hitting with your AJAX call (Indicators/ChartTest) must return the _ChartTest partial view and populate the ViewBag data as this partial relies on it. In the success callback of your AJAX call you should refresh the corresponding section of your DOM if you want this chart to appear.

Collectives™ on Stack Overflow

PartialView does't Rendering on Screen with ViewBags values

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related