使用 jQuery 在母版页中查找控件
使用 jQuery 在母版页中查找控件
这个问题出现在我担任版主的 ASP.NET 论坛上
“如何使用 jQuery 从子页面中查找母版页上的 HTML 元素？”
我跃跃欲试。我喜欢这样的问题，因为当我不懂答案时，这给了我探索和学习的借口。
问题在于，母版页上的元素 ID 会被篡改或修饰，以防止最终呈现的 HTML 上出现重复的 ID。
例如，一个 textbox，其 ID 如下：MasterPageTextBox，最终会变成这样的 ID：ctl00$MasterPageTextBox。
解决方案 1
我们可以将篡改后的 ID 硬编码到 jQuery 搜索条件中，这样就可以工作了。但那将是一场维护噩梦，将来，篡改后的 ID 可能会更改：这是不可接受的。当人们付钱让你编写代码时，你应该编写好的代码。
解决方案 2
如果您使用的是 ASP.NET 4，您可以控制生成的 ID 并使其可预测。然后，您可以将生成的 ID 硬编码到 CSS 选择器中。但是，目前大多数网站的情况并非如此。
解决方案 3
在 Google 和 Bing 上搜索了一番后，我想出了在母版页中使用这种方法
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterHiddenField
("HiddenFieldClientID", this.MasterPageTextBox.ClientID);
}
上面的代码获取生成的 ClientID 并将其放入发送到浏览器的 HiddenField 中。然后，子页面中的 jQuery 代码可以获取 HiddenField 中的值，并使用它来搜索元素。我认为这很酷，但是...... jQuery 代码无法编译，因为 HiddenField 不在其页面上。因此，必须在页面上放置一个空的 HiddenField 控件。这很麻烦，但它有效！以下是子页面上的 jQuery 如何访问隐藏字段，然后访问母版页上的 textbox
// ---- SetMasterPageTextBox ---------------------------
// write hello in a textbox field on the master page
function SetMasterPageTextBox()
{
// Get the hidden field
var HidField = $("#HiddenFieldClientID");
if (HidField.length == 1)
{
// get the contents of the hidden field
var ClientID = HidField[0].value;
// use it as the ID of the TextBox control
$("#" + ClientID).val("Hello");
}
}
我正要去发布我“出色”的答案，但与此同时，另一位论坛成员发布了一个比我的答案好得多的答案。
Frank Hong 建议用 span 标签包装元素。
解决方案 4
以下两件事使下一个解决方案有效。
Span标签 ID 不会被篡改或修饰。- CSS 选择器很酷，真的很酷......快速回顾
div, p
逗号 (,) 运算符表示 AND。页面上的所有
div和段落都将被选中。div > p
大于号 (>) 运算符表示 直接父元素。任何 直接 位于任何
div内部的段落都会被选中div p
空格 ( ) 运算符表示 祖先元素。任何位于
div内部的段落都会被选中，即使它们位于div内的其他元素内部。
在母版页中，用 span 元素包装 textbox
<%-- Span is to allow child page to jQuery select textbox--%>
<span id="SpanMyTextBox">
<asp:TextBox ID="MyTextBox" runat="server"></asp:TextBox>
</span>
这是呈现后的样子，请注意 TextBox id 被篡改了，但 span id 保持不变
<span id="SpanMyTextBox">
<input name="ctl00$MyTextBox" type="text" id="ctl00_MyTextBox" />
</span>
在子页面中，我们可以使用大于号或空格运算符。大于号运算符更明确地表达了我们的意图。我们使用 'input' 因为 textbox 被呈现为 HTML 输入元素。
因此，CSS 选择器是：#SpanMyTextBox > input。
// ---- SetMasterPageTextBox ---------------------------
// write hello in a textbox field on the master page
function SetMasterPageTextBox()
{
//Textbox is wrapped in span element
$("#SpanMyTextBox > input").val("Hello");
}
现在，是不是更好了？当然，开发者有责任确保不使用重复的 span id。
[更新:]
解决方案 5 (来自评论)
您也可以使用通配符 CSS 选择器。
input[id$=MyTextBox]
上面的行匹配所有 id 属性以 "MyTextBox" 结尾的 HTML input 元素。
它会匹配
<asp:TextBox ID="ctl00$MyTextBox" runat="server"...
<asp:TextBox ID="LaLaLaMyTextBox" runat="server"...
<asp:TextBox ID="abc123MyTextBox" runat="server"...
我希望有人觉得这有用。
史蒂夫·韦伦斯
CodeProject