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);
}