Un gran problema con las páginas que usan 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 Back y Forward para cambiar entre estados, y debido a que la URL no cambia, no se puede guardar en favoritos un estado específico o utilizarlo como enlace.
Esto realmente limita las situaciones en dónde podemos usar AJAX en general y el control UpdatePanel en especial. Afortunadamente, Microsoft ha resuelto este problema con la característica llamada "EnableHistory" del control ScriptManager.
Básicamente, trabaja agregando información a la URL después del caracter #, el que es normalmente usado para navegar entre varias partes de la misma página.
En este artículo, crearé una página que nos mostrará el problema, para después ver de que manera se arregla con la nueva característica.
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="History2.aspx.vb"
Inherits="Ajax.History2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Problema del Historial en Ajax</title>
<script type="text/javascript"
src="script/jquery-1.7.2.js"></script>
</head>
<body>
<h1>Problema del Historial en Ajax</h1>
<form id="form1" runat="server">
<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="">
--Elija un color--
</asp:ListItem>
<asp:ListItem Value="Red">
Red
</asp:ListItem>
<asp:ListItem Value="Pink">
Pink
</asp:ListItem>
<asp:ListItem Value="LightBlue">
LightBlue
</asp:ListItem>
<asp:ListItem Value="LightGreen">
LightGreen
</asp:ListItem>
<asp:ListItem Value="LightYellow">
LightYellow
</asp:ListItem>
</asp:DropDownList>
<br />
<br />
Color seleccionado:
<asp:Label runat="server" ID="lblSelectedColor" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("select > option").first().css("color", "#CCCCCC");
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$("select > option").first().css("color", "#CCCCCC");
});
</script>
</body>
</html>