在ASP.NET Core Razor页面中使用吐司通知
#javascript #网络开发人员 #csharp #dotnetcore

敬酒的目的使用户知道他们的行动已得到认可，或者发生了一些事情，例如一封电子邮件，以礼貌地到达。

注意
来自Bootstrap：Toasts是轻巧的通知，旨在模仿移动和台式操作系统普及的推送通知。

代码样本

与网络上的其他代码样本不同，有很多代码样本在HTML，JavaScript和C＃之间相互作用，这些代码示例通常排除C＃。

库

在本文中，由于Bootstrap支持可访问性，而其他库不支持可访问性。可访问性非常重要，因为如果不使网站访问客户访问的情况可能会丢失。

引导程序

要开始，请阅读toast的文档。

Bootstrap的主要好处之一是它适用于屏幕读取器，这在Bootstrap文档中进行了讨论，而其他库无法与屏幕读取器合作。

通常有人在页面的右下角看到吐司，而Windows桌面吐司则相同。

示例，为吐司创建一个容器

<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 11">

位置固定的底部-0 End-0告诉Bootstrap将吐司或吐司放在页面的右下角。

在上面的容器中添加吐司

<div class="toast text-white bg-danger border-0" 
     id="bottomToast" 
     role="alert" 
     aria-live="assertive" 
     aria-atomic="true">

    <div class="d-flex">
        <div class="toast-body">
            @Model.Bottom
        </div>
        <button type="button" 
                class="btn-close btn-close-white me-2 m-auto" 
                data-bs-dismiss="toast"
                aria-label="Close"></button>
    </div>
</div>

用于设置吐司的身体文本的模型。

public class MessageContainer
{
    public string Top { get; set; }
    public string Bottom { get; set; }
}

...

[BindProperty]
public MessageContainer MessageContainer { get; set; }

在Onget中设置了代码以接收两个吐司的文本，如果没有粘贴，则默认为默认值。在“代码示例”中，在索引页面上有两个输入，当将表单重定向到隐私页面时，通过JSON直接使用默认数据时通过JSON传递数据。

public void OnGet(string containers)
{
    MessageContainer = new MessageContainer();

    if (!string.IsNullOrWhiteSpace(containers))
    {
        List<ToastContainer>? data = JsonSerializer.Deserialize<List<ToastContainer>>(containers);

        MessageContainer.Top = data.FirstOrDefault(x => x.Name == "Top").Body;
        MessageContainer.Bottom = data.FirstOrDefault(x => x.Name == "Bottom").Body;
    }
    else
    {
        MessageContainer.Top = "Top message";
        MessageContainer.Bottom = "Bottom message";
    }
}

要显示吐司，使用以下JavaScript。

function bottomToast() {
    var toastElList = [].slice.call(document.querySelectorAll('#bottomToast'));
    var toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(toastEl);
    });
    toastList.forEach(toast => toast.show());
}

结果

Displaying bottom toast

页面上的中心吐司

尽管烤面包通常显示在页面的右下角，但它们可以放在顶部或中心。

Displaying toast center page

对于上述，我们使用几个bootstrap类并设置Div容器的高度。

<div aria-live="polite" 
     aria-atomic="true" 
     class="d-flex justify-content-center align-items-center w-100" 
     style="height: calc(100vh - 125px - 125px);">

    <div class="toast bg-danger"
         role="alert"
         aria-live="assertive"
         aria-atomic="true"
         id="toast1">

        <div class="toast-header">

            <strong class="me-auto">Alert</strong>
            <small>code sample</small>

            <button type="button" 
                    class="btn-close" 
                    data-bs-dismiss="toast" 
                    aria-label="Close"></button>
        </div>

        <div class="toast-body text-white">
            This toast is centered on the page
        </div>

    </div>
</div>

使用JavaScript在上面显示吐司。

$("#toastButton1").click(function () {
    $("#toast1").toast("show");
});

问一个问题

toast asking yes no question

在这里，我们在带标识符的烤面包主体上添加两个按钮。

<div class="toast" 
     role="alert" 
     id="buttonExample"
     aria-live="assertive" 
     aria-atomic="true">
    <div class="toast-body">
        Click [Take action] button!
        <div class="mt-2 pt-2 border-top">

            <button type="button"
                    class="btn btn-primary btn-sm"
                    id="takeAction">
                Take action
            </button>

            <button type="button"
                    class="btn btn-secondary btn-sm"
                    id="noAction"
                    data-bs-dismiss="toast">
                Close
            </button>

        </div>
    </div>
</div>

将一个将在JavaScript中设置的页面添加一个属性。

[BindProperty]
public bool TakeAction { get; set; }

javascript处理两个按钮点击事件。

document.getElementById("takeAction").addEventListener("click", function () {
    document.getElementById("takeActionValue").value = true;
    document.getElementById("form1").submit();
});

document.getElementById("noAction").addEventListener("click", function () {
    document.getElementById("takeActionValue").value = false;
    document.getElementById("form1").submit();
});

然后onpost，在这种情况下，使用Serilog display是或否，Yesno是一种语言扩展。

public void OnPost()
{
    Log.Information("Take action {A}", TakeAction.ToYesNo());
}

使用警报

总是有使用dismissing Alert的选项，在下面的示例中等待三秒钟以比显示。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="container">
    <div class="alert alert-primary alert-dismissible fade show d-none"
         role="alert"
         id="customAlert">

        <strong>Attention</strong> time to take a break.
        <button type="button" class="btn-close" 
                data-bs-dismiss="alert" 
                aria-label="Close"></button>

    </div>
</div>

@section Scripts
{
    <script>
        document.addEventListener("DOMContentLoaded", handleClick);

        async function handleClick() {
            await new Promise((resolve) => setTimeout(resolve, 3000));
            document.querySelector("#customAlert").classList.remove("d-none");
        }
    </script>
}

AspnetCorehero.toastnotification

ToastNotification是ASP.NET核心Web应用程序的最小且优雅的吐司通知软件包，可以通过C＃调用。与ASP.NET Core 3.1和.NET 5.（使用.NET Core 6和.NET Core 7）。

  • 不是WCAG投诉
  • 不是最好的文档

AspNetCoreHero page

简单的设置

private readonly INotyfService _toastNotificationService;
public ToastPageModel(ILogger<ToastPageModel> logger, INotyfService toastNotificationService)
{
    _toastNotificationService = toastNotificationService;
}

用法

添加一个按钮

<input type="submit" class="btn btn-success"  value="Success"
       asp-page-handler="SuccessNotification"/>

添加帖子事件

public void OnPostSuccessNotification()
{
    _toastNotificationService.Success("Work finished");
}

自定义版本

public void OnPostCustomNotification()
{
    _toastNotificationService.Custom(
        message: "Email sent", 
        durationInSeconds: 2, 
        backgroundColor: "black", 
        iconClassName: "fa fa-gear");
}

包装

符合WCAG的强大吐司的明确选择是引导程序。还有其他用于诸如kendo通知的付费

每个人都会有自己的选择，这就是为什么在提供的源代码中，还有一些可以尝试的库。

需要

  • Microsoft Visual Studio 2022或更高版本
  • .NET CORE 7（随着范围命名空间等较小的更改，将使用.NET Core 6 worjk）

源代码

克隆以下github repository。

比本文介绍的代码要多得多。

警告

在几个页面中，CSS和JavaScript已嵌套。 JavaScript是有点出血的边缘，因为有时代码被缓存和/或Visual Studio抱怨覆盖文件。

nested files