1

Есть сайт на ASP.Net mvc. Сайт отображает состояние множества устройств. Устройства пишут вне зависимости от самого сайта значения в БД (mysql). Страница представляет собой сборную солянку. В View одна подключенная модель, но в этой модели содержится список всех объектов. Например:

public class SyObVM
{
    // список городов
    public IEnumerable<CVM> Cities { get; set; }

    //сообщения
    public IEnumerable<Ev> Events { get; set; }  таких коллекций несколько  
}

Все эти коллекции собираются в контроллере и передаются в View.

Нужно реализовать следующую схему: Пользователь залогинился, отобразилась страница, 1 раз в n секунд проверялась определенная таблица, не появилось ли там чего то нового, если информация добавилась/изменилась необходимо обновлять всю страницу и сигнализировать звуком пользователю.

В БД ранее делал триггер, который пишет в другую таблицу, время и последний идентификатор.
Не знаю, как в asp net mvc сравнивать старое состояние с новым из БД и так каждый цикл и соответственно взаимодействовать с view.

Если бы приложение было десктопным, запомнил при старте значение, затем каждые n секунд брал бы текущее из нужной таблицы, сравнивал значения, если поменялось, оповещаю и меняю стартовое, если нет, продолжаю...

Наверно нужна связка с JS/Ajax..но опыта в вебе маловато.

4
  • Проверка должна происходить на стороне клиента т.е. в браузере, а значит, а это значит вам без JS не обойтись.
    – Bulson
    11 июн 2018 в 20:05
  • а в контроллере это нельзя сделать? например, в js каждые 10 секунд обращаюсь в контроллер, таким образом setInterval(function () {....},10000);. а контроллер уже анализирует... 11 июн 2018 в 20:08
  • Выводите список, во вью добавляете javascript-функцию, которая ищет последний id записи на странице и делает POST-запрос на ajax action, передавая это значение last id и дописывая на страницу пришедшие новые строки. Вам даже триггер не нужен будет в базе. У вас классический mvc или core?
    – A K
    11 июн 2018 в 20:17
  • у меня классический mvc. примера js случайно не найдется? сделать пост запрос и передать туда значения вроде как знаю, но как найти последний id и дописать пришедшие строки не знаю. 11 июн 2018 в 20:27

1 ответ 1

2

Концепт. Так как вы не особо на js, то сделал вам простой пример на стареньком jquery.

У нас будет одна простая модель:

namespace WebApplication2.Models
{
    public class Order
    {
        public int Id { get; set; }

        public string Title { get; set; }
    }
}

И демо-контроллер с выводом списка и выводом диффа:

public class OrderController : Controller
{
    public ActionResult Index()
    {
        var model = new List<Order>
        {
            new Order { Id = 1, Title = "First order" },
            new Order { Id = 2, Title = "Second order" },
        };
        return this.View(model);
    }

    public ActionResult GetNewRecords(int maxId)
    {
        var model = new List<Order>
        {
            new Order { Id = maxId + 1, Title = $"MaxId was {maxId}" },
        };
        return this.Json(model);
    }
}

(Заполните вызовом из базы самостоятельно)

А это собственно сама view:

@model List<WebApplication2.Models.Order>

@{
    ViewBag.Title = "Order monitor";
}

<h2>@ViewBag.Title</h2>

<table id="orders" class="table">
    <tr>
        <td>Id</td>
        <td>Title</td>
    </tr>
    @foreach (var order in Model)
    {
        <tr>
            <td data-id="@order.Id">@order.Id</td>
            <td>@order.Title</td>
        </tr>
    }
</table>

<script type="text/javascript">

    var timeout = setInterval(reloadRecords, 5000);

    function reloadRecords () {
        $.ajax({
            type: "POST",
            url: "@Url.Action("GetNewRecords", "Order")",
            data: {
                "maxId": getMaxId()
            },
            success: function (data) {
                $(data).each(function(index, item) {
                    $(`<tr><td data-id="${item.Id}">${item.Id}</td><td>${item.Title}</td><tr>`).appendTo('#orders');
                });
            }
        });
    }

    function getMaxId () {
        var max = 0;
        $('#orders tr td:first-child').each(function() {
            max = Math.max($(this).data("id") || 0, max);
        });
        return max;
    }

</script>

Вид через пару циклов:

введите сюда описание изображения

1
  • Спасибо,большое. 19 июн 2018 в 7:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.