Telerik UI Chart in Razor Pages
Razor Pages are an alternative to the MVC pattern. Razor Pages make page-focused coding easier and more productive. This approach consists of a cshtml
file and a cs
file (generally, the two files have the same name). You can seamlessly integrate the Telerik UI Chart for ASP.NET Core in Razor Pages applications.
For a runnable example, refer to the Chart in RazorPages example.
Getting Started
The most flexible form of data binding is to use the DataSource component. To bind the Telerik UI Chart to a data set within a RazorPage:
-
Configure the Read URL in the
DataSource
. The URL must refer to the method name in thePageModel
:.DataSource(ds => ds .Read(r => r.Url("/Chart/ChartRemoteBinding?handler=Read").Data("forgeryToken")) )
<datasource> <transport> <read type="post" url="/Chart/ChartRemoteBinding?handler=Read" data="forgeryToken"/> </transport> </datasource>
-
Add an AntiForgeryToken at the top of the RazorPage
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf @Html.AntiForgeryToken()
-
Send the AntiForgeryToken with the Read request of the page. Additional parameters can also be supplied:
<script> function forgeryToken() { return kendo.antiForgeryTokens(); } </script>
-
Within the
.cs
file, introduceJsonResult
to return the data set:public static List<ElectricityProduction> production; public void OnGet() { if (production == null) { production = new List<ElectricityProduction>(); production.Add(new ElectricityProduction { Year = "2000", Solar = 18, Nuclear = 31807, Hydro = 4727, Wind = 62206 }); production.Add(new ElectricityProduction { Year = "2001", Solar = 24, Nuclear = 43864, Hydro = 6759, Wind = 63708 }); production.Add(new ElectricityProduction { Year = "2002", Solar = 30, Nuclear = 26270, Hydro = 9342, Wind = 63016 }); } } public JsonResult OnPostRead() { return new JsonResult(production); }
public class ElectricityProduction { public string Year { get; set; } public int Solar { get; set; } public int Nuclear { get; set; } public int Hydro { get; set; } public int Wind { get; set; } }