2012-04-13 27 views
5

Tôi có 5 hộp kiểm trên một trang giả định và nếu có một hộp kiểm nào được chọn, tôi muốn thực hiện đăng lại. Tuy nhiên, tôi muốn trì hoãn việc postback một chút để nếu người dùng kiểm tra một hộp, nó chờ một giây hoặc lâu hơn để đảm bảo người dùng không muốn kiểm tra các hộp khác trước khi thực hiện chuyến đi vòng tới máy chủ. Vì vậy, nếu bạn kiểm tra tất cả năm trong kế nhanh chóng, bạn sẽ có thể kiểm tra tất cả năm trước khi postback được gửi đi.Làm thế nào để thực hiện các postback bị trì hoãn?

Có ai đã làm điều này, nhìn thấy điều này được thực hiện, biết làm thế nào nó có thể được thực hiện, hoặc có một lý do chính đáng để không làm điều đó ở tất cả?

Trả lời

7

Bạn không nói bạn đang sử dụng jQuery, nhưng tôi sẽ giả định vì mục đích thảo luận và rõ ràng rằng nó có sẵn. Một cái gì đó dọc theo dòng này nên làm việc cho bạn:

var timeout = null; 

// Set up code to respond to when the checkbox is checked/unchecked 
$('input[type="checkbox"]').change(function() { 
    // If this is the second check box in a row, clear previous timeout 
    if (timeout != null) 
     clearTimeout(timeout); 

    // Set a timeout that will fire in 5 seconds 
    timeout = setTimeout(function() { 
      // Post back the form 
     __doPostBack(); 
    }, 5000); 
}); 
+0

Câu trả lời của bạn rất tốt. ** Truy vấn ** - Có thể có khả năng kiểm tra 'CheckBox' cuối cùng hoặc thứ hai cuối cùng trong 5 giây có thể. Đúng?. Người dùng chắc chắn sẽ cảm thấy ngạc nhiên nếu 'Tất cả các Đột nhiên 'yêu cầu của tôi được gửi đến máy chủ ở giữa. – Pankaj

+0

@Guest, chắc chắn, sau khi đăng lại được bắt đầu, người dùng vẫn có thể nhấp vào các hộp kiểm. Hành động đó sẽ bị mất. Cá nhân tôi sẽ không sử dụng postbacks; Tôi muốn đăng dữ liệu qua AJAX, có thể bất cứ khi nào bất kỳ hộp kiểm nào được chọn. –

7

Tại sao không đặt AutoPostBack="false" trên các hộp kiểm và ngọn lửa postback thông qua một nút? Bằng cách đó, người dùng có cơ hội kiểm tra mọi thứ họ muốn cũng như gửi kết quả khi họ muốn.


Do nhận xét của bạn về nút 1 để đăng lại phản đối trực quan với người dùng, tại sao không quấn từng hộp kiểm trong UpdatePanel? Nó có thể được đánh dấu nhiều hơn một chút, nhưng nó sẽ làm chính xác những gì bạn muốn mà không cần phải thực hiện kịch bản "trì hoãn postback".

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" /> 
</asp:UpdatePanel> 

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
    <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" /> 
</asp:UpdatePanel> 

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional"> 
    <asp:CheckBox ID="CheckBox3" runat="server" AutoPostBack="true" /> 
</asp:UpdatePanel> 

<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional"> 
    <asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="true" /> 
</asp:UpdatePanel> 

<asp:UpdatePanel ID="UpdatePanel5" runat="server" UpdateMode="Conditional"> 
    <asp:CheckBox ID="CheckBox5" runat="server" AutoPostBack="true" /> 
</asp:UpdatePanel> 
+0

Theo ý kiến ​​của tôi, các nút chỉ tồn tại để thực hiện đăng lại là phản trực giác với người dùng. Lưu các nút mà mọi người nhận được, nhưng các nút chỉ để thực hiện các chuyến đi khứ hồi của máy chủ dường như gây nhầm lẫn cho một số người. – quillbreaker

+0

@quillbreaker - Xem chỉnh sửa của tôi –

+0

@Scott - Bạn nhận được 5 phiếu bầu quý giá do câu trả lời ban đầu của bạn chỉ để ghi nhớ rằng nó sẽ hữu ích cho người dùng trong tương lai. Vì vậy, đề cập rõ ràng các chỉnh sửa là tốt. – Pankaj

2

Có ai làm điều này, thấy điều này được thực hiện, biết làm thế nào nó có thể được thực hiện, hoặc có một lý do chính đáng để không làm điều đó ở tất cả?

Tôi sẽ tranh luận về bất kỳ hành động bị trì hoãn nào tải lại hoặc sửa đổi cấu trúc của trang. Đây là lý do:

Lý do # 1
Mọi người nhấp với tốc độ rất lớn khác nhau bằng nhiều phương thức nhập.

Lý do # 2
Hành vi phải nhất quán, không tuân theo các quy tắc ẩn mà bạn chỉ biết. Đôi khi người dùng được đào tạo nhiều và có thể tận dụng tối ưu hóa, nhưng phần lớn thời gian họ không.

Lý do # 3
Thay đổi cấu trúc (đặc biệt được thực hiện không đồng bộ) có thể hoàn tác các hành động tiếp theo.

Ví dụ:

  • tài khoản kiểm tra một hộp.
  • Trang đăng lại không đồng bộ sau một thời gian trễ ngắn.
  • Người dùng bỏ chọn cùng một hộp.
  • Hoàn thành đăng lại không đồng bộ, hãy kiểm tra lại hộp.

Đây là thiết kế xem xét cho bất kỳ postback không đồng bộ nào, nhưng độ trễ làm cho nó thậm chí kém trực quan hơn.

Alternative
Nếu các hoạt động đòi hỏi toàn bộ vòng đời được thực hiện khi postback xảy ra, sau đó tôi sẽ tranh luận để thực hiện postback ngay lập tức.

Nếu thao tác không yêu cầu toàn bộ vòng đời của trang được thực hiện, tôi đề nghị thực hiện logic trong nền với cuộc gọi AJAX sắp xếp và loại bỏ hoàn toàn postback. Sau đó, bạn có thể sử dụng các giá trị kết quả để cập nhật trình duyệt (nếu cần).

0

Tôi cũng gặp sự cố này một lần. Tôi quản lý để làm cho nó hoạt động bằng cách sử dụng một lá cờ được lưu trữ trong một lĩnh vực ẩn. Hãy xem xét điều này:

<%-- SomePage.aspx --%> 
<asp:HiddenField ID="checkboxClicked" runat="server" Value="false" /> 

<asp:CheckBox ID="checkBox1" runat="server" Text="Check 1" AutoPostBack="true" OnClientClick="return onCheckboxClick();" OnClick="OnCheckBoxClick" /> 
<asp:CheckBox ID="checkBox2" runat="server" Text="Check 2" AutoPostBack="true" OnClientClick="return onCheckboxClick();" OnClick="OnCheckBoxClick" /> 
<asp:CheckBox ID="checkBox3" runat="server" Text="Check 3" AutoPostBack="true" OnClientClick="return onCheckboxClick();" OnClick="OnCheckBoxClick" /> 
<asp:CheckBox ID="checkBox4" runat="server" Text="Check 4" AutoPostBack="true" OnClientClick="return onCheckboxClick();" OnClick="OnCheckBoxClick" /> 
<asp:CheckBox ID="checkBox5" runat="server" Text="Check 5" AutoPostBack="true" OnClientClick="return onCheckboxClick();" OnClick="OnCheckBoxClick" /> 

<% 
    protected void OnCheckBoxClick(object sender, EventArgs args) 
    { 
     // Your code here... 

     checkboxClicked.Value = "false"; 
    } 
%> 

<script type="text/javascript"> 

    function onCheckboxClick() { 
     var canPostBack = true; 

     if ($('#checkboxClicked').val() === 'true') { 
      canPostBack = false; 
     } 
     else { 
      $('#checkboxClicked').val('true'); 
      canPostBack = true; 
     } 

     return canPostBack; 
    } 

</script> 
Các vấn đề liên quan