Todos quienes hemos usado los beneficios del UpdatePanel, y usándolo correctamente, sabemos que logramos una agradable experiencia para el usuario, evitando largos refrescos de página e insoportables esperas.También sabemos que uno de los aspectos desagradables de usar el UpdatePanel es que no guarda un historial de navegación en el browser.
Y si tuviera historial de navegación… sería muy bueno no? claro pues!!
Pues sí tiene, y aquí vamos a enseñarles como logramos crear un historial de las acciones que vamos realizando mediante un ejemplo muy simple.
El ejemplo consiste en tener un DropdownList y un Label. El dropdownList tiene el AutopostBack en true, y cada vez que selecciones un elemento del DropDownlist… ese valor también se escribe en el Label, y al mismo tiempo se va añadiendo el historial en el navegador o browser.
Vamos al código:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Mantener historial del browser con ASP.NET AJAX</title> </head> <body> <form id="form1" runat="server"> <p> </p> <p> </p> <asp:ScriptManager ID="ScriptManager1" EnableHistory="true" OnNavigate="HistoryBrowser" runat="server"> </asp:ScriptManager> <asp:UpdatePanel runat="server"> <ContentTemplate> <asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server"> <asp:ListItem Value="1" Text="Texto1"></asp:ListItem> <asp:ListItem Value="2" Text="Texto2"></asp:ListItem> <asp:ListItem Value="3" Text="Texto3"></asp:ListItem> <asp:ListItem Value="4" Text="Texto4"></asp:ListItem> <asp:ListItem Value="5" Text="Texto5"></asp:ListItem> </asp:DropDownList> <asp:Label ID="lblText" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>
La parte clave aquí está en el ScriptManager, fíjense que he añadido la propiedad EnableHistory=”true” y OnNavigate=”HistoryBrowser”.
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList1.SelectedIndexChanged lblText.Text = DropDownList1.SelectedItem.Text 'guardo los valores de los controles en una collection Dim collection As NameValueCollection = New NameValueCollection() collection.Add("DropDownList1", DropDownList1.SelectedValue) collection.Add("lblText", DropDownList1.SelectedItem.Text) 'aquí estoy creando una entrada más para el historial del browser ScriptManager1.AddHistoryPoint(collection, Me.Title) End Sub Protected Sub HistoryBrowser(ByVal sender As Object, ByVal e As HistoryEventArgs) Dim collection As NameValueCollection = e.State 'asigno a cada control el valor que guardaron en el historial If Not IsNothing(collection("DropDownList1")) Then DropDownList1.SelectedIndex = DropDownList1.Items.IndexOf(DropDownList1.Items.FindByValue(collection("DropDownList1"))) End If If Not IsNothing(collection("lblText")) Then lblText.Text = collection("lblText") End If End Sub
Ahora analicemos el código del lado del servidor.
Como pueden observar, en el evento SelectedIndexChanged del DropDownList estoy guardando el estado de aquellos controles que me interesa volver a ver con su valor anterior. Entonces, guardo esos valores en una variable que me permita guardar colecciones, es adecuado guardarlo en una colección de tipo NameValueCollection.
Luego, el otro método llamado HistoryBrowser ( recuerden que lo incluí en el ScriptManager anteriormente), este método lo que hace es devolverle a cada control su valor guardado cada vez que presiono el botón ATRÁS del navegador.
Interesante no?
Como habrán deducido: ASP.NET AJAX no me guarda el historial del browser, en realidad lo que hace es darme las facilidades para manipular el botón ATRÁS del browser… pero nosotros mismos tenemos que decidir de qué controles queremos guardar su valor en el navegador.
Espero que les sea de utilidad ;)
1 comentario:
Excelente!!!, lo he probado con controles DropDownList, CheckBoxList y RadioButtonList y todo de 10!!!!
Muchas gracias por el aporte :-)
Publicar un comentario