Асинхронное автоматическое обновление с использованием asp.net MVC 3 - PullRequest
Новая
       13

Асинхронное автоматическое обновление с использованием asp.net MVC 3

1 голос
/ 15 августа 2011

Я написал простую программу, которая собирает некоторую информацию из базы данных WMI, такую ​​как текущее использование процессора. Я выполняю эти операции в файле homecontroller с помощью функции индекса ActionResult. Затем я возвращаю вид и отображаю эти результаты на главной странице.

Теперь я должен использовать JQuery и обновлять эти значения каждые 3 секунды. Я не хочу перезагружать всю страницу. Но только эти значения, которые я собираю из WMI.

Какие-нибудь хорошие и простые (потому что я новичок в Javascript) предложения?

1 Ответ

9 голосов
/ 15 августа 2011

Хорошо, вы запросили предложение, поэтому я постараюсь остаться на высоком уровне.

Во-первых, вам нужно реализовать два представления:

  1. Индекс -Это ваше представление, возвращаемое вашей функцией Index ActionResult на вашем контроллере.

  2. Статистика - Это частичное представление , включенное в представление индекса как таковое: 

    <div id="refreshme">
    @Html.Partial("_Stats", Model.Stats)
</div>

Вы заметите, что я передал в Model, которая содержит объект статистики.Этот объект статистики передается в представление «Статистика», которое будет знать, как его отобразить.

Затем вам нужно добавить новый метод действия в свой HomeController, который называется, как вы уже догадались, Stats!Этот ActionResult просто отобразит представление Stats и вернет его в формате HTML.Вы также захотите установить флаг [HttpGet], чтобы он мог принимать запросы на получение: 

[HttpGet]
public ActionResult Stats(...)
{
    //...
    return View("_Stats", Model);
}

Теперь для стороны JS: 

function refresh() {
    $.get('/index/post', function(result) {
        $('#refreshme').html(result);
    });
}
setInterval(refresh, 3000);

Итак, цели

  1. Уберите свою часть, которую вы хотите обновить, с остальной части страницы и поместите ее в частичное представление.
  2. Добавьте метод действия контроллера, который отображает только эточастичное представление.
  3. Включите это частичное представление в представление Index с контейнером, обернутым вокруг него, чтобы его можно было легко обновлять.
  4. Добавьте функцию javascript, которая будет получать последнюю визуализацию представления изКонтроллер и переписать текущую статистику на странице.

Надеюсь, это поможет вам двигаться в правильном направлении.

...