Cómo deshabilitar la devolución de datos en un botón asp

135

Tengo un botón asp. Es del lado del servidor, así que solo puedo mostrarlo para los usuarios registrados, pero quiero que ejecute una función de JavaScript y parece que cuando es runat = "server" siempre llama al evento de devolución de datos.

También tengo un botón normal ( <input...>) que no se ejecuta en el servidor y funciona bien ...

¿Cómo puedo hacer que este botón solo ejecute javascript y no postback?

dkarzon
fuente

Respuestas:

263

Haga que su javascript devuelva falso cuando esté hecho.

<asp:button runat="server".... OnClientClick="myfunction(); return false;" />
womp
fuente
16
En muchos casos, las personas usan un onclick o OnClientClick con esta sintaxis <asp: Button OnClientClick = "myFunction ()" /> donde myFunction () devuelve falso y esto no es suficiente; debe usar OnClientClick = "return myFunction ()"
Bron Davies
17
Tuve que agregar UseSubmitBehavior = "False" y también; return false
rob
9
Asegúrese de agregar 'CausesValidation = "false"', de lo contrario agregará 'WebForm_DoPostBackWithOptions' y un montón de marcado adicional.
Carter Medlin el
Esto no funcionó para mí en ASP.NET 4+, sin embargo, la respuesta de Konstantin simplemente OnClientClick="return false"funcionó.
TylerH
39
YourButton.Attributes.Add("onclick", "return false");

o

<asp:button runat="server" ... OnClientClick="return false" />
Konstantin Tarkus
fuente
15

Puede usar la acción jquery click y usar la función preventDefault () para evitar la devolución

<asp:button ID="btnMyButton" runat="server" Text="MyButton" />


$("#btnMyButton").click(function (e) {
// some actions here
 e.preventDefault();
}
Rameez
fuente
Esta es una respuesta elegante porque le permite probar las condiciones para deshabilitar.
John Mott
1
Nunca use preventDefault ya que detendrá otros eventos que dependen de este evento -1
Piotr Kula
1
@ppumkin: preventDefault es una excelente manera de decirle a otros oyentes de eventos que manejaste este evento para que no tengan que hacerlo. Creo que lo que querías decir era stopPropagation, que de hecho evita que el evento sea escuchado por otros oyentes de eventos.
Sebbas
Siaaaaaaaaa. No. 4 años después y ahora estoy detrás de esto aún más. Simplemente no hagas nada de eso.
Piotr Kula
8

Considera esto.

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);
function BeginRequest(sender, e) {
    e.get_postBackElement().disabled = true;

}
     </script>
Ramakrishnankt
fuente
6

Los demás tienen razón en que necesita su devolución de llamada para devolver falso; Sin embargo, me gustaría agregar que hacerlo haciendo onclick es una forma fea y antigua de hacer las cosas. Recomiendo leer sobre JavaScript discreto . El uso de una biblioteca como jQuery podría facilitarle la vida, y el HTML está menos acoplado a su javascript (¡y jQuery es compatible con Microsoft ahora!)

Neil Williams
fuente
4

ASP.NET siempre genera asp:Buttoncomo un input type=submit.
Si desea un botón que no hace una publicación, pero necesita algo de control para el elemento en el lado del servidor, cree una entrada HTML simple con atributos type=buttonyrunat=server .

Si deshabilita las acciones de clic OnClientClick=return false, no hará nada al hacer clic, a menos que cree una función como:

function btnClick() {
    // do stuff
    return false;
}
Aristides Darlan
fuente
3

No dice qué versión de .NET Framework está utilizando.

Si está utilizando v2.0 o superior, puede usar la propiedad OnClientClick para ejecutar una función Javascript cuando se activa el evento onclick del botón.

Todo lo que tiene que hacer para evitar que se produzca una devolución del servidor es regresar falsede la función llamada JavaScript.

OtisAardvark
fuente
3

adicionalmente para la respuesta aceptada, puede usar UseSubmitBehavior = "false" MSDN

Arbejdsglæde
fuente
ASP.NET agrega; __doPostBack(hasta el final del cliente, haga clic en la secuencia de comandos.
IvanH
3

En mi caso, resolví agregar return en onClientClick:

Código detrás

function verify(){
  if (document.getElementById("idName").checked == "") {
    alert("Fill the field");
    return false;
  }
}

Superficie de diseño

<asp:Button runat="server" ID="send" Text="Send" onClientClick="return verify()" />
Rafael
fuente
Cómo ejecutar el OnClickmétodo después de esto.
5377037
2

puedes usar el código:

<asp:Button ID="Button2" runat="server"
     Text="Pulsa"
     OnClientClick="this.disabled=true"
     UseSubmitBehavior="False"/>

si es necesario enviar

...
<form id="form1" runat="server" onsubmit="deshabilita()">
...
<script type="text/javascript">
    function deshabilita()
    {
        var btn = "<%= Button1.ClientID %>";
        if (confirm("Confirme postback"))
        {
            document.getElementById(btn).disabled = true;
            return true;
        }
        return false;
    }
</script>

Elvia Soto
fuente
2

Con validación

En este ejemplo, utilicé dos controles ddly txtboxtengo una codificación feliz

 asp:ScriptManager ID="script1" runat="server" /asp:ScriptManager

    asp:UpdatePanel ID="Panel1" runat="server"
       ContentTemplate

// ASP BUTTON
asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-success" OnClientClick="return Valid()" OnClick="btnSave_Click"


   /ContentTemplate    
    /asp:UpdatePanel    

  <script type="text/javascript">
        function Valid() {

            if ($("#ctl00_ContentPlaceHolder1_YOUR CONTROL NAME").val() == 0) {
                alert("Please select YOUR TEXT");
                $("#ctl00_ContentPlaceHolder1_YOUR CONTROL NAME").focus();
                return false;
            }

            if ($("#ctl00_ContentPlaceHolder1_YOUR CONTROL NAME").val().length == 0) {
                alert("Please Type YOUR TEXT");
                $("ctl00_ContentPlaceHolder1_YOUR CONTROL NAME").focus();
                return false;
            }
            return true;
        }
</script>
Praneeth
fuente
2

Puedes usar JQuery para esto

<asp:Button runat="server" ID="btnID" />

que en JQuery

$("#btnID").click(function(e){e.preventDefault();})
Vikas
fuente