New to Telerik UI for ASP.NET Core? Download free 30-day trial

Razor Page

This article describes an example how to configure the Telerik UI Notification for ASP.NET Core in a RazorPage scenario and get its value from the server.

For the full project with RazorPages examples, visit our GitHub repository.

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

    <button id="showNotification" class="k-button">Show notification</button>

    @(Html.Kendo().Notification()
        .Name("notification")
        .Width("20em")
        .Templates(t =>
        {
            t.Add().Type("info")
                .ClientTemplate("<div>TEXT: <span class='custom-style'>#: text #</span> </div> <div>TIME: <span class='custom-style'>#: time #</span> </div>");
        })
    )
    <script>
        $(document).ready(function () {
            $("#showNotification").click(function () {
                $.ajax({
                    url: '/Notification/NotificationIndex?handler=Read',
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    headers: {
                        RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
                    },
                    dataType: "json",
                    success: function (response) {
                        // Show notification based on the returned data from the server                    
                        var notification = $("#notification").getKendoNotification();
                        notification.show({
                            text: response.Text,
                            time: kendo.toString(new Date(response.Time), "dd MMMM yy hh:mm tt")
                        }, "info");
                    }
                });
            });
        });
    </script>
<kendo-notification name="notification"
                    width="200">
    <templates>
        <notification-template type="info"
                               template="<div>TEXT: <span class='custom-style'>#: text #</span> </div> <div>TIME: <span class='custom-style'>#: time #</span> </div>">

        </notification-template>
    </templates>
</kendo-notification>

    public JsonResult OnPostRead()
    {
        NotificationModel model = new NotificationModel()
        {
            Text = "Notification Text",
            Time = DateTime.Now
        };
        return new JsonResult(model);
    }

See Also

In this article