MediaPlayer in Razor Pages

Updated on Dec 10, 2025

This article describes how to seamlessly integrate and configure the Telerik UI MediaPlayer for ASP.NET Core in Razor Pages applications.

Referencing Handler Methods in Razor Pages

Razor Pages is an alternative to the MVC pattern that makes page-focused coding easier and more productive. This approach consists of a cshtml file and a cshtml.cs file (by convention, the two files have the same name).

The cshtml.cs file, known as the PageModel, contains handler methods that respond to HTTP requests. These methods are prefixed with On followed by the HTTP verb (for example, OnGet, OnPost, OnPostRead, OnPostCreate).

Handler methods declared in a PageModel can be referenced from any Razor Page using one of the following URL patterns:

• Using Url.Page()

  C#

  Url.Page("PageName", "HandlerName")
  // OR
  Url.Page("/FolderName/PageName", "HandlerName")

  For example, Url.Page("Index", "Read") references the OnPostRead or OnGetRead handler method in the Index.cshtml.cs file.

• Using a query string

  C#

  Url("/PathToPage?handler=HandlerName")

  For example, Url("/Index?handler=Read") references the OnPostRead or OnGetRead handler method in the Index page.

For more information on Razor Pages architecture and concepts, refer to the official Microsoft documentation.

Creating a Playlist with ListView

The following example demonstrates how to use the MediaPlayer and a ListView components in a Razor Pages application to create a playlist.

1. Bind the ListView to a remote DataSource to load the title, poster and source for each video.

2. Within the Change event of the ListView, assign the values of the title, poster and source properties to the MediaPlayer.

Razor

@page
@model MediaPlayerPlaylistModel
@using Telerik.Examples.RazorPages.Models

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

// Create a temmplate for the ListView (Playlist).
<script type="text/x-kendo-template" id="template">
    <li class="k-item k-state-default" onmouseover="$(this).addClass('k-hover')"
        onmouseout="$(this).removeClass('k-hover')">
        <span>
            <img src="#:Poster#" />
            <h5>#:Title#</h5>
        </span>
    </li>
</script>

@(Html.Kendo().MediaPlayer()
    .Name("mediaPlayer")
    .AutoPlay(false)
    .HtmlAttributes(new { style = "height:720px" })
)

<div class="k-list-container playlist">
    @(Html.Kendo().ListView<Video>()
        .Name("listView")
        .TagName("ul")
        .ClientTemplateId("template") // Set the template from above.
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Url(@Url.Page("MediaPlayerPlaylist", "Read")).Data("forgeryToken"))
        )
        .Selectable(true)
        .Events(e => e.Change("onChange").DataBound("onDataBound"))
    )
</div>

Razor

@page
@model MediaPlayerPlaylistModel
@addTagHelper "*, Kendo.Mvc"

@using Telerik.Examples.RazorPages.Models

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

// Create a template for the ListView (Playlist).
<script type="text/x-kendo-template" id="template">
    <li class="k-item k-state-default" onmouseover="$(this).addClass('k-hover')"
        onmouseout="$(this).removeClass('k-hover')">
        <span>
            <img src="#:Poster#" />
            <h5>#:Title#</h5>
        </span>
    </li>
</script>

<kendo-mediaplayer name="mediaPlayer"
    auto-play="false"
    style="height:720px">
</kendo-mediaplayer>

<div class="k-list-container playlist">
    <kendo-listview name="listView"
        tag-name="ul"
        template-id="template"
        on-change="onChange"
        on-data-bound="onDataBound">
        <selectable enabled="true"/>
        <datasource type="DataSourceTagHelperType.Ajax">
            <transport>
                <read url="@Url.Page("MediaPlayerPlaylist","Read")" data="forgeryToken" />
            </transport>
        </datasource>
    </kendo-listview>
</div>

JS

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

    function onChange() {
        var index = this.select().index();
        var dataItem = this.dataSource.view()[index];
        
        // Play the video selected from the playlist.
        $("#mediaPlayer").data("kendoMediaPlayer").media({
            title: dataItem.Title,
            poster: dataItem.Poster,
            source: dataItem.Source
        });
    }

    // Select the first video when the page loads.
    function onDataBound() {
        this.select(this.content.children().first());
    }
</script>

C#

using System.Collections.Generic;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Telerik.Examples.RazorPages.Models;

namespace Telerik.Examples.RazorPages.Pages.MediaPlayer
{
    public class MediaPlayerPlaylistModel : PageModel
    {
        private static IList<Video> videos;

        // Create sample data for the ListView(Playlist).
        public void OnGet()
        {
            if (videos == null)
            {
                videos = new List<Video>();

                videos.Add(new Video()
                {
                    Title = "Build HIPAA-Compliant Healthcare Apps Fast",
                    Poster = "https://img.youtube.com/vi/_S63eCewxRg/1.jpg",
                    Source = "https://www.youtube.com/watch?v=dyvxivS5EcI"
                });

                videos.Add(new Video()
                {
                    Title = "ProgressNEXT 2018 Highlights",
                    Poster = "https://img.youtube.com/vi/DYsiJRmIQZw/1.jpg",
                    Source = "https://www.youtube.com/watch?v=Gp7tcOcSKAU"
                });

                videos.Add(new Video()
                {
                    Title = "Benefits of Being a Progress Partner",
                    Poster = "https://i.ytimg.com/vi/xzrHbJmQbB8/1.jpg",
                    Source = "https://www.youtube.com/watch?v=xzrHbJmQbB8"
                });

                videos.Add(new Video()
                {
                    Title = "Progress Application Server OpenEdge",
                    Poster = "https://i.ytimg.com/vi/CpHKm2NruYc/1.jpg",
                    Source = "https://www.youtube.com/watch?v=3Ce11N9udR4"
                });
            }
        }

        public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
        {
            return new JsonResult(videos.ToDataSourceResult(request));
        }
    }
}

C#

namespace Telerik.Examples.RazorPages.Models
{
    public class Video
    {
        public string Title { get; set; }
        public string Source { get; set; }
        public string Poster { get; set; }
    }
}

For the complete project, refer to the MediaPlayer in Razor Pages example.

See Also

• Using Telerik UI for ASP.NET Core in Razor Pages
• Client-Side API of the MediaPlayer
• Server-Side HtmlHelper API of the MediaPlayer
• Server-Side TagHelper API of the MediaPlayer
• Knowledge Base Section