NToastNotify

特徴

• サーバー側のトースト通知のレンダリング。

• AJAX 呼び出しのトースト通知。 XMLHTTPRequests - 完全サポート。 fetch API - 部分的なサポート (サンプルを参照)。

• フィーチャーフォルダープロジェクト構造をサポートします。

• 複数のクライアント ライブラリ (toastr.js および noty.js) をサポートします。さらに多くのサポートを行うために簡単に拡張できます。

デモ

• ノティ |ソース

• トースター |ソース

始めましょう

1.Nugetからインストールする

Visual Studio Nuget パッケージ マネージャー - Install-Package NToastNotify

dotnet CLI - dotnet add package NToastNotify

2. NtoastNotify を ASP.NET Core サービスに追加します。 IMVCBuilderまたはIMVCCoreBuilderで拡張メソッドを使用する

• Toastr.js の場合 [注:トースト ライブラリは jQuery に依存します]

   using NToastNotify.Libraries;services.AddMvc().AddNToastNotifyToastr(new ToastrOptions(){ProgressBar = false,PositionClass = ToastPositions.BottomCenter});//または単に services.AddMvc().AddNToastNotifyToastr(); を使用します。

• Noty.jsの場合

  using NToastNotify.Libraries;services.AddMvc().AddFeatureFolders().AddNToastNotifyNoty(new NotyOptions {ProgressBar = true,Timeout = 5000,Theme = "mint"});//または単純に goservices.AddMvc().AddNToastNotifyNoty();

注: 必要な using ステートメントがあることを確認してください。

ToastrOption パラメーターは、トースト ライブラリのグローバル オプションとして機能します。オプションが指定されない場合、グローバル設定はデフォルトのトースト オプションになります。

3.ミドルウェアを追加する

 public void Configure(IApplicationBuilder アプリ、IHostingEnvironment env)
 {//注: この行は .UseMvc() line.app.UseNToastNotify();app.UseMvc(routes =>{routes.MapRoute(name: "default",template: "{controller=Home}/{action) より上にある必要があります。 =インデックス}/{id?}");});
 }

4. HTML ファイルに次の行を追加します。できればレイアウト ページ内で。

 @await Component.InvokeAsync("NToastNotify")

上記の行は、ビュー コンポーネントに必要なビューをレンダリングします。この行はheadまたはbodyタグ内のどこにでも配置できますが、 body終了タグの前の最後に配置することをお勧めします。

5. トーストメッセージを追加します。

トーストを使用する

public class HomeController : Controller{private readonly IToastNotification _toastNotification;public HomeController(IToastNotification pastNotification){_toastNotification = pastNotification;}public IActionResult Index(){//デフォルト メソッドのテスト//Success_toastNotification.AddSuccessToastMessage("Same for success message");//デフォルトのオプションで成功しました (上書きされたオプションを考慮して) Startup.cs)_toastNotification.AddSuccessToastMessage();//Info_toastNotification.AddInfoToastMessage();//Warning_toastNotification.AddWarningToastMessage();//Error_toastNotification.AddErrorToastMessage();return View();}public IActionResult での初期化時のデフォルトAbout(){_toastNotification.AddInfoToastMessage("リダイレクトされました");return View();}public IActionResult Contact(){_toastNotification.AddAlertToastMessage("リダイレクトされます");return RedirectToAction("About");}public IActionResult Error(){_toastNotification.AddErrorToastMessage("これには問題がありましたrequest.");return View();}public IActionResult Empty(){return View();}public IActionResult Ajax(){_toastNotification.AddInfoToastMessage("このページは Ajax リクエストを作成し、通知を表示します。");return View( );}パブリック IActionResult AjaxCall(){System.Threading.Thread.Sleep(2000);_toastNotification.AddSuccessToastMessage("このトーストは Ajax リクエストに表示されます。 AJAX CALL " + DateTime.Now.ToLongTimeString());return PartialView("_PartialView", "Ajax Call");}public IActionResult NormalAjaxCall(){return PartialView("_PartialView", "Normal Ajax Call");}public IActionResult ErrorAjaxCall(){新しい例外をスロー(「エラーが発生しました」);}}

noty を使用する (基本的に同じことですが、変更されるのはオプションの種類だけです。ここでは NotyOptions です)

 public class HomeController : Controller{private readonly IToastNotification _toastNotification;public HomeController(IToastNotification pastNotification){_toastNotification = pastNotification;}public IActionResult Index(){_toastNotification.AddSuccessToastMessage();_toastNotification.AddErrorToastMessage("Test Erro", new NotyOptions(){Timeout = 0});return View();}public IActionResult About(){ViewData["Message"] = "アプリケーションの説明ページ。";_toastNotification.AddAlertToastMessage("My About Warning Message");return View();}public IActionResult Contact(){ViewData["Message"] = "あなたの連絡先ページ。";_toastNotification.AddInfoToastMessage("混乱しないでください。<br /> <strong>連絡先ページからリダイレクトされました。<strong/>");return RedirectToAction("About");}public IActionResult Error(){_toastNotification.AddErrorToastMessage("このリクエストには問題がありました。");return View (new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });}public IActionResult Ajax(){_toastNotification.AddInfoToastMessage("このページは Ajax リクエストを作成し、通知を表示します。");return View();}public IActionResult AjaxCall(){System.Threading.Thread.Sleep(2000);_toastNotification.AddSuccessToastMessage("このトーストは Ajax リクエストで表示されます。 AJAX CALL " + DateTime.Now.ToLongTimeString());return PartialView("_PartialView", "Ajax Call");}public IActionResult NormalAjaxCall(){return PartialView("_PartialView", "Normal Ajax Call");}public IActionResult ErrorAjaxCall(){新しい例外をスロー(「エラーが発生しました」);}}

考えられる問題

• POST-REDIRECT 後にトーストが表示されない

修正: CookieTempDataProvider (これがデフォルト) を使用している場合は、Cookie ポリシーのプロンプトを受け入れる必要があります。

リポジトリをローカルで実行する

• npm install

• npm build

• dotnet restore

• dotnet build

dotnet run from サンプル プロジェクト ディレクトリを使用してサンプル プロジェクトを実行します

パトロンになる