none
limpiar cajas de texto al momento de pulsar el TargetControlID="Button1" o CancelControlID="btnClose" RRS feed

  • Pregunta

  •  

    bueno tengo un problema pues quiero limpiar mis cajas de texto cuando de click en TargetControlID="Button1" o  CancelControlID="btnClose"

    pues al llamar a mi popup y escribirle datos en las cajas de texto y despues cerrar el popup estos datos escritos se quedan en la cajas de

    texto y quiero que se borre , quiero que al presionar nuevamente el TargetControlID="Button1" estas ya no aparescan... aca les

    dejo parte del codigo, adicionando que tambien tengo un poblema con los validadores pues al salir el popup se muestran el * al costado

    de cada caja de texto y eso deberia mostrarse cuando recien presione el btn_Guardar y validar si hay cajas de texto vacias..


    <h5>Click <asp:Button ID="Button1" runat="server" Text="Aqui" BackColor="White" BorderStyle="None" style="color: #FF0000" /> para Agregar una Nueva Especialidad</h5> <asp:HiddenField ID="HiddenField1" runat="server" /> <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="divPopUp" BackgroundCssClass="popUpStyle" PopupDragHandleControlID="panelDragHandle" DropShadow="true" CancelControlID="btnClose"> </asp:ModalPopupExtender> <div class="popUpStyle" id="divPopUp" style="display:none;"> <table> <tr> <td colspan ="2"> <asp:Panel runat="Server" ID="panelDragHandle" CssClass="drag"> Registrar Actor</asp:Panel></td> </tr> <tr><td>Apellido Paterno</td><td><asp:TextBox ID="txtApePaterno" runat="server" Text =" " ></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtApePaterno" ForeColor="#CC0000">*</asp:RequiredFieldValidator></td></tr> <tr><td>Apellido Materno</td><td><asp:TextBox ID="txtApeMaterno" runat="server" Text =" "></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtApeMaterno" ForeColor="#CC0000">*</asp:RequiredFieldValidator></td></tr> <tr><td>Apellido Nombres</td><td><asp:TextBox ID="txtNombres" runat="server" Text =" "></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtNombres" ForeColor="#CC0000">*</asp:RequiredFieldValidator></td></tr> <tr><td>Sexo</td><td> <asp:RadioButtonList ID="rblSexo" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected ="True">Masculino</asp:ListItem> <asp:ListItem>Femenino</asp:ListItem> </asp:RadioButtonList></td></tr> <tr><td>Fecha de Nacimiento</td><td> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>Dia</asp:ListItem> <asp:ListItem></asp:ListItem> <asp:ListItem></asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="DropDownList2" runat="server"> <asp:ListItem>Mes</asp:ListItem> <asp:ListItem></asp:ListItem> <asp:ListItem></asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="DropDownList3" runat="server"> <asp:ListItem>Año</asp:ListItem> <asp:ListItem></asp:ListItem> <asp:ListItem></asp:ListItem> </asp:DropDownList> </td></tr> <tr><td>Nacionalidad</td><td><asp:TextBox ID="txtNacionalidad" runat="server"></asp:TextBox></td></tr> <tr><td>Email</td><td><asp:TextBox ID="txtEmail" runat="server"> </asp:TextBox><asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="RegularExpressionValidator" ControlToValidate="txtEmail" ForeColor="#CC0000" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator><asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtEmail" ForeColor="#CC0000">*</asp:RequiredFieldValidator></td></tr> <tr><td>Estado</td><td> <asp:RadioButtonList ID="rblEstado" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected ="True">Activo</asp:ListItem> <asp:ListItem>Inactivo</asp:ListItem> </asp:RadioButtonList></td></tr> <tr><td> <asp:Button ID="btnClose" runat="server" Text="Cerrar" /><asp:Button ID="BtnGuardar" runat="server" Text="Guardar" /></td></tr> </table> </div> </div> </ContentTemplate> </asp:UpdatePanel> </div> </asp:Content>




    "SI LOGRAS CONCENTRARTE EL MUNDO DEJARA DE EXISTIR"

    sábado, 13 de octubre de 2012 3:58

Respuestas

  • Estimado 8k

    NOTA PRELIMINAR: Justo me diste un pie para terminar un post que tenia relacionado, a los eventos del MOdalPopupExtender... espero que te ayude

    Refiriéndome al titulo de tu pregunta:

    "... limpiar cajas de texto al momento de pulsar el TargetControlID="Button1" o CancelControlID="btnClose"

    Quieres hacer esto cuando presiona en el boton que " muestra el modal" y ademas tambien quieres en el boton que cierra el modal? Para eso lo puedes hacer via javascript. Mas all que tengamos dos propiedades en el control OnOkScript y OnCancelScript, pero también podremos suscribirnos a estos eventos con nuestras propias funciones, para ello utilizaremos: add_showing / add_shown  / add_hiding / add_hidden

    Por ejemmplo si quieres que cuando alguien muestre el modal (un boton del TargetControlID, o via javascript) te tendrias que suscribir al evento add_showing porque se dispara antes de que el modal "se visualice en el cliente" alli te convendria limpiar los controles
    Tienes que en init de la pagina del lado del cliente realizar estas tareas

    Ejemplo (su ves el articulo mas abajo esta completo)

    <script type="text/javascript">
    
        Sys.Application.add_load(modalInicializar);
    
        function abrirModal() {
            var modalId = '<%=ModalPopupExtender1.ClientID%>';
            var modal = $find(modalId);            
            modal.show();
        }
    
    
        function modalInicializar() {
            var modalId = '<%=ModalPopupExtender1.ClientID%>';
    
            //Antes de visualizarlo
            $find(modalId).add_showing(modalShowing);
    
            //Una vez que se renderizo
            $find(modalId).add_shown(modalShown);
                
            //Ocultando... 
            $find(modalId).add_hiding(function () {
                alert('Hiding...');
            });
    
            //Una vez que se oculto
            $find(modalId).add_hidden(function () {
                alert('Hidden...');
            });
        }
    </script>
    IMPORTANTE: para que funcione debe estar dentro del tag form de tu pagina .aspx webforms: mas que nada por este evento 
    Sys.Application.add_load(modalInicializar);

    Te dejo un articulo que lo escribi y lo complete con lo que necesitabas de limpiar controles.. donde explico mas en detalle lo de arriba

    NOTA: alli veras que para limpiar utilizo tanto js puro como jquery

    Espero que te sirva de ayuda o guía.

    Saludos


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    • Marcado como respuesta ApreSabi lunes, 15 de octubre de 2012 15:03
    sábado, 13 de octubre de 2012 18:46
  • Estimado 8k

    Dos temas con respecto a la validacion en el modalpopup que te pueden ayudar: ValidationGroup y para el boton cancelar/cerrar la propiedad CauseValidation en false

    TEMA 1: ValidationGroup
    Los controles de validacion tienen una propiedad que es ValidationGroup para agrupar como dice el nombre los que semanticamente se deben validar en grupo. Ejemplo cuando se realiza click en el boton guardar solo debe validar los controles internos del modal (no por ejemplo validar un textbox de buscar que esta en el encabezado de tu pagina)

    Ejemplo:

     <asp:Panel ID="Panel1" runat="server" CssClass="modal">
                Nombre:<br />
                <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                        ControlToValidate="txtNombre" 
                        CssClass="validacionError" 
                        ErrorMessage="El nombre es requerido"
                        ValidationGroup="Registracion">*</asp:RequiredFieldValidator>
                <br /><br />
    
                Apellido:<br />
                <asp:TextBox ID="txtApellido" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                        ControlToValidate="txtApellido" 
                        CssClass="validacionError" 
                        ErrorMessage="El apellido es requerido" 
                        ValidationGroup="Registracion">*</asp:RequiredFieldValidator>
                <br /><br />
    
                <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" ValidationGroup="Registracion" />  
                <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" CausesValidation="false" />
            </asp:Panel>



    TEMA 2: CausesValidation en false del boton Cancelar/Cerrar
    Para indicar si cuando se realiza el evento click del boton no cause o dispare los eventos de validacion de los controles asociados

    Ejemplo:

    <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" ValidationGroup="Registracion" />  
    
    <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" CausesValidation="false" />
            

    NOTA: Estoy publicando el ejemplo para descargar del post con la parte de validacion


    Enlaces

    Espero que te sirva de ayuda o guia.


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja


    • Editado Jose A. Fernandez lunes, 15 de octubre de 2012 14:27
    • Marcado como respuesta ApreSabi lunes, 15 de octubre de 2012 15:03
    lunes, 15 de octubre de 2012 14:26

Todas las respuestas

  • hola

    [ASP.NET] PopUp Edición - Usando Ajax Toolkit ModaPopupExtender

    si analizas el articulo veras que no se asocia directo un control para lanzar el popup, sino que se usa un evento para inicializar los controles y luego lanzar el popup

    con eso puede limpiar los controles del popup antes de mostrar el dialog

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina

    sábado, 13 de octubre de 2012 4:27
  • bueno leandro analizando un poco hice este cambio segun tu ejemplo:

    TargetControlID="HiddenField1"

    y en el evento del button1

      Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
            txtApePaterno.Text = ""
            txtApeMaterno.Text = ""
            txtNombres.Text = ""
            ModalPopupExtender1.Show()
        End Sub

    pero no aparece mi popup...


    "SI LOGRAS CONCENTRARTE EL MUNDO DEJARA DE EXISTIR"

    sábado, 13 de octubre de 2012 4:45
  • Estimado 8k

    NOTA PRELIMINAR: Justo me diste un pie para terminar un post que tenia relacionado, a los eventos del MOdalPopupExtender... espero que te ayude

    Refiriéndome al titulo de tu pregunta:

    "... limpiar cajas de texto al momento de pulsar el TargetControlID="Button1" o CancelControlID="btnClose"

    Quieres hacer esto cuando presiona en el boton que " muestra el modal" y ademas tambien quieres en el boton que cierra el modal? Para eso lo puedes hacer via javascript. Mas all que tengamos dos propiedades en el control OnOkScript y OnCancelScript, pero también podremos suscribirnos a estos eventos con nuestras propias funciones, para ello utilizaremos: add_showing / add_shown  / add_hiding / add_hidden

    Por ejemmplo si quieres que cuando alguien muestre el modal (un boton del TargetControlID, o via javascript) te tendrias que suscribir al evento add_showing porque se dispara antes de que el modal "se visualice en el cliente" alli te convendria limpiar los controles
    Tienes que en init de la pagina del lado del cliente realizar estas tareas

    Ejemplo (su ves el articulo mas abajo esta completo)

    <script type="text/javascript">
    
        Sys.Application.add_load(modalInicializar);
    
        function abrirModal() {
            var modalId = '<%=ModalPopupExtender1.ClientID%>';
            var modal = $find(modalId);            
            modal.show();
        }
    
    
        function modalInicializar() {
            var modalId = '<%=ModalPopupExtender1.ClientID%>';
    
            //Antes de visualizarlo
            $find(modalId).add_showing(modalShowing);
    
            //Una vez que se renderizo
            $find(modalId).add_shown(modalShown);
                
            //Ocultando... 
            $find(modalId).add_hiding(function () {
                alert('Hiding...');
            });
    
            //Una vez que se oculto
            $find(modalId).add_hidden(function () {
                alert('Hidden...');
            });
        }
    </script>
    IMPORTANTE: para que funcione debe estar dentro del tag form de tu pagina .aspx webforms: mas que nada por este evento 
    Sys.Application.add_load(modalInicializar);

    Te dejo un articulo que lo escribi y lo complete con lo que necesitabas de limpiar controles.. donde explico mas en detalle lo de arriba

    NOTA: alli veras que para limpiar utilizo tanto js puro como jquery

    Espero que te sirva de ayuda o guía.

    Saludos


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja

    • Marcado como respuesta ApreSabi lunes, 15 de octubre de 2012 15:03
    sábado, 13 de octubre de 2012 18:46
  • Gracias leandro tutini , gracias Jose A. Fernandez: la pregunta ha sido respondida  y entendida pero...  

    adicionando que tambiéntengo un problemacon los validadores pues al abrir el popup se muestran el * al costado

    de cada caja de texto y eso deberia mostrarse cuando recien presione el btn_Guardar y validar si hay cajas de texto vacias..

     esta parte tienes solución? me lo responden aca mismo pues fue parte de la pregunta?

    o es que.. formulo una nueva pregunta?

    Saludos


    "SI LOGRAS CONCENTRARTE EL MUNDO DEJARA DE EXISTIR"

    lunes, 15 de octubre de 2012 4:01
  • Estimado 8k

    Dos temas con respecto a la validacion en el modalpopup que te pueden ayudar: ValidationGroup y para el boton cancelar/cerrar la propiedad CauseValidation en false

    TEMA 1: ValidationGroup
    Los controles de validacion tienen una propiedad que es ValidationGroup para agrupar como dice el nombre los que semanticamente se deben validar en grupo. Ejemplo cuando se realiza click en el boton guardar solo debe validar los controles internos del modal (no por ejemplo validar un textbox de buscar que esta en el encabezado de tu pagina)

    Ejemplo:

     <asp:Panel ID="Panel1" runat="server" CssClass="modal">
                Nombre:<br />
                <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                        ControlToValidate="txtNombre" 
                        CssClass="validacionError" 
                        ErrorMessage="El nombre es requerido"
                        ValidationGroup="Registracion">*</asp:RequiredFieldValidator>
                <br /><br />
    
                Apellido:<br />
                <asp:TextBox ID="txtApellido" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                        ControlToValidate="txtApellido" 
                        CssClass="validacionError" 
                        ErrorMessage="El apellido es requerido" 
                        ValidationGroup="Registracion">*</asp:RequiredFieldValidator>
                <br /><br />
    
                <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" ValidationGroup="Registracion" />  
                <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" CausesValidation="false" />
            </asp:Panel>



    TEMA 2: CausesValidation en false del boton Cancelar/Cerrar
    Para indicar si cuando se realiza el evento click del boton no cause o dispare los eventos de validacion de los controles asociados

    Ejemplo:

    <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" ValidationGroup="Registracion" />  
    
    <asp:Button ID="btnCancelar" runat="server" Text="Cancelar" CausesValidation="false" />
            

    NOTA: Estoy publicando el ejemplo para descargar del post con la parte de validacion


    Enlaces

    Espero que te sirva de ayuda o guia.


    Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja


    • Editado Jose A. Fernandez lunes, 15 de octubre de 2012 14:27
    • Marcado como respuesta ApreSabi lunes, 15 de octubre de 2012 15:03
    lunes, 15 de octubre de 2012 14:26