2009-09-30 30 views
23

có vấn đề nhỏ với trang ASP.net của tôi. Nếu người dùng nhấp đúp vào nút "gửi", nó sẽ ghi vào cơ sở dữ liệu hai lần (nghĩa là thực hiện phương pháp 'onclick' trên nút hình ảnh hai lần)ASP.Net nhấp đúp vào vấn đề

Làm cách nào để người dùng nhấp vào nút hình ảnh, chỉ nút hình ảnh bị tắt?

Tôi đã thử:

<asp:ImageButton 
    runat="server" 
    ID="VerifyStepContinue" 
    ImageUrl=image src 
    ToolTip="Go" 
    TabIndex="98" 
    CausesValidation="true" 
    OnClick="methodName" 
    OnClientClick="this.disabled = true;" /> 

Nhưng tài sản OnClientClick này hoàn toàn dừng trang bị gửi! Bất kỳ giúp đỡ?

Rất tiếc, có, tôi có các kiểm soát Xác thực ... do đó có vấn đề về icky.


làm việc về vấn đề này vẫn còn, đến thời điểm này ngay bây giờ:

đang

ASP: # mã

<asp:TextBox ID="hidToken" runat="server" Visible="False" Enabled="False"></asp:TextBox> 
... 
<asp:ImageButton runat="server" ID="InputStepContinue" Name="InputStepContinue" ImageUrl="imagesrc" ToolTip="Go" TabIndex="98" CausesValidation="true" OnClick="SubmitMethod" OnClientClick="document.getElementById('InputStepContinue').style.visibility='hidden';" /> 

C:

  private Random 
    random = new Random(); 


    protected void Page_Load(object sender, EventArgs e) 
    { 
     //Use a Token to make sure it has only been clicked once. 
     if (Page.IsPostBack) 
     { 
      if (double.Parse(hidToken.Text) == ((double)Session["NextToken"])) 
      { 
       InputMethod(); 
      } 
      else 
      { 
       // double click 
      } 
     } 

     double next = random.Next(); 

     hidToken.Text = next + ""; 
     Session["NextToken"] = next; 

Trên thực tế ... Đây gần như hoạt động. Vấn đề nhấp đúp là khá nhiều cố định (yay!) Hình ảnh vẫn chưa được ẩn.

Trả lời

21

Cách tiếp cận chung là gấp đôi.

serverside:

  1. On tải của trang, tạo ra một mã thông báo (sử dụng System.Random), lưu nó trong phiên, và viết nó vào một trường mẫu ẩn
  2. On gửi, kiểm tra lĩnh vực hình thức ẩn bằng biến phiên (trước đặt nó một lần nữa)
  3. Đừng làm việc

Clientside:

Tương tự như những gì bạn có, nhưng có thể chỉ cần ẩn nút và thay thế bằng một số văn bản như 'gửi'. Điều quan trọng cần lưu ý, phía khách hàng, là người dùng có thể hủy bỏ bài đăng bằng cách nhấn 'thoát', vì vậy bạn nên xem xét việc cần làm ở đây (tùy thuộc vào khoảng cách họ sẽ sử dụng mã thông báo như thế nào , vì vậy bạn sẽ cần phải đưa nút trở lại bị vô hiệu/ẩn).

Toàn bộ ví dụ sau:

C# (bao gồm mã để xem nó trong hành động):

<html> 
<head runat="server"> 
    <title>double-click test</title> 
    <script language="c#" runat="server"> 
    private Random 
     random = new Random(); 

    private static int 
     TEST = 0; 

    public void Page_Load (object sender, EventArgs ea) 
    { 
     SetToken(); 
    } 

    private void btnTest_Click (object sender, EventArgs ea) 
    { 
     if(IsTokenValid()){ 
      DoWork(); 
     } else { 
      // double click 
      ltlResult.Text = "double click!"; 
     } 
    } 

    private bool IsTokenValid() 
    { 
     bool result = double.Parse(hidToken.Value) == ((double) Session["NextToken"]); 
     SetToken(); 
     return result; 
    } 

    private void SetToken() 
    { 
     double next = random.Next(); 

     hidToken.Value  = next + ""; 
     Session["NextToken"] = next; 
    } 


    private void DoWork() 
    { 
     TEST++; 
     ltlResult.Text = "DoWork(): " + TEST + "."; 
    } 
    </script> 
</head> 
<body> 
    <script language="javascript"> 
     var last = null; 
     function f (obj) 
     { 
      obj.src = "http://www.gravatar.com/avatar/4659883ec420f39723c3df6ed99971b9?s=32&d=identicon&r=PG"; 
      // Note: Disabling it here produced strange results. More investigation required. 
      last = obj; 
      setTimeout("reset()", 1 * 1000); 
      return true; 
     } 

     function reset() 
     { 
      last.src = "http://www.gravatar.com/avatar/495ce8981a5127a9fd24bd72e7e3664a?s=32&d=identicon&r=PG"; 
      last.disabled = "false"; 
     } 
    </script> 
    <form id="form1" runat="server"> 
     <asp:HiddenField runat="server" ID="hidToken" /> 
     <asp:ImageButton runat="server" ID="btnTest" 
      OnClientClick="return f(this);" 
      ImageUrl="http://www.gravatar.com/avatar/495ce8981a5127a9fd24bd72e7e3664a?s=32&d=identicon&r=PG" OnClick="btnTest_Click" /> 
     <pre>Result: <asp:Literal runat="server" ID="ltlResult" /></pre> 
    </form> 
</body> 
</html> 
+0

+1. nice ....... –

+2

Không có sẵn, cách đơn giản để xử lý vấn đề này trong ASP.Net? – MusiGenesis

+0

MusiGenesis: Tất cả những gì tôi biết là bây giờ tôi có 7777 đại diện và tôi không bao giờ muốn thêm một chút nữa (http://www.ffonline.com/media/guides/ff7/ffvii_faq_lucky7.txt) (Và không). –

3

Tôi đã giải quyết điều này bằng cách thiết lập một lĩnh vực ẩn trên nhấp chuột của khách hàng trước khi nhấn máy chủ.

Sau đó, trong máy chủ, tôi kiểm tra trường ẩn và nếu giá trị là ví dụ 'FALSE' có nghĩa là tôi có thể hoặc không thể thực hiện hành động.

6

Nếu bạn có xác thực trên trang, việc vô hiệu hóa nút phía máy khách sẽ hơi phức tạp một chút. Nếu xác thực không thành công, bạn không muốn vô hiệu hóa nút. Dưới đây là đoạn trích thêm trình xử lý sự kiện phía máy khách:

private void BuildClickOnceButton(WebControl ctl) 

{ 

System.Text.StringBuilder sbValid = new System.Text.StringBuilder(); 

sbValid.Append("if (typeof(Page_ClientValidate) == 'function') { "); 

sbValid.Append("if (Page_ClientValidate() == false) { return false; }} "); 

sbValid.Append(ctl.ClientID + ".value = 'Please wait...';"); 

sbValid.Append(ctl.ClientID + ".disabled = true;"); 

// GetPostBackEventReference obtains a reference to a client-side script 
// function that causes the server to post back to the page. 

sbValid.Append(ClientScript.GetPostBackEventReference(ctl, "")); 

sbValid.Append(";"); 

ctl.Attributes.Add("onclick", sbValid.ToString()); 

} 

Xem này asp.net thread để biết thêm thông tin.

Cập nhật: mã ở trên sẽ được sử dụng để thêm trình xử lý OnClientClick vào mã phía sau. Bạn cũng có thể viết javascript trong đánh dấu aspx của bạn như sau:

<script type="text/javascript"> 
function disableButton(button) 
{ 
    // if there are client validators on the page 
    if (typeof(Page_ClientValidate) == 'function') 
    { 
     // if validation failed return false 
     // this will cancel the click event 
     if (Page_ClientValidate() == false) 
     { 
      return false; 
     } 
    } 

    // change the button text (does not apply to an ImageButton) 
    //button.value = "Please wait ..."; 
    // disable the button 
    button.disabled = true; 

    // fire postback 
    __doPostBack(button.id, ''); 
} 
</script> 

<asp:ImageButton runat="server" ID="VerifyStepContinue" ImageUrl="button.png" 
    ToolTip="Go" TabIndex="98" CausesValidation="true" OnClick="methodName" 
    OnClientClick="return disableButton(this);" /> 
+0

Điều này trông giống như những gì tôi đang theo, nhưng không hoàn toàn chắc chắn làm thế nào để làm việc với điều này ... mà các biến tôi sẽ cần phải thay đổi cho tôi? Tôi đã xem bài đăng trên diễn đàn và có vẻ như nó đúng, nhưng tôi không thể hiểu được nó. –

+0

Tôi đã cập nhật câu trả lời của mình bằng một ví dụ. Hi vọng điêu nay co ich! – jrummell

+0

Một lần nữa, không hoạt động ... khi tôi cố gắng sử dụng nó, nó vẫn vô hiệu hóa mọi thứ. –

0

Tương tự như phản ứng client-side Silky, tôi thường làm cho hai nút trông giống nhau ngoại trừ việc nút thứ hai bị vô hiệu hóa và ẩn. OnClientNhấp vào nút bình thường hoán đổi kiểu hiển thị của hai nút sao cho nút bình thường bị ẩn và nút bị tắt được hiển thị.

0

Tính năng nhấp đúp là triển khai phía máy chủ để ngăn việc xử lý cùng một yêu cầu có thể được triển khai ở phía máy khách thông qua JavaScript. Mục đích chính của tính năng này là ngăn chặn việc xử lý cùng một yêu cầu hai lần. Việc triển khai phía máy chủ thực hiện điều này bằng cách xác định yêu cầu lặp lại; tuy nhiên, giải pháp lý tưởng là để ngăn chặn điều này xảy ra ở phía khách hàng.

Trong nội dung HTML được gửi cho khách hàng cho phép họ gửi yêu cầu, một JavaScript xác thực nhỏ có thể được sử dụng để kiểm tra xem yêu cầu đã được gửi chưa và nếu có, hãy ngăn người gửi trực tuyến gửi lại yêu cầu. Hàm xác thực JavaScript này sẽ kiểm tra cờ toàn cầu để xem liệu yêu cầu đó đã được gửi chưa và, nếu có; không gửi lại yêu cầu. Nếu tính năng nhấp đúp bị vô hiệu hóa trên máy chủ, chúng tôi rất khuyên các trang JSP và HTML thực hiện việc ngăn chặn JavaScript này.

Ví dụ sau ngăn chặn các hình thức khỏi bị nộp hơn sau đó một lúc bằng cách sử dụng các hành động onSubmit() của đối tượng dạng:

... 
<script> 
var requestSubmitted = false; 
     function submitRequest() { 
       if (!requestSubmitted) { 
        requestSubmitted = true; 
        return true; 
       } 
       return false; 
     } 
</script> 
... 

     <FORM method="POST" action="Logon" onSubmit="javascript:submitRequest()"> 
       ...... 
     </FORM> 
+0

Mã onsubmit phải giống như sau: onsubmit = "return submitRequest()". –

0

cho những ai chỉ muốn làm một sửa chữa nhanh chóng, chỉ cần che giấu nó và hiển thị nút khác không có sự kiện

<asp:Button ID="RedeemSubmitButton" runat="server" Text="Submit to Redeem" OnClick="RedeemSubmitButton_Click" OnClientClick="hideit();" /> 
<asp:Button ID="RedeemSubmitButtonDisabled" style="display:none;" runat="server" Text="please wait" OnClientClick="javascript:alert('please wait, processing');" /> 
<script> 
function hideit() { 



     var btn = $get('<%= this.RedeemSubmitButton.ClientID %>'); 
     var btn2 = $get('<%= this.RedeemSubmitButtonDisabled.ClientID %>'); 
     if (btn != null) 
     { 

      btn.style.display = 'none'; 
      btn2.style.display = 'block' 
     } 
} 
    </script> 
Các vấn đề liên quan