Jak zaimplementować stronę pełnoekranową "ładowanie ..." w ASP.NET MVC?

Question

Mam SearchController z działaniem, które może wykonać długotrwałe wyszukiwania i zwrócić stronę wyników. Wyszukiwanie może zająć od 1 do 60 sekund. Adres URL wyszukiwania to żądanie HTTP GET w postaci: http://localhost/Search?my=query&is=fancy

Doświadczenie, którego szukam, jest podobne do wielu witryn turystycznych, które są tam dostępne. Chciałbym pokazać pośrednią „Loading ...” stronę, gdzie idealnie:

1. Użytkownik może przeładować stronę bez konieczności ponownego wyszukiwania
2. Po zakończeniu wyszukiwania back-end jest zakończone, użytkownik jest przekierowywany do wyników
3. Doswiadczenie ulega pogorszeniu w przeglądarkach z wyłączoną obsługą JavaScriptu
4. Historia przycisku wstecz/przeglądarki nie powinna zawierać tej strony pełnoekranowej.
5. W przypadku krótkich poszukiwaniach (1 sekunda), to nie ma znaczącego wpływu ani na czas, aby dostać się do wyników lub doświadczenia (znacząco brzydkie miga strona, cokolwiek)

Tych są ładne. Jestem otwarty na wszystkie pomysły! Dzięki.

Answer 1

Można to zrobić w następujący sposób:

• zrobić żądania wyszukiwania (url GET) z AJAX
• url wyszukiwanie nie zwraca wyników, ale zwraca jakąś JSON lub XML treści z adres URL rzeczywistych wyników: strona klienta wyświetla komunikat "ładowanie ..." podczas oczekiwania na wywołanie AJAX, aby zakończyć
• strona klienta przekierowuje na stronę wyników po zakończeniu.

Przykładem jQuery:

<div id="loading" style="display: none"> 
    Loading... 
</div> 
<a href="javascript:void(0);" 
    onclick="searchFor('something')">Search for something</a> 

<script type="text/javascript"> 
    function searchFor(what) { 
    $('#loading').fadeIn(); 
    $.ajax({ 
     type: 'GET', 
     url: 'search?query=' + what, 
     success: function(data) { 
     location.href = data.ResultsUrl; 
     } 
    });   
    } 
</script> 

(edit :)

Kontroler byłoby coś jak:

public class SearchController 
{ 
    public ActionResult Query(string q) 
    { 
    Session("searchresults") = performSearch(); 
    return Json(new { ResultsUrl = 'Results'}); 
    } 

    public ActionResult Results() 
    { 
    return View(Session("searchresults")); 
    } 
} 

Rozważmy to pseudo-kod: Nie rzeczywiście Sprawdź to.

Answer 2

W celu zachowania javascript-less, możesz podzielić wyszukiwanie na wiele akcji.

Pierwsza czynność (/ Search /? Q = whodunit) powoduje jedynie sprawdzenie poprawności parametrów (dzięki czemu wiadomo, czy trzeba ponownie wyświetlić formularz), a następnie zwraca widok, który używa metaodświeżania do wskazania przeglądarka wraca do "prawdziwej" akcji wyszukiwania.

można zaimplementować to z dwóch oddzielnych działań regulatora (słownie Szukaj i wyniki):

public ActionResult Search(string q) 
{ 
    if (Validate(q)) 
    { 
     string resultsUrl = Url.Action("Results", new { q = q }); 
     return View("ResultsLoading", new ResultsLoadingModel(resultsUrl)); 
    } 
    else 
    { 
     return ShowSearchForm(...); 
    } 
} 

bool Validate(string q) 
{ 
    // Validate 
} 

public ActionResult Results(string q) 
{ 
    if (Validate(q)) 
    { 
     // Do Search and return View 
    } 
    else 
    { 
     return ShowSearchForm(...); 
    } 
} 

Ale to daje kilka zaczepów miarę orzeźwiający idzie. Możesz więc ponownie połączyć je w jedną akcję, która może sygnalizować proces dwufazowy za pomocą TempData.

static string SearchLoadingPageSentKey = "Look at me, I'm a magic string!"; 

public ActionResult Search(string q) 
{ 
    if (Validate(q)) 
    { 
     if (TempData[SearchLoadingPageSentKey]==null) 
     { 
      TempData[SearchLoadingPageSentKey] = true; 
      string resultsUrl = Url.Action("Search", new { q = q }); 
      return View("ResultsLoading", new ResultsLoadingModel(resultsUrl)); 
     } 
     else 
     { 
      // Do actual search here 
      return View("SearchResults", model); 
     } 
    } 
    else 
    { 
     return ShowSearchForm(...); 
    } 
} 

Obejmuje pkt 2, 3, 4 i 5. zapewne

obejmuje również pomoc dla nr 1 wynika, że ​​idziesz do przechowywania wyników wyszukiwania zarówno w sesji, db, itd.

W tym przypadku po prostu dodaj pożądaną implementację pamięci podręcznej jako część "Do rzeczywistego wyszukiwania tutaj" i dodaj wynik sprawdzenia dla pamięci podręcznej, aby ominąć stronę ładowania. na przykład

if (TempData[SearchLoadingPageSentKey]==null)

staje

if (TempData[SearchLeadingPageSentKey]==null && !SearchCache.ContainsKey(q))

Answer 3

Dobre pytanie. Być może wkrótce będę musiał zaimplementować podobne rozwiązanie w asp.net mvc, ale nie sądzę, że wymagałoby to zasadniczo innej implementacji niż rozwiązanie oparte na webformach, którego różne przykłady są w Internecie:

• Executing Long-Running Tasks with the Progress Bar in ASP.NET (aspfree.com)
• Design Pattens: Asynchronous Wait State Pattern in ASP.NET (MSDN)

ja wcześniej zbudowany implementację w oparciu o pierwszy link powyżej z formularzy internetowych. Podstawowym procesem jest:

1. strona początkowa jest wymagane w/szukaj Parametry
2. Ta strona zaczyna się nowy wątek, który wykonuje długo działa zadanie
3. Ta strona przekierowuje użytkownika do strony „w ramach procesu” który ma zestaw nagłówków odświeżania http do ponownego ładowania co kilka sekund
4. Wątek wykonujący wyszukiwanie aktualizuje "globalny" statyczny obiekt postępu wyszukiwania wskazujący% ukończone, a strona w trakcie procesu odczytuje z niego, wyświetlając postęp. (każde wyszukiwanie jest przechowywane przez identyfikator GUID w tabeli HashTable, więc obsługiwanych jest wiele równoczesnych wyszukiwań)
5. Po zakończeniu wątek aktualizuje postęp wyszukiwania jako taki, a gdy strona procesu tego wykryje, przekierowuje do końcowego wyniku "strona.

(Na pewno sprawdzić drugi link z MSDN, to zupełnie inne rozwiązanie, ale nie jeden ja odtłuszczone tylko skończona.)

Korzyść z tego jest to, że nie wymaga Javascript w ogóle. Największą wadą, jaką mogę sobie wyobrazić (z punktu widzenia użytkownika) jest to, że nie jest to całkowicie "Web 2.0", a użytkownicy będą musieli poczekać na serię odświeżeń przeglądarki.

Coś opartego na sugestii opartej na AJAX @ Jana Willema B powinno być realną alternatywą dla tego wielowątkowego wzorca stanu oczekiwania. To, co najlepiej spełnia Twoje wymagania, jest czymś, co sam musisz zdecydować. Przykład z opublikowanej przeze mnie strony aspfree.com powinien spełniać większość Twoich wymagań i działać równie dobrze z MVC, jak z formularzami internetowymi.