ToastNotification
ToastNotification copied to clipboard
aspnetcorehero
Notyf messages don't appear from POST function in ASP.Net Core 5.0
I have added some notyf messages in my ASP.Net Core 5.0 web app with Razor pages which look great! These messages work great from the OnGet() function when the page is created. I have added some notyf calls in the OnPut() function but these messages aren't displayed until navigation to the next page. Is there any way to force the notyf messages to display immediately in a OnPost() function call?
Hi Omar,
I found that if I use an ajax call to do the post action, I can call a Notyf message in the post function and it will appear on the web page when returning from the post function. Here is part of my code as an example. However, when calling a post function using ajax, I have to pass all of the form data since this is not posted automatically from my Razor web page (am using Microsoft Visual Studio and C# Razor pages):
Javascript:
var myData = { "FirstName": FirstName, "LastName": LastName, "EmailAddress": EmailAddress, "JSONservices": servicesLink, "JSONAccessLevels": AccessLevelsJSONstring };
// invoke the function to create a new staff account
$.ajax({
type: "POST",
url: '/Staff/EditStaffAccount?handler=UpdateStaffAccount',
data: myData,
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
//
success: function (result) {
//display the message
console.log(result.message);
//were we successful?
if (result.status === "success") {
//set the flag
UpdatedStaffInfo = true;
}
else {
//set the flag that a new location wasn't added
UpdatedStaffInfo = false;
}
},
error: function (xhr, status, errorThrown) {
var err = "Error encountered, status: " + status + " xhr.statuscode: " + xhr.status;
console.log(err);
alert(status.message);
}, …
C# Razor Page:
public async Task<IActionResult> OnPostUpdateStaffAccount(StaffAccount NewStaffInfo,
string JSONservices, string JSONAccessLevels)
{
//create a new staff account
// …
//<my code here>
// all done
DisplayMessage = "Updated staff account for " + origStaffInfo.FirstName + " " + origStaffInfo.LastName;
_notifyService.Custom(DisplayMessage, 5, "#0020C2"); //Cobalt Blue
return new JsonResult(new { status = "success", message = DisplayMessage });
}
The “Updated staff account…” message will appear on the web page when returning the JsonResult.
Hope this helps!
Best regards, Bruce
Bruce Tompkins
-
(403) 399-3871
-
1-888-266-4381 (toll free)
-
@.*** @.***>
Member of Sukyo Mahikari Since 1993
From: Omar Ashraf @.> Sent: Wednesday, September 15, 2021 5:56 AM To: aspnetcorehero/ToastNotification @.> Cc: BruceInCalgary @.>; Author @.> Subject: Re: [aspnetcorehero/ToastNotification] Notyf messages don't appear from POST function in ASP.Net Core 5.0 (#8)
i have the same issue, did you find a solution ?
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aspnetcorehero/ToastNotification/issues/8#issuecomment-919952459 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AD4OYYKHIAU7MZJ2A76LXW3UCCCTHANCNFSM466KVOUA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . https://github.com/notifications/beacon/AD4OYYO7PHQV5NSC4ZM6F5LUCCCTHA5CNFSM466KVOUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOG3KVYSY.gif
Hi Omar,
I might also mention that there are also points in my UpdateStaffAccount() post function (mentioned in my first email reply) that if an error is encountered I do return an error status and use Notyf to display an error message. Here is an example:
if (!result.Succeeded)
{
ErrorMessage = "";
foreach (IdentityError errorResult in result.Errors)
{
//if we have a username already taken, change username to email (they are the same in Identity)
if (errorResult.Description.IndexOf("User name") >= 0)
{
ErrorMessage += errorResult.Description.Replace("User name", "Email address");
}
else
{
ErrorMessage += errorResult.Description;
}
}
// error in creating a new Identity user
_notifyService.Custom(ErrorMessage, 10, "#DC143C"); //Crimson
return new JsonResult(new { status = "Error", message = ErrorMessage });
}
Best regards, Bruce
Bruce Tompkins
-
(403) 399-3871
-
1-888-266-4381 (toll free)
-
@.*** @.***>
Member of Sukyo Mahikari Since 1993
From: Bruce Tompkins @.> Sent: Wednesday, September 15, 2021 4:19 PM To: 'aspnetcorehero/ToastNotification' @.> Cc: Bruce Tompkins @.***> Subject: RE: [aspnetcorehero/ToastNotification] Notyf messages don't appear from POST function in ASP.Net Core 5.0 (#8)
Hi Omar,
I found that if I use an ajax call to do the post action, I can call a Notyf message in the post function and it will appear on the web page when returning from the post function. Here is part of my code as an example. However, when calling a post function using ajax, I have to pass all of the form data since this is not posted automatically from my Razor web page (am using Microsoft Visual Studio and C# Razor pages):
Javascript:
var myData = { "FirstName": FirstName, "LastName": LastName, "EmailAddress": EmailAddress, "JSONservices": servicesLink, "JSONAccessLevels": AccessLevelsJSONstring };
// invoke the function to create a new staff account
$.ajax({
type: "POST",
url: '/Staff/EditStaffAccount?handler=UpdateStaffAccount',
data: myData,
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
},
//
success: function (result) {
//display the message
console.log(result.message);
//were we successful?
if (result.status === "success") {
//set the flag
UpdatedStaffInfo = true;
}
else {
//set the flag that a new location wasn't added
UpdatedStaffInfo = false;
}
},
error: function (xhr, status, errorThrown) {
var err = "Error encountered, status: " + status + " xhr.statuscode: " + xhr.status;
console.log(err);
alert(status.message);
}, …
C# Razor Page:
public async Task<IActionResult> OnPostUpdateStaffAccount(StaffAccount NewStaffInfo,
string JSONservices, string JSONAccessLevels)
{
//create a new staff account
// …
//<my code here>
// all done
DisplayMessage = "Updated staff account for " + origStaffInfo.FirstName + " " + origStaffInfo.LastName;
_notifyService.Custom(DisplayMessage, 5, "#0020C2"); //Cobalt Blue
return new JsonResult(new { status = "success", message = DisplayMessage });
}
The “Updated staff account…” message will appear on the web page when returning the JsonResult.
Hope this helps!
Best regards, Bruce
Bruce Tompkins
-
(403) 399-3871
-
1-888-266-4381 (toll free)
-
@.*** @.***>
Member of Sukyo Mahikari Since 1993
From: Omar Ashraf @.*** @.> > Sent: Wednesday, September 15, 2021 5:56 AM To: aspnetcorehero/ToastNotification @. @.> > Cc: BruceInCalgary @. @.> >; Author @. @.***> > Subject: Re: [aspnetcorehero/ToastNotification] Notyf messages don't appear from POST function in ASP.Net Core 5.0 (#8)
i have the same issue, did you find a solution ?
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aspnetcorehero/ToastNotification/issues/8#issuecomment-919952459 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AD4OYYKHIAU7MZJ2A76LXW3UCCCTHANCNFSM466KVOUA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub . https://github.com/notifications/beacon/AD4OYYO7PHQV5NSC4ZM6F5LUCCCTHA5CNFSM466KVOUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOG3KVYSY.gif
Hi community,
After some research, I finally found the solution for this issue. In order to trigger the notification you must have this inside of your ajax call:
error: function(jqXhr) { getResponseHeaders(jqXhr); }
Hope this helps you! 😎 Best Regards
