Example of custom Hangfire page

ExamplePage.cshtml

@*
    Generator: Template
    TypeVisibility: Public
    GeneratePrettyNames: true
    Namespace: Hangfire.Dashboard.Pages    
*@
@using System.Xml
@using Fator.Hangfire.Custom.Storage
@using Hangfire.Dashboard
@using Hangfire.Dashboard.Pages
@using Hangfire.Storage
@inherits RazorPage
@{   
    Layout = new LayoutPage("Loaded Jobs");
    List<PersistentJobDto> persistentJobs;

    int from, perPage;

    int.TryParse(Query("from"), out from);
    int.TryParse(Query("count"), out perPage);

    Pager pager = null;

    using (var connection = Storage.GetConnection())
    {
        var storageConnection = connection as JobStorageConnection;
        if (storageConnection != null)
        {
            pager = new Pager(from, perPage, storageConnection.GetPersistentJobCount());
            persistentJobs = storageConnection.GetPersistentJobs(pager.FromRecord, pager.FromRecord + pager.RecordsPerPage - 1);
        }
        else
        {
            persistentJobs = connection.GetPersistentJobs();
        }
    }
}

<div class="row">
    <div class="col-md-12">
        <h1 class="page-header">Loaded Jobs (Plugins)</h1>

        @if (persistentJobs.Count == 0)
        {
            <div class="alert alert-info">
                No plugins were loaded.
            </div>
        }
        else
        {
            <div class="js-jobs-list">
                <div class="btn-toolbar btn-toolbar-top">
                    <button class="js-jobs-list-command btn btn-sm btn-primary"
                            data-url="@Url.To("/persistent/trigger")"
                            data-loading-text="Triggering..."
                            disabled="disabled">
                        <span class="glyphicon glyphicon-play-circle"></span>
                        Trigger now
                    </button>

                    <button class="js-jobs-list-command btn btn-sm btn-default"
                            data-url="@Url.To("/persistent/remove")"
                            data-loading-text="Removing..."
                            data-confirm="Do you really want to REMOVE ALL selected jobs?"
                            disabled="disabled">
                        <span class="glyphicon glyphicon-remove"></span>
                        Remove
                    </button>

                    @if (pager != null)
                    {
                        @: @Html.PerPageSelector(pager)
                    }
                </div>

                <table class="table">
                    <thead>
                    <tr>
                        <th class="min-width">
                            <input type="checkbox" class="js-jobs-list-select-all"/>
                        </th>
                        <th class="min-width">Id</th>
                        <th>Job</th>                        
                        <th class="align-right min-width">Last execution</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var job in persistentJobs)
                    {
                        <tr class="js-jobs-list-row hover">
                            <td>
                                <input type="checkbox" class="js-jobs-list-checkbox" name="jobs[]" value="@job.Id"/>
                            </td>
                            <td class="min-width">@job.Id</td>
                            <td>
                                @if (job.Job != null)
                                {
                                    @: @Html.JobName(job.Job)
                                }
                                else
                                {
                                    <em>@job.LoadException.InnerException.Message</em>
                                }
                            </td>                            
                            <td class="align-right min-width">
                                @if (job.LastExecution != null)
                                {
                                    if (!string.IsNullOrEmpty(job.LastJobId))
                                    {
                                        <a href="@Url.JobDetails(job.LastJobId)">
                                            <span class="label label-default label-hover" style="@($"background-color: {JobHistoryRenderer.GetForegroundStateColor(job.LastJobState)};")">
                                                @Html.RelativeTime(job.LastExecution.Value)
                                            </span>
                                        </a>
                                    }
                                    else
                                    {
                                        <em>
                                            Canceled
                                            @Html.RelativeTime(job.LastExecution.Value)
                                        </em>
                                    }
                                }
                                else
                                {
                                    <em>N/A</em>
                                }
                            </td>
                        </tr>
                    }
                    </tbody>
                </table>

                @if (pager != null)
                {
                    @: @Html.Paginator(pager)
                }
            </div>
        }
    </div>
</div>