Se habrán dado cuenta que cuando hacemos uso del modalpopup del ajaxcontrol toolkit, osea ingresamos valores en los controles contenidos en él, y luego de guardar la información y cerramos el modalpopup… al volver a abrir el modalpopup, éste mantiene los valores que escribimos en cada control, inclusive mantiene seleccionado el dropdownlist y los listboxes, tal como los habíamos seleccionado.
Esta conducta, muchas veces es ventajosa, porque nos ahorra el volver a escribir o seleccionar algunas opciones de los controles. Pero, qué pasa si queremos que cada vez que abrimos el modalpopup extender esté limpio otra vez?
Pues fácil, vamos a mostrar un pequeño ejemplo didáctico.
1.- Creamos un proyecto web ASP.NET y añadimos la referencia al ajaxcontrol toolkit.
2.- Creamos una página aspx llamada clear_modalpopup.aspx que contenga el siguiente código:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>xxx</title>
<style type="text/css">
*
{
font-family: Trebuchet MS, Verdana;
}
.modalPopup
{
border: solid 5px red;
background-color: orange;
filter: alpha(opacity=70);
opacity: 0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:LinkButton ID="LinkButton1" runat="server" Text="Añadir información" />
<asp:Panel ID="Panel1" runat="server" Style="display: block" CssClass="modalPopup"
Height="250px" Width="400px">
<table style="width: 100%">
<tr>
<td colspan="2">
<strong>Datos del usuario</strong>
</td>
</tr>
<tr>
<td style="width: 10%">
Nombre:
</td>
<td>
<asp:TextBox ID="txtName" Width="90%" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Apellido:
</td>
<td>
<asp:TextBox ID="txtLastName" Width="90%" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Nacionalidad:
</td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" Width="90%">
<asp:ListItem Value="0" Text="(Seleccione una opción)"></asp:ListItem>
<asp:ListItem Value="1" Text="Española"></asp:ListItem>
<asp:ListItem Value="2" Text="Mexicana"></asp:ListItem>
<asp:ListItem Value="3" Text="Chilena"></asp:ListItem>
<asp:ListItem Value="4" Text="Peruana"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: right; height: 100px; vertical-align: bottom">
<asp:Button ID="btnSave" runat="server" Text="Guardar" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" OkControlID="btnSave" />
</div>
</form>
<script type="text/javascript">
function pageLoad() {
var ModalPopupExtender1 = $find("ModalPopupExtender1");
ModalPopupExtender1.add_hidden(Controls_Clear);
}
function Controls_Clear() {
var txtName = $get("txtName");
var txtLastName = $get("txtLastName");
var txtEmail = $get("txtEmail");
var ddl = $get("ddlCountry");
var rfvEmail = $get("rfvEmail");
txtName.value = "";
txtLastName.value = "";
txtEmail.value = "";
rfvEmail.style.display = "none";
ddl.selectedIndex = 0;
}
</script>
</body>
</html>
Y eso es todo, la parte interesante está en el pequeño código javascript, el cual es quien se encarga de resetear los valores tanto de los textboxes, los controles de validación y el dropdownlist.
Uds pueden extender este código para que funcione para la mayoría de controles ASP.NET.
;)
