如何根据列表中的项目数多次显示通知答案

【问题标题】：How to display Notification multiple times based on number of items in the list如何根据列表中的项目数多次显示通知
【发布时间】：2021-04-21 10:34:56
【问题描述】：

我的要求是根据列表中的项目数量在 UI 上显示横幅消息。

在 _Layout 文件上我调用了我的局部视图：

@Html.Partial("~/_Notification.cshtml")

_Notification.cshtml

    <div id="outage-notification" class="row" style="display: none;">
        <div>
            <div>
                <div id="notification-content" class="notification-content"></div>
                <div class="dismiss-notification"><a class="small noloader" href="javascript: void(0);" >@CommonUIResources.Dismiss</a></div>
            </div>
        </div>
    </div>
@Scripts.Render("~/bundles/outageNotification")

我的 javascript 文件：

var outageNotification;
class OutageNotification {
    constructor() {
        this.setup();
    }
    setup() {
        var date1 = new Date().toUTCString();
        $.ajax({
            type: "GET",
            url: "Notification/GetBannerNotifications",
            data: { dateTime: date1 },
            success: function (notificationMessage) {
                if (notificationMessage !== undefined && notificationMessage !== "") {
                    $("#notification-content").append(notificationMessage);
                    $("#notification").fadeIn("slow");
                }
                else {
                }
            }
        });
    }
}
$(document).ready(() => {
    this.outageNotification = new OutageNotification();
});

我的控制器方法：

        [HttpGet]
        [Route("Notification/GetBannerNotifications")]
        public JsonResult GetBannerNotifications(DateTime? dateTime)
        {
            var listOfStrings = this.notificationService.GetBannerNotifications(dateTime.Value);
            return this.Json(listOfStrings, JsonRequestBehavior.AllowGet);
        }

输出：

下图只包含一个字符串，但如果我有多个字符串，那么它也会在一张图像中显示所有字符串。

它将所有字符串显示为单个字符串并在 UI 中显示该字符串。
但我需要多次显示此图像取决于列表中的多个字符串。

【问题讨论】：

标签： javascript c# .net asp.net-mvc asp.net-core

【解决方案1】：

它将所有字符串显示为单个字符串并在 UI 中显示该字符串。但我需要多次显示此图像取决于列表中的多个字符串。

如果GetBannerNotifications action方法返回一个字符串列表，你会在JS客户端从返回的数据中得到一个json数组，如下所示。

["ohello1 1/14/2021 12:00:00 PM-1/14/2021 12:30:00 PM","ohello2 1/15/2021 12:00:00 PM-1/15/2021 12:30:00 PM"]

为了实现您的上述要求，您可以尝试遍历返回的 json 数组数据，然后动态显示您的 outage-notification 小部件。

var date1 = new Date().toUTCString();
$.ajax({
    type: "GET",
    url: "Notification/GetBannerNotifications",
    data: { dateTime: date1 },
    success: function (notificationMessage) {
        if (notificationMessage !== undefined && notificationMessage !== "") {

            console.log(notificationMessage);

            $("#notification-content").html(notificationMessage[0]);

            $.each(notificationMessage, function (i, mes) {
                if (i > 0) {
                    console.log(mes);

                    //code logic here depends on which plugin you are using

                    //follwoing code snippet for testing purpose with using fadeIn&fadeOut animation
                    $("#outage-notification").fadeIn(5000, function () {
                        $("#outage-notification").fadeOut("slow");

                        $("#notification-content").html(mes);
                    });
                }                        

            })

        }
        else {
        }
    }
});

【讨论】：