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.
;)
1 comentario:
Gracias por esa información, precisamente tengo ese problema pero no logro hacer que me funcione esta solución que pones... El problema que tengo es que el ModalPopupExtender lo tengo dentro de un DataGrid, ya que necesito que el panel me aparezca cada vez que se presiona un botón dentro de ese grid, pero al utilizar ese método me da error porque al entrar a la página el Datagrid no ha sido cargado y por ende el objeto no está inicializado... por lo que no lo encuentra... menudo problema... gracias y seguiré probando.......
Publicar un comentario