index-scripts.js

@section scripts {
    <script src="~/lib/signalr.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

    <script type="text/javascript">

        var hubConnection;

        var clear = function () {
            $("#grid-events").find("tr:gt(0)").remove();
            $("#grid-events").hide();
        }

        var addEvent = function (id, eventType, subject, eventTime, data) {
            var context = {
                gridEventType: eventType,
                gridEventSubject: subject,
                gridEventId: id,
                gridEvent: data
            };
            var source = document.getElementById('event-template').innerHTML;
            var template = Handlebars.compile(source);
            var html = template(context);

            $("#grid-events").show();
            $('#grid-event-details').prepend(html);
        }

        var initialize = function () {
            $("#grid-events").hide();
            var clearEvents = document.getElementById('clear-events');
            clearEvents.addEventListener('click', function () {
                clear();
            });

            hubConnection = new signalR.HubConnectionBuilder()
                .withUrl("hubs/gridevents")
                .configureLogging(signalR.LogLevel.Information)
                .build();

            hubConnection.start().catch(err => console.error(err.toString()));
            hubConnection.on('gridupdate', function (id, eventType, subject, eventTime, data) {
                addEvent(id, eventType, subject, eventTime, data);
            });
        };

        $(document).ready(function () {
            initialize();
        });

    </script>
}