Thứ Sáu, 31 tháng 8, 2012

Tắt chức năng postback của button control ASP.NET

Set OnClientClick="return false;". Nếu có hàm cần làm việc trên client thì đặt return false ngay sau các hàm trên client. Ví dụ set OnClientClick="hamCuaBan();return false;". Khi click vào button sẽ thực thi hàm hamCuaBan() và sau đó  gặp đoạn return false; nó sẽ không postback lên server nữa.
  1. <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return false;" />  
Để hiểu rõ quá trình làm việc của button control ta set UseSubmitBehavior="false" và đăng ký sự kiện onclick="Button1_Click":
  1. <asp:Button ID="Button1" UseSubmitBehavior="false" runat="server" Text="Button" OnClientClick="return false;" onclick="Button1_Click" />  
Khi control render, view page source sẽ thấy:
  1. <input type="button" id="Button1" onclick="return false;__doPostBack('Button1','')" value="Button" name="Button1">  
  2.       
UseSubmitBehavior="false" thì type="button" thay vì type="submit". Khi type="button" thì khi click vào nó sẽ không tự động postback mà phải viết hàm cho nó để có thể postback lên server.

Để ý đoạn
  1. onclick="return false;__doPostBack('Button1','')"    
.ASP.NET nó tự thêm hàm để postback lên server đặt sau các hàm xử lý bên client.
__doPostBack('Button1','') chính là hàm để postback lên xử lý để xử lý các sự kiện trên server . Trường hợp này nó sẽ thực thi sự kiện onclick="Button1_Click". Nếu không đăng ký sự kiện trên server cho button nó sẽ không phải làm gì cả tuy nhiên nó vẫn postback lên server.

Quá trình xử lý khi click vào button:  nó sẽ thực hiện các hàm bên phía client trước sau đó sẽ thực hiện tiếp các hàm postback. Nếu ta chèn thêm 1 đoạn return false vào sự kiện ở client thì tất cả các hàm phía sau nó sẽ không thực hiện nữa, do đó sẽ không postback lên server nữa. Vì các hàm postback bị đặt sau các hàm bên client nếu có.

Để chứng mình điều này ta làm thử 1 ví dụ:

Set lại hàm:
  1. OnClientClick="alert('trước return');return false;alert('sau return')"    
Khi render sẽ thấy:
  1. onclick="alert('trước return');return false;alert('sau return');__doPostBack('Button1','')"     
Click vào button sẽ chỉ hiện thị alert box "trước return" và không làm gì phía sau return false nữa cả. Nếu bỏ đoạn return false; đi nó sẽ hiển thị lần lượt 2 alert box và trang sẽ bị load lại do postback.

1 nhận xét :

  1. Cám ơn anh rất nhiều, bài viết rất có ích đối với em, cả đêm đau đầu..3 giờ sáng đọc đc 1 dòng mừng hết lớn

    Trả lờiXóa