UpdatePanel history

Un gran problema con las páginas habilitadas para AJAX en general, es que, por diseño, cada acción no representa un estado en su navegador, lo que significa que no puede usar los botones Atrás y Adelante para cambiar de estado, y porque la URL no cambia, un estado específico no puede ser marcado o vinculado por el usuario. Esto limita efectivamente las situaciones en las que puede utilizar AJAX en general y el control UpdatePanel específicamente. Afortunadamente, Microsoft ha resuelto este problema con la función Historial. Se puede habilitar en el control ScriptManager y, básicamente, funciona agregando información a la URL después del carácter #, que generalmente se usa principalmente para navegar entre varias partes de la misma página. Intentemos crear una página de muestra que le muestre el problema, y ​​luego lo arreglaremos después:

<asp:ScriptManager runat="server" ID="MainScriptManager" />

<asp:UpdatePanel runat="server" ID="pnlColorSelect">
<ContentTemplate>
    <asp:DropDownList runat="server" ID="ddlColor" AutoPostBack="true" OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
        <asp:ListItem Value="Red">Red</asp:ListItem>
        <asp:ListItem Value="Blue">Blue</asp:ListItem>
        <asp:ListItem Value="Green">Green</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
    Selected color: <asp:Label runat="server" ID="lblSelectedColor" />
</ContentTemplate>
</asp:UpdatePanel>    

También necesitamos un método en el CodeBehind para manejar la selección del nuevo color:

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    lblSelectedColor.Text = ddlColor.SelectedValue;
    lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColor.SelectedValue);
}

Es realmente simple, prueba correr la página y míralo por ti mismo. Cuando seleccionas un nuevo color de la lista desplegable, el cambio se ve reflejado en el control label debajo de ella, y a causa del UpdatePanel a su alrededor, no se realiza postback y el label es actualizado sin necesidad de recargar la página. Esto es muy bueno, pero como puedes ver, no importa cuantas veces cambies el color, el URL no cambia y no se da seguimiento al estado, resultando en botones Atrás y Adelante que aún no funcionan como necesitamos. Hay que modificar eso, realizando los siguientes cambios: El ScriptManager debe de tener la propiedad EnableHistory habilitada y debemos asignarle un evento OnNavigate, de esta manera:

<asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" OnNavigate="MainScriptManager_Navigate" />

En El CodeBehind, agregamos una sola línea a nuestro evento de lista desplegable, y luego definimos nuestro evento Navigate para ScriptManager, como este:

protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
{
    lblSelectedColor.Text = ddlColor.SelectedValue;
    lblSelectedColor.BackColor = System.Drawing.Color.FromName(ddlColor.SelectedValue);
    MainScriptManager.AddHistoryPoint("SelectedColor", ddlColor.SelectedValue);
}

protected void MainScriptManager_Navigate(object sender, HistoryEventArgs e)
{
    string color = e.State["SelectedColor"];
    if (!String.IsNullOrEmpty(color))
    {
        lblSelectedColor.Text = color;
        lblSelectedColor.BackColor = System.Drawing.Color.FromName(color);
    }
}

Prueba correr la página ahora. Cada vez que cambies el color verás que el URL cambia, aún sin la necesidad de recargar la página, y ahora puedes utilizar los botones Atrás/Adelante del navegador. También puedes ver que el URL en la barra de direcciones puede ser copiado a otra ventana del navegador, y cuando es cargada, el color ahora es el mismo que cuando copiaste el URL. ¡Funciona! Una cosa que puede causarte molestias, es el hecho de que el URL críptico, como esto:

Default.aspx#&&/wEXAQUNU2VsZWN0ZWRDb2xvcgUFR3JlZW6BwCysI0shYsZauxImdaPIIPEYSA==

Esto se debe a que los valores son codificados por razones de seguridad. Sin embargo, en muchos casos, los valores que almacenas no son tan importantes y puede que prefieras un URL más natural en lugar de uno más seguro. Esto se puede realizar utilizando la propiedad EnableSecureHistoryState del ScriptManager, de esta manera:

<asp:ScriptManager runat="server" ID="MainScriptManager" EnableHistory="true" OnNavigate="MainScriptManager_Navigate" EnableSecureHistoryState="false" />

Ahora cuando utilices la página, el URL se verá de esta manera:

Default.aspx#&&SelectedColor=Red

Más simple, pero obviamente también permite al usuario ingresar valores que probablemente no esperabas, lo cuál debes considerar y prepararte cuando utilices esta función.