Le applicazioni Ajax presentano alcuni vantaggi rispetto al modello classico di sviluppo Web ma sono anche caratterizzate da diversi problemi. Due di questi sono l’impossibilità di creare segnalibri e il mancato supporto ai pulsanti di navigazione del browser.
Questi due problemi hanno una causa comune: l’impossibilità di cambiare l’URL. Ovvero, in una applicazione Ajax, lo stato della pagine cambia ma l’URL no. La soluzione è quindi trovare un modo per cambiare l’indirizzo ogni volta che cambia lo stato.
Ovviamente non possiamo semplicemente cambiare l’indirizzo della pagina, perché altrimenti la stessa verrebbe ricaricata.
La soluzione al problema è cambiare soltanto l’hash (ovvero l’ancora di un URL).
Il codice Javascript necessario per realizzare tutto ciò è abbastanza lungo e complesso. Ma se utilizziamo il modulo UpdateHistory di Ajax Net, la complessità viene ridotta notevolmente.
Per prima cosa, controlliamo la versione di ASP.NET che stiamo utilizzando. Se non e' la 3.5, scarichiamo Microsoft Asp.Net futures al seguente indirizzo:
http://www.asp.net/Downloads/futures/ (attenzione comunque: questa versione e' considerata obsoleta)
Per mostrare come questo componente risolva i nostri problemi realizziamo questo esempio: una gridview che visualizza un file XML. La gridview è paginata ed inserita all’interno di un UpdatePanel.
L’obiettivo dell’esempio è duplice:
-
Aggiornare l’hash dell’URL ogni volta che cambia lo stato della pagina (in questo esempio ogni volta che cambiamo pagina nella gridview) in modo da consentire la creazione dei bookmarks.
-
Ripristinare lo stato della gridview quando clicchiamo su un bookmark
Il codice che segue contiene un esempio di funzioni di supporto per gestire la navigazione della gridview e per il ripristino dello stato.
<%@ Register Assembly="Microsoft.Web.Preview" Namespace="Microsoft.Web.Preview.UI.Controls" TagPrefix="cc2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<script runat="server">
protected void GridView1_PageIndexChanged(object sender, EventArgs e)
{
History1.AddHistoryPoint("StartPage", ((GridView)sender).PageIndex);
}
protected void History1_RestoreState(object sender, Microsoft.Web.Preview.UI.Controls.HistoryEventArgs args)
{
int startPage = 0;
if (args.State.ContainsKey("StartPage"))
{
startPage = (int)args.State["StartPage"];
}
GridView1.PageIndex = startPage;
}
</script>
Il primo metodo dovrà essere associato all’evento cambio pagina della gridview, mentre il secondo verrà associate all’UpdateHistory e servirà per ripristinare lo stato della gridview. Notare che la stringa StartPage è semplicemente una chiave che viene utilizzata per memorizzare le informazioni di stato. Il suo nome è arbitrario ma deve essere lo stesso sia nelle operazioni di scrittura che in quelle di lettura.
Di seguito è mostrato come configurare l’UpdateHistory e la gridview.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc2:History ID="History1" runat="server" OnNavigate="History1_RestoreState">
</cc2:History>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" OnPageIndexChanged="GridView1_PageIndexChanged" runat="server" DataSourceID="XmlDataSource1" AllowPaging="True" AutoGenerateColumns="False">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="un_code" HeaderText="un_code" SortExpression="un_code" />
<asp:BoundField DataField="language" HeaderText="language" SortExpression="language" />
</Columns>
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/Countries.xml" XPath="//country">
</asp:XmlDataSource>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="History1" />
</Triggers>
</asp:UpdatePanel>
Lanciando l’applicazione possiamo verificare come, selezionando le pagine della gridview, l’hash dell’URL cambia. Questo ci consentirà di creare ed utilizzare bookmark e di utilizzare i pulsanti di navigazione del browser.
