NToastNotify

Merkmale

• Serverseitiges Rendern von Toastbenachrichtigungen.

• Toast-Benachrichtigung bei AJAX-Aufrufen. XMLHTTPRequests – Volle Unterstützung. Abruf-API – Teilweise Unterstützung (siehe Beispiel).

• Unterstützt die Projektstruktur von Feature-Ordnern.

• Unterstützt mehrere Client-Bibliotheken: toastr.js und noty.js. Kann leicht erweitert werden, um mehr zu unterstützen.

DEMOs

• Noty | Quelle

• Toastr | Quelle

Legen Sie los

1. Von Nuget installieren

Visual Studio Nuget Package Manager – Install-Package NToastNotify

dotnet CLI – dotnet add package NToastNotify

2. Fügen Sie NtoastNotify zu den ASP.NET Core Services hinzu. Verwenden Sie die Erweiterungsmethode für IMVCBuilder oder IMVCCoreBuilder

• Für Toastr.js [ Hinweis: Die Toastr-Bibliothek hängt von jQuery ab ]

   using NToastNotify.Libraries;services.AddMvc().AddNToastNotifyToastr(new ToastrOptions(){ProgressBar = false,PositionClass = ToastPositions.BottomCenter});//Oder gehen Sie einfach zu services.AddMvc().AddNToastNotifyToastr();

• Für Noty.js

   using NToastNotify.Libraries;services.AddMvc().AddFeatureFolders().AddNToastNotifyNoty(new NotyOptions {ProgressBar = true,Timeout = 5000,Theme = "mint"});//Oder einfach goservices.AddMvc().AddNToastNotifyNoty();

Hinweis: Stellen Sie sicher, dass Sie über die erforderlichen Using-Anweisungen verfügen.

Der Parameter ToastrOption fungiert als globale Optionen für die Toastbibliothek. Wenn keine Optionen bereitgestellt werden, sind die globalen Einstellungen die Standard-Toaster-Optionen.

3. Fügen Sie die Middleware hinzu

 public voidConfigure(IApplicationBuilder app, IHostingEnvironment env)
 {//HINWEIS: Diese Zeile muss über .UseMvc() line.app.UseNToastNotify();app.UseMvc(routes =>{routes.MapRoute(name: "default",template: "{controller=Home}/{action =Index}/{id?}");});
 }

4. Fügen Sie die folgende Zeile in Ihre HTML-Datei ein. Am besten auf Ihrer Layoutseite.

 @await Component.InvokeAsync("NToastNotify")

Die obige Zeile stellt die für die Ansichtskomponente erforderliche Ansicht dar. Obwohl Sie diese Zeile an einer beliebigen Stelle innerhalb Ihres head oder body -Tags platzieren können, wird empfohlen, diese Zeile am Ende vor dem schließenden body -Tag zu platzieren.

5. Fügen Sie Ihre Toastnachrichten hinzu.

mit Toaster

 öffentliche Klasse HomeController : Controller{private readonly IToastNotification _toastNotification;public HomeController(IToastNotification toastNotification){_toastNotification = toastNotification;}public IActionResult Index(){//Standardmethoden testen//Success_toastNotification.AddSuccessToastMessage("Same for success message");// Erfolgreich mit Standardoptionen (unter Berücksichtigung der überschriebenen Standardeinstellungen bei der Initialisierung in Startup.cs)_toastNotification.AddSuccessToastMessage();//Info_toastNotification.AddInfoToastMessage();//Warning_toastNotification.AddWarningToastMessage();//Error_toastNotification.AddErrorToastMessage();return View();}public IActionResult About(){_toastNotification.AddInfoToastMessage( „Sie wurden weitergeleitet“);return View();}public IActionResult Contact(){_toastNotification.AddAlertToastMessage("Sie werden weitergeleitet");return RedirectToAction("About");}public IActionResult Error(){_toastNotification.AddErrorToastMessage("Mit dieser Anfrage stimmt etwas nicht .");return View();}public IActionResult Empty(){return View();}public IActionResult Ajax(){_toastNotification.AddInfoToastMessage("Diese Seite stellt Ajax-Anfragen und zeigt Benachrichtigungen an.");return View();}public IActionResult AjaxCall(){System.Threading.Thread.Sleep(2000);_toastNotification.AddSuccessToastMessage(" Dieser Toast wird auf Ajax-Anfrage angezeigt. AJAX CALL " + DateTime.Now.ToLongTimeString());return PartialView("_PartialView", "Ajax Call");}public IActionResult NormalAjaxCall(){return PartialView("_PartialView", "Normal Ajax Call");}public IActionResult ErrorAjaxCall(){throw new Exception("Fehler ist aufgetreten");}}

Verwenden von Noty (im Grunde dasselbe, nur was sich ändert, ist der Optionstyp, hier NotyOptions)

 öffentliche Klasse HomeController : Controller{private readonly IToastNotification _toastNotification;public HomeController(IToastNotification toastNotification){_toastNotification = toastNotification;}public IActionResult Index(){_toastNotification.AddSuccessToastMessage();_toastNotification.AddErrorToastMessage("Test Erro", new NotyOptions(){Timeout = 0});return View();}public IActionResult About(){ViewData["Message"] = "Ihre Anwendungsbeschreibungsseite.";_toastNotification.AddAlertToastMessage("My About Warning Message");return View();}public IActionResult Contact(){ViewData["Message"] = "Ihre Kontaktseite.";_toastNotification.AddInfoToastMessage("Lassen Sie sich nicht verwirren. <br /> <strong>Sie wurden von der Kontaktseite weitergeleitet. <strong/>");return RedirectToAction("About");}public IActionResult Error(){_toastNotification.AddErrorToastMessage("Bei dieser Anfrage stimmt etwas nicht.");return View(new ErrorViewModel { RequestId = Activity.Current? .Id ?? HttpContext.TraceIdentifier });}public IActionResult Ajax(){_toastNotification.AddInfoToastMessage("Diese Seite stellt Ajax-Anfragen und zeigt Benachrichtigungen an.");return View();}public IActionResult AjaxCall(){System.Threading.Thread.Sleep(2000);_toastNotification.AddSuccessToastMessage(" Dieser Toast wird auf Ajax-Anfrage angezeigt. AJAX CALL " + DateTime.Now.ToLongTimeString());return PartialView("_PartialView", "Ajax Call");}public IActionResult NormalAjaxCall(){return PartialView("_PartialView", "Normal Ajax Call");}public IActionResult ErrorAjaxCall(){throw new Exception("Fehler ist aufgetreten");}}

Mögliches Problem

• Toast wird nach POST-REDIRECT nicht angezeigt

FIX Wenn Sie CookieTempDataProvider verwenden (dies ist die Standardeinstellung), müssen Sie die Aufforderung zur Cookie-Richtlinie akzeptieren.

Führen Sie das Repo lokal aus

• npm install

• npm build

• dotnet restore

• dotnet build

Führen Sie ein beliebiges Beispielprojekt mit dotnet run aus dem Beispielprojektverzeichnis aus

Werde Patreon