Непрерывное обновление PartialView с использованием ASP.NET MVC 3 - PullRequest
Новая
       28

Непрерывное обновление PartialView с использованием ASP.NET MVC 3

3 голосов
/ 30 мая 2011

Я занимаюсь разработкой веб-сайта с использованием ASP.NET MVC 3.

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

http://i.stack.imgur.com/G21qi.png

Разделы добавляются на главную страницу с помощью 

@Html.Action("_News", "Home", new { id = 1 })

Где id 1 = "Ledelsen", 2 = "Omstillingen" и т. Д.

Мой контроллер содержитследующее действие: 

[ChildActionOnly]
public ActionResult _News(int id)
{
    // controller logic to fetch correct data from database
    return PartialView();
}

Я запустил CRUD, но мой вопрос в том, как я могу обновить PartialViews без обратной передачи, с заданным интервалом?

Я предполагаю, что должениспользуйте Javascript / jQuery для этого, но я не смог.

Кто-нибудь может указать мне правильное направление или, что еще лучше, привести пример того, как это сделать?

Спасибозаранее

РЕДАКТИРОВАТЬ: просто чтобы уточнить, я не хочу обновлять всю страницу, а только сделать асинхронное обновление частичных просмотров

Ответы [ 2 ]

9 голосов
/ 30 мая 2011

В вашем частичном представлении, я бы предложил заключить все это в div: 

<div id="partial1">

В javascript вам понадобится функция, чтобы использовать AJAX для загрузки частичного представления в div: 

$("#partial1").load("_News", { id="1"} );

Это использует jQuery.Некоторая документация здесь .По сути, это заменит указанный div на представление, сгенерированное в результате вызова вашего действия _News.Идентификатор может быть изменен, если вы добавите некоторую логику в вызов javascript.

Затем оберните вызов в load() в setTimeout(): 

var t = setTimeout(function () {$("#partial1").load("_News", { id="1"} );}, 60000);

, который запустит включенную функциюкаждые 60 секунд.t может использоваться, таким образом, clearTimeout(t) в любом месте вашего кода JavaScript, чтобы остановить автоматическое обновление.

EDIT

Это должно решить проблему кэширования.Спасибо @iko за предложение.Я заметил, что вам нужно cache: false, чтобы это работало. 

var t = setTimeout(function () { $.ajax({ 
                                     url: "_News", 
                                     data: { "id": "1" }, 
                                     type: "POST", 
                                     cache: false, 
                                     success: function (data) { 
                                          $("#partial1").innerHTML = data; 
                                     }}); }, 60000);
0 голосов
/ 30 мая 2011

Я собираюсь передать вам ответ, который я дал на связанный вопрос "UpdatePanel" в Razor (mvc 3) для начальной точки. Обратите внимание, что это не сильно отличается от ответа Стива Мэллори, но выделяет некоторые другие моменты.

Разница, однако, заключается в том, что вам может потребоваться удалить атрибут [ChildActionOnly], если вы хотите обновить каждое частичное представление отдельно (обновить только идентификатор 1 или обновить только идентификатор 2).

Этот скрипт может быть помещен в возвращаемую часть. 

<script type="text/javascript">
    setInterval(function()
    {
          $.load('<%= Url.Action("_News", "Home", new { id = Model.Id } ) %>', function(data) {
          $('#partial_'@(Model.Id)').html(data);
      });
    }
    , 30000);
</script>

<div id="partial_@(Model.Id)" />
...