In questo breve tutorial utilizzeremo jQuery per caricare in modalità asincrona delle informazioni dal server mostrando all’utente un loader nel caso in cui il server non risponda velocemente.
Prima di tutto creiamo un nuovo progetto utilizzando Asp.Net MVC chiamato MVCAjaxLoader.
Modifichiamo l’homecontroller aggiungendo il metodo Show
1: using System.Threading;
2: using System.Web.Mvc;
3:
4: namespace MVCAjaxLoader.Controllers
5: {
6: [HandleError]
7: public class HomeController : Controller
8: {
9: public ActionResult Index()
10: {
11: ViewData["Message"] = "Welcome to AjaxLoader demo";
12:
13: return View();
14: }
15:
16: public ActionResult About()
17: {
18: return View();
19: }
20:
21: public ActionResult Show(int? delay)
22: {
23: int d = delay ?? 0;
24: if(d > 0)
25: Thread.Sleep(d * 1000);
26:
27: return View();
28: }
29: }
30: }
Generiamo la view relativa al metodo Show che contrerrà il nostro frammento di html da inviare al browser (essendo solo un frammento di html che verrà incluso in una pagina non verrà selezionata nessuna masterpage).
1: <div>
2: <span class='message'>
3: <%= DateTime.Now.ToLongTimeString() %>
4: </span>
5: </div>
Utilizziamo ora ajaxloader.info per generare il nostro loader ed andiamo a modificare il site.css per utilizzare la nuova gif.
1: .ajaxloader
2: {
3: background-image: url('ajax-loader.gif');
4: background-repeat: no-repeat;
5: background-position: center center;
6: height:100%;
7: width:100%;
8: }
9:
10: .message
11: {
12: font-size:xx-large;
13: font-weight:bold;
14: }
A questo punto abilitiamo la nostra applicazione all’utilizzo di jQuery modificando la masterpage aggiungendo il riferimento a jQuery ed inserendo un ContentPlaceHolder per i nostri script
1: <head runat="server">
2: <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
3: <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
4: <script src="../../Scripts/jquery-1.3.1.js" type="text/javascript"></script>
5:
6: <asp:ContentPlaceHolder ID="scriptPlaceHolder" runat="server" />
7: </head>
Ora apriamo la nostra index.aspx per inserire due hyperlink per richiamare l’elaborazione asincrona in modalità veloce ed in modalità delayed.
1: <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
2: <h2>
3: <%= Html.Encode(ViewData["Message"]) %></h2>
4: <a href="#" id="showFast">Fast</a> <a href="#" id="showSlow">Slow</a>
5: <div id="result">
6: </div>
7: </asp:Content>
Inseriamo nel site.css lo stile del nostro box “result”
1: #result
2: {
3: margin-top:4px;
4: height: 200px;
5: width: 200px;
6: border: thin solid #808080;
7: }
A questo punto non resta che creare una estensione di jQuery che permetta di mostrare il loader nel nostro box dei risultati ed utilizzare in metodo jQuery.load per eseguire la chiamata asincrona. Prima della chiamata impostiamo un timeout di 1500 ms per visualizzare il loader nel box dei risultati. Quando la chiamata asincrona termina cancelliamo il timeout (in modo tale da bloccare la visualizzazione del loader).
1: <asp:Content ID="scriptContent" ContentPlaceHolderID="scriptPlaceHolder" runat="server">
2:
3: <script type="text/javascript">
4:
5: $.fn.showLoader = function() {
6: return this.each(function() {
7: $(this).html('<div class=\'ajaxloader\'></div>');
8: });
9: }
10:
11: function ajaxLoad(delayTimeout) {
12: var resultBox = $('#result');
13:
14: // clear current result...
15: resultBox.html('');
16:
17: // Set loader timeout
18: var t = setTimeout(function() {
19: resultBox.showLoader()
20: }, 1500);
21:
22: // ajax call...
23: resultBox.load(
24: '<%= Url.Action("Show") %>',
25: { delay: delayTimeout },
26: function(responseText, textStatus, request) {
27: // stop loader timeout
28: clearTimeout(t);
29: }
30: );
31: }
32:
33: $(function() {
34: $('#showFast').click(function() { ajaxLoad(0); });
35: $('#showSlow').click(function() { ajaxLoad(4); });
36: });
37:
38: </script>
39:
40: </asp:Content>
Qui il codice: MVCAjaxLoader.zip (248kb)