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:

1. Configure the Read URL in the DataSource. The URL must refer to the method name in the PageModel:

       .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>
   
   

2. Add an AntiForgeryToken at the top of the RazorPage

       @inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
       @Html.AntiForgeryToken()
   

3. Send the AntiForgeryToken with the Read request of the page. Additional parameters can also be supplied:

       <script>
           function forgeryToken() {
               return kendo.antiForgeryTokens();
           }
       </script>
   

4. Within the .cs file, introduce JsonResult 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; }
       }
   

See Also

• Using the API of the Chart HtmlHelper for ASP.NET Core (Demo)
• Basic Usage of the Area Chart HtmlHelper for ASP.NET Core (Demos)
• Basic Usage of the TreeMap TagHelper for ASP.NET Core (Demo)
• Server-Side API