My task is to show banner messages on the user interface based on the number of items in a list.
In my _Layout file, I called my partial view like this:
@Html.Partial("~/_Notification.cshtml")The content of _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")
My JavaScript file:
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();
});
My Controller method:
[HttpGet]
[Route("Notification/GetBannerNotifications")]
public JsonResult GetBannerNotifications(DateTime? dateTime)
{
var listOfStrings = this.notificationService.GetBannerNotifications(dateTime.Value);
return this.Json(listOfStrings, JsonRequestBehavior.AllowGet);
}
Output: https://i.sstatic.net/fgXjO.png
The image below only contains one string, but even if there are multiple strings, it shows all of them in one image.
It merges all the strings into a single string and displays that on the UI.
However, I want to display this image multiple times depending on the number of strings in the list.