JS解决页面刷新导致按钮OnClientClick事件消失问题

news/2024/12/12 7:02:17/

目录

故障现象

开发运行环境

解决

其它


故障现象

System.Web.UI.WebControls.Button 提供了 OnClientClick  和 OnClick 事件属性。OnClientClick 提供客户端JS执行能力,并以 return false 或 return true 来决定是否继续执行 OnClick 事件,OnClick 事件执行服务器方法,执行 OnClick 事件会刷新 Web 页面。

比如如下代码:

<asp:Button id="sendButton" OnClientClick="return sendReady();" 
runat="server" class="btn btn-white" Text="发送短信验证码" onclick="sendButton_Click" />

OnClientClick 事件执行 sendReady() JS函数,如果函数 return true; 则执行 onclick 事件中 sendButton_Click 服务器方法。

另外如果点击此按钮将其置为不可用状态(this.disabled = true;),  再去调用其它服务器按钮事件,如下图:

图中的发送按钮点击成功后,暂时按钮不可用。此时去操作其它服务器按钮,如上传图片。则可能会出现不可用按钮恢复可用状态时,点击后直接执行了服务器方法,即 OnClientClick 事件属性消失。

开发运行环境

操作系统: Windows Server 2019 DataCenter

.net版本: .netFramework4.7.2 

开发工具:VS2019  C#

解决

发现通过服务器事件捆绑,无效:

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

客户端事件捆绑,有效:

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

其它

本示例中如果将按钮置为不可用状态(disabled = true;),即使客户端 JS 返回 return true ,也无法调用服务器方法,需要通过 JS 引用,简单的引用方法,我们可以调用如下代码:

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

 __doPostBack方法由.net 生成并管理,可以调用服务器方法,请注意引用的是元素的 name 而不是 ID,引用此方法还需要在页面头部引用如下属性:

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

当然如果不添加此选项,我们还可以通过模拟调用隐藏服务器按钮的方法。

感谢您的阅读,希望本文能够对您有所帮助。


http://www.ppmy.cn/news/1554427.html

相关文章

软件工程中的需求管理活动

本文是对IEEE-29148 系统与软件工程-生命周期流程-需求工程的第六章的整理和解读&#xff0c;在原文基础上有做适当润色调整。全文分为五个部分&#xff0c;分别是&#xff1a; [需求工程流程 1概述](/specification/req-flow-guide.html)[利益相关者 2需求定义流程](/specifi…

在推荐、RAG等业务中,如何完成亿级向量的快速检索?

AI因你而升温&#xff0c;记得加个星标哦&#xff01; 在推荐、RAG等业务中都需要用到ANN(Approximate Nearest Neighbor)&#xff0c;最常用的方法就是用户Query向量与向量库中的每个向量遍历检索得到答案&#xff0c;俗称暴力计算&#xff0c;这样做精度最高&#xff0c;但效…

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json&#xff0c;解除中国不能使用copilot的限制。 使用Notepad搜索copilot全文搜索&#xff0c;将下面两处的“CN,”删除&#xff0c;删除后如下&#xff1a; {"$comment": "Show Copilot on t…

【RabbitMQ】RabbitMQ中核心概念交换机(Exchange)、队列(Queue)和路由键(Routing Key)等详细介绍

博主介绍&#xff1a;✌全网粉丝21W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

ssd202d-badblock-坏块检测

这边文章讲述的是坏快检测功能 思路&#xff1a; 1.第一次烧录固件会实现跳坏块&#xff0c;但是后续使用会导致坏块的产生&#xff1b; 于是我在uboot环境变量添加了两个变量来控制坏快 lb_badnum //坏块个数 lb_badoff //坏块所在位置 2.第一次开机会根据lb_badnum是否…

SQL Server 数据库还原到某个时点(完整恢复模式)

将 SQL Server 数据库还原到某个时点&#xff08;完整恢复模式&#xff09; 适用范围&#xff1a; SQL Server 本主题介绍如何使用 SQL Server Management Studio 或 Transact-SQL 将数据库还原到 SQL Server 中的某个时间点。 本主题仅与使用完整恢复模式或大容量日志恢复模…

Android网络问题解决

1.出现问题Unable to access Android SDK add-on list 2.进入HTTP Proxy 3.Android SDK在线更新镜像服务器 A阿里云镜像站地址&#xff1a; mirrors.aliyun.com 端口&#xff1a;80 B清华大学镜像站地址&#xff1a; mirrors.tuna.tsinghua.edu.cn 端口&#xff1a;80 C北…

uni-app在image上绘制点位并回显

在 Uni-app 中绘制多边形可以通过使用 Canvas API 来实现。Uni-app 是一个使用 Vue.js 开发所有前端应用的框架&#xff0c;同时支持编译为 H5、小程序等多个平台。由于 Canvas 是 H5 和小程序中都支持的 API&#xff0c;所以通过 Canvas 绘制多边形是一个比较通用的方法。 1.…