Как грамотно обновлять счетчик уведомлений в меню?

Question

[mindgrow]

Добрый день!

Подскажите как оптимально решить задачу обновления количества сообщений в меню.
Состоит задача в том, что на сайте есть Уведомления. Уведомления могут быть прочитанны/не прочитанны.
В меню в интерфейсе пользователя есть пункт Уведомления. Рядом с ним есть счетчик не прочитанных сообщений. Этот счетчик должен обновляться при
1) обновлении страницы;
2) появлении нового уведомления после действия, которое это уведомление создает;
3) при прочтении уведомления (в блоке уведомления есть кнопка "Отметить прочитанным")

Так выглядит меню:


Так выглядит форма уведомления


В layout Я подсоединяю js-файл со скриптом, который обновляет счетчик при обновлении страницы. Стал писать обновление в обработчике события кнопки "Отметить прочитанным" и понял что я дублирую код. Пробовал вызывать из этого обработчика скрипт, который подсоединен к layout - но понял что так делать нельзя.

Подскажите как лучше решить такую задачу без дублирования кода?

Answer 1

[mindgrow]

Заработал вызов функции обновления из другого js файла. Странно, почему-то вначале не работало.
Сейчас все ок.

Answer 2

[Руслан Самигуллин]

Я реализовал следующим образом:
1. Создал JS класс AlertsContainer, у которого реализовал методы для добавления/удаления оповещений, увеличения/уменьшения счетчика оповещений.
2. При обновлении страницы - в Layout получаю на сервере последние оповещения и формирую с помощью razor - раздел [script], в котором в $( document ).ready() вызывая метод AlertsContainer.AddAlert( '@(alert.Message)', @(isReaded) ); - добавляю последние оповещения, и ставлю число непрочитанных.
3. Если на клиент приходит оповещение - вызываю опять AlertsContainer.AddAlert...
4. Сделал метод на клиенте для пометки оповещения как прочитанное - AlertsContainer.NotificationSetReaded: function (id) { ... } - там с помощью SignalR - сообщение уходит на сервер, уменьшая число непрочитанных и меняет CSS-class у оповещения.

Так и работаю с оповещениями, пока страница не обновится. Вроде без дублирования.

AddAlert - работает с Html.

$(function () {
    AlertsContainer = {
	AddAlert: function (notificationData, notificationName, id, level, created) {
		var builder = [""];
		builder.push("<li id='alert_" + id + "'");
		builder.push(">");
	
		if (self.level == "Error")
			builder.push("<i class='fa fa-exclamation fa-fw'></i>");
		.....
		document.getElementById("alertsContainer").outerHTML = builder.join("")
	},
	AddUnreadCount: function (count) {
        var oldCount = Number( $('#notificationsUnreadCount').html());
		....
		var newVal = oldCount + count;
        $('#notificationsUnreadCount').html(newVal);
	}

@foreach (var alert in alerts)
        {
            @: AlertsContainer.AddAlert(
                    @:'@(alert.Notification.NotificationName)',
                    @:'@(alert.UserNotification.Id)',
                    @:'@((byte?)alert.Notification.Level)',
                    @:'@(alert.UserNotification.Created)' ,
        }