Sparkline 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 Sparkline for ASP.NET Core in Razor Pages applications.

For a runnable example, refer to the Sparkline in RazorPages example.

Getting Started

The most flexible form of data binding is to use the DataSource component. To bind the Telerik UI Sparkline 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("/Sparkline/SparklineRemoteBidning?handler=Read").Data("forgeryToken"))
           )
   

       <datasource type="DataSourceTagHelperType.Ajax">
           <transport>
               <read url="/Sparkline/SparklineRemoteBidning?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 JsonResult OnPostRead()
       {
           return new JsonResult(items);
       }
   

       public class Weather
   {
       public int Id { get; set; }
       public double Rain { get; set; }
       public double TMax { get; set; }
       public double Wind { get; set; }
   }
   

See Also

• Basic Usage of the Sparklines HtmlHelper for ASP.NET Core (Demos)
• Server-Side API