故障現(xiàn)象

System.Web.UI.WebControls.Button 提供了 OnClientClick  和 OnClick 事件屬性。OnClientClick 提供客戶端JS執(zhí)行能力，并以 return false 或 return true 來決定是否繼續(xù)執(zhí)行 OnClick 事件，OnClick 事件執(zhí)行服務(wù)器方法，執(zhí)行 OnClick 事件會刷新 Web 頁面。

比如如下代碼：

<asp:Button id="sendButton" OnClientClick="return sendReady();" 
runat="server" class="btn btn-white" 
  Text="發(fā)送短信驗證碼" onclick="sendButton_Click" />

OnClientClick 事件執(zhí)行 sendReady() JS函數(shù)，如果函數(shù) return true; 則執(zhí)行 onclick 事件中 sendButton_Click 服務(wù)器方法。

另外如果點擊此按鈕將其置為不可用狀態(tài)（this.disabled = true;）,  再去調(diào)用其它服務(wù)器按鈕事件，如下圖：

圖中的發(fā)送按鈕點擊成功后，暫時按鈕不可用。此時去操作其它服務(wù)器按鈕，如上傳圖片。則可能會出現(xiàn)不可用按鈕恢復(fù)可用狀態(tài)時，點擊后直接執(zhí)行了服務(wù)器方法，即 OnClientClick 事件屬性消失。

開發(fā)運行環(huán)境

操作系統(tǒng)： Windows Server 2019 DataCenter

.net版本： .netFramework4.7.2 

開發(fā)工具：VS2019  C#

解決

發(fā)現(xiàn)通過服務(wù)器事件捆綁，無效：

void Page_load(Object sender, EventArgs e)
{
     sendButton.OnClientClick = "return sendReady();";
}

客戶端事件捆綁，有效：

sendbtn.setAttribute("onclick","return sendReady();");

其它

本示例中如果將按鈕置為不可用狀態(tài)（disabled = true;），即使客戶端 JS 返回 return true ，也無法調(diào)用服務(wù)器方法，需要通過 JS 引用，簡單的引用方法，我們可以調(diào)用如下代碼：

__doPostBack(document.getElementById("sendButton").name, '');

 __doPostBack方法由.net 生成并管理，可以調(diào)用服務(wù)器方法，請注意引用的是元素的 name 而不是 ID，引用此方法還需要在頁面頭部引用如下屬性：

<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" %>

當然如果不添加此選項，我們還可以通過模擬調(diào)用隱藏服務(wù)器按鈕的方法。

到此這篇關(guān)于通過JS解決頁面刷新導(dǎo)致按鈕OnClientClick事件消失問題的文章就介紹到這了,更多相關(guān)JS解決OnClientClick事件消失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論