Cara menonaktifkan postback pada Tombol asp (System.Web.UI.WebControls.Button)

135

Saya memiliki tombol asp. Ini sisi server jadi saya hanya dapat menampilkannya untuk pengguna yang masuk, tetapi saya ingin menjalankan fungsi javascript dan tampaknya ketika itu runat = "server" itu selalu memanggil acara postback.

Saya juga memiliki tombol biasa (<input... >) yang tidak berjalan di server dan berfungsi dengan baik ...

Bagaimana caranya agar tombol ini hanya menjalankan javascript dan bukan postback?

dkarzon.dll
sumber

Jawaban:

264

Apakah javascript Anda mengembalikan false setelah selesai.

<asp:button runat="server".... OnClientClick="myfunction(); return false;" />
womp
sumber
16
Dalam banyak kasus, orang menggunakan onclick atau OnClientClick dengan sintaks ini <asp: Button OnClientClick = "myFunction ()" /> di mana myFunction () mengembalikan false dan ini tidak cukup - Anda harus menggunakan OnClientClick = "return myFunction ()"
Bron Davies
17
Saya harus menambahkan UseSubmitBehavior = "False" serta; return false
merampok
9
Pastikan untuk menambahkan 'PenyebabValidation = "false"', jika tidak maka akan menambahkan 'WebForm_DoPostBackWithOptions' dan banyak markup ekstra.
Carter Medlin
Ini tidak berhasil untuk saya di ASP.NET 4+, namun jawaban Konstantin cukup OnClientClick="return false"berhasil.
TylerH
39
YourButton.Attributes.Add("onclick", "return false");

atau

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

Anda bisa menggunakan aksi klik jquery dan menggunakan fungsi preventDefault () untuk menghindari postback

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


$("#btnMyButton").click(function (e) {
// some actions here
 e.preventDefault();
}
Rameez
sumber
Ini adalah jawaban yang bagus karena memungkinkan Anda menguji kondisi untuk menonaktifkan.
John Mott
1
Jangan pernah menggunakan preventDefault karena akan menghentikan acara lain yang mengandalkan acara ini -1
Piotr Kula
1
@ppumkin: preventDefault adalah cara yang bagus untuk memberi tahu pendengar acara lain bahwa Anda menangani acara ini sehingga mereka tidak perlu melakukannya. Saya pikir yang Anda maksud adalah stopPropagation, yang memang menghentikan acara agar tidak didengar oleh pendengar acara lainnya.
Sebbas
Yeaaaaaaaaaa. tidak. 4 Tahun kemudian dan saya lebih mendukung ini sekarang. Hanya saja, jangan lakukan semua itu.
Piotr Kula
8

Pertimbangkan ini.

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

}
     </script>
Ramakrishnankt
sumber
6

Yang lain benar bahwa Anda membutuhkan panggilan balik Anda untuk mengembalikan false; namun saya ingin menambahkan bahwa melakukannya dengan menyetel onclick adalah cara lama yang buruk dalam melakukan sesuatu. Saya akan merekomendasikan membaca tentang javascript yang tidak mengganggu . Menggunakan pustaka seperti jQuery dapat membuat hidup Anda lebih mudah, dan HTML kurang digabungkan dengan javascript Anda (dan jQuery didukung oleh Microsoft sekarang!)

Neil Williams
sumber
4

ASP.NET selalu menghasilkan asp:Buttonsebagai file input type=submit.
Jika Anda menginginkan tombol yang tidak melakukan posting, tetapi membutuhkan kontrol untuk elemen di sisi server, buat input HTML sederhana dengan atribut type=buttondanrunat=server .

Jika Anda menonaktifkan tindakan klik OnClientClick=return false, itu tidak akan melakukan apa pun saat diklik, kecuali Anda membuat fungsi seperti:

function btnClick() {
    // do stuff
    return false;
}
ADP Tondolo
sumber
3

Anda tidak mengatakan versi kerangka .NET mana yang Anda gunakan.

Jika Anda menggunakan v2.0 atau yang lebih baru, Anda dapat menggunakan properti OnClientClick untuk menjalankan fungsi Javascript saat peristiwa onclick tombol dimunculkan.

Yang harus Anda lakukan untuk mencegah server postback terjadi adalah kembali falsedari fungsi JavaScript yang disebut.

OtisAardvark
sumber
3

selain itu untuk jawaban yang diterima Anda dapat menggunakan UseSubmitBehavior = "false" MSDN

Arbejdsglæde
sumber
ASP.NET menambahkan; __doPostBack(ke akhir skrip klik klien.
IvanH
3

Dalam kasus saya, saya menyelesaikan menambahkan pengembalian di onClientClick:

Kode Belakang

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

Permukaan Desain

<asp:Button runat="server" ID="send" Text="Send" onClientClick="return verify()" />
Raphael
sumber
Bagaimana menjalankan OnClickmetode setelah ini.
5377037
2

Anda dapat menggunakan kode:

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

jika perlu mengirimkan

...
<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
sumber
2

Dengan Validasi

Dalam contoh ini saya menggunakan dua kontrol, ddldan txtbox, selamat coding

 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
sumber
2

Anda dapat menggunakan JQuery untuk ini

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

daripada di JQuery

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

Anda hanya perlu mengembalikan false dari

function jsFunction() {
  try {
    // Logic goes here
    return false; // true for postback and false for not postback
  } catch (e) {
    alert(e.message);
    return false;
  }
}
<asp:button runat="server" id="btnSubmit" OnClientClick="return jsFunction()" />

Fungsi JavaScript seperti di bawah ini.

Catatan * : Selalu gunakan blok try-catch dan kembalikan false dari blok catch untuk mencegah kesalahan penghitungan dalam fungsi javaScript.

sagar deshmukh
sumber