webforms - 自定义 Web 控件 ID 包括子 ID
问题描述
我的自定义 Web 控件 (ascx)
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomAutoCompleteTextBox.ascx.cs" Inherits="UserControls_CustomAutoCompleteTextBox" ClientIDMode="Static" %>
<asp:TextBox ID="AutoCompleteTextBox" runat="server" />
网页设备Move上的实现
<%@ Page Language="C#" MasterPageFile="~/SiteMasterPage.master" AutoEventWireup="true" CodeFile="EquipmentMove.aspx.cs" Inherits="Equipment_EquipmentMove" %>
<Custom:AutoCompleteTextBox runat="server" ID="HardwareSNTextBox1"
OnCloseFunction="TestOnClosefunction"
OnFocusFunction="testme"
OnKeyUpFunction="EquipmentSearchCheckHardwareSNLength"
PostbackURL="EquipmentMove.aspx/HardwareSNAutoComplete"
SpellCheck="false" />
在运行时 Custom:AutoCompleteTextBox 控件的客户端 ID 变为“HardwareSNTextBox1_AutoCompleteTextBox”。结果标记:
<input name="ctl00$cpBody$HardwareSNTextBox1$AutoCompleteTextBox" type="text" id="ctl00_cpBody_HardwareSNTextBox1_AutoCompleteTextBox" class="ui-autocomplete-input" autocomplete="off">
如果我想在 EquipmentMove 网页上编写一个名为“TestOnClosefunction”的 javascript ,并且我想访问此控件,但使用它最初输入的 ID 为“HardwareSNTextBox1”而不是“HardwareSNTextBox1_AutoCompleteTextBox”,这是否可能?
编辑:我想如果使用此自定义 Web 控件的开发人员在编写他们的 js 时检查实际 ID 的标记,那么这可能会起作用。虽然不是很直观。
解决方案
一个非常好的方法是使用服务器控件的ClientID
属性,例如在您的EquipmentMove
ASPX 页面中:
<form id="form1" runat="server">
<div>
<Custom:AutoCompleteTextBox runat="server" ID="HardwareSNTextBox1" />
<input type="button" value="Test" onclick="javascript:TestOnClosefunction()" />
</div>
</form>
<script type="text/javascript">
function TestOnClosefunction() {
var textBox = document.getElementById('<%= HardwareSNTextBox1.FindControl("AutoCompleteTextBox").ClientID %>');
console.log(textBox.value);
}
</script>
要验证它是否有效,只需单击按钮以在浏览器控制台中Test
打印 的值。TextBox
解释
嵌入服务器端代码行并ClientID
在 JavaScript 中使用该属性可确保始终发现您的服务器控件,无论其生成的 ID 是什么。
更新:也许我应该强调的是这一行:
var textBox = document.getElementById('<%= HardwareSNTextBox1.FindControl("AutoCompleteTextBox").ClientID %>');
变成:
var textBox = document.getElementById('HardwareSNTextBox1_AutoCompleteTextBox');
当页面运行时。与在 JavaScript 中对 ID 进行硬编码相比的优势在于,它的工作方式与 Control 的ClientIDMode
属性设置的值无关。
推荐阅读
- angular - e2e Protractor 测试在本地运行,但不在竹子上运行
- php - laravel与有向无环图的递归关系
- c++ - Is there a data structure like a C++ std set which also quickly returns the number of elements in a range?
- spring-boot - 如何从 Rest 接口创建 OpenApi?
- javascript - Owl Carousel - 导航按钮移动页面中的所有滑块
- symfony - 如何从 URL shopware 获取参数
- javascript - 如何在 vue 3 项目中导入handsontable?
- java - 如何使用 Java 为 S3 对象创建自定义文件名
- aws-amplify - Amplify ssl 证书已过期 - 如何续订
- docker - 高山卡夫卡“OpenSSL 在构建时不可用”