Загрузка новых данных на страницу без перезагрузки - PullRequest
Новая
       45

Загрузка новых данных на страницу без перезагрузки

1 голос
/ 14 апреля 2011

Я делаю высокоуровневую спецификацию на странице ASP.Net, которая может содержать некоторые задержанные данные.

Когда страница загружается, представленные исходные данные будут получены из локальной базы данных (которая будет быстрой при представлении). То, что я хочу, - это отдельный процесс для поиска обновленных данных (из любых других служб, которые у меня есть). Это занимает больше времени, но идея состоит в том, чтобы представить данные, а затем, если найдены новые данные, добавить их на лету в начало существующей страницы.

Я хотел бы получить некоторые рекомендации о том, как этого добиться.

Техническая область для этого - ASP.Net 4.0, C # MVC3 и HTML5.

Спасибо.

1 Ответ

2 голосов
/ 14 апреля 2011

AJAX с jQuery - хороший способ для достижения этой цели. Так, например, вы можете поместить div-заполнитель содержимого в вашу разметку: 

<div id="result" data-remote-url="@Url.Action("Load", "SomeController")"></div>

и затем после загрузки DOM: 

$(function() {
    $.ajax({
        url: $('#result').data('remote-url'),
        type: 'POST',
        beforeSend: function() {
            // TODO: you could show an AJAX loading spinner
            // to indicate to the user that there is an ongoing
            // operation so that he doesn't run out of patience
        },
        complete: function() {
            // this will be executed no matter whether the AJAX request
            // succeeds or fails => you could hide the spinner here
        },
        success: function(result) {
            // In case of success update the corresponding div with
            // the results returned by the controller action
            $('#result').html(result);
        },
        error: function() {
            // something went wrong => inform the user 
            // in the gentler possible manner and remember
            // that he spent some of his precious time waiting 
            // for those results
        }
    });
});

, где действие контроллера загрузки позаботится о связи с удаленными службами и вернет частичное представление, содержащее данные: 

public ActionResult Load()
{
    var model = ... go ahead and fetch the model from the remote service
    return PartialView(model);
}

Теперь, если выборка данных требует интенсивного ввода-вывода, вы можете воспользоваться асинхронными контроллерами портами завершения ввода-вывода, которые позволят вам не подвергать опасности рабочие потоки во время длительной операции. получения данных из удаленного источника.

...