使用 JavaScript，查找嵌套在母版页深处的 .NET 控件的 ClientID
简短的问题： *深吸一口气*
如何将表内TableRow 的ClientID 添加到PlaceHolder，该PlaceHolder 位于使用MasterPage 添加到SharePoint 页面的Web 部件内的UserControl 中？
解释：
我正在构建一个动态显示 SPList 项目的用户控件，每个 Web.UI.Table() 一个。 Table() 的第二行首先将被隐藏，并使用一个图像来启动一些 JavaScript 以在客户端浏览器中隐藏/显示该行（而不是使用回发或 ajax - 我有原因）。
然后，Table() 将被添加到 UserControl 中的 PlaceHolder，然后由 WebPart 使用，并且该 WebPart 将被添加到 SharePoint 页面，当然该页面会使用 MasterPage。鉴于嵌套得太深，我在制定 JavaScript 方法来查找 TableRow 的 ClientID 时遇到了真正的麻烦。
我的 .ascx 代码看起来像这样..
<script type="text/javascript">
function showHidden(itemId) {
var controlId = document.getElementById('<%= phDownloadTable.ClientID %>');
//alert(controlId);
document.getElementById(controlId).style.display = (document.getElementById(controlId).style.display == "table-row") ? "none" : "table-row";
}
</script>
<asp:PlaceHolder ID="phTable" runat="server"></asp:PlaceHolder>
我的 .cs 代码隐藏是这样的..
Table myTable = new Table();
TableRow hiddenRow = new TableRow();
hiddenRow.ID = "row" + itemId;
hiddenRow.Attributes.Add("style","display: none;");
... create TableCells and add to hiddenRow...
TableRow displayRow = new TableRow();
TableCell toggleCell = new TableCell();
Image toggleImage = new Image();
toggleImage.ImageUrl = "/images/myimage";
toggleImage.Attributes.Add("onclick","javascript:showHidden('" + hiddenRow.ClientID + "');
toggleCell.Controls.Add(toggleImage);
displayRow.Cells.Add(toggleCell);
... create more TableCells and add to displayRow
myTable.Rows.Add(displayRow);
myTable.Rows.Add(hiddenRow);
结果是，toggleImage“onclick”属性显示 showHidden('row999');，它传递 ' row999' 到 JavaScript 函数，但我不知道如何获取它引用的 TableRow 的完整 clientId。
我的页面的源代码显示 clientId 为 ctl00_SPWebPartManager1_g_eda9b9e9_4c7a_48e0_a2aa_fd8cdd65de6c_ctl00_row999，它比我习惯看到的要长，并且似乎包含两个“ct100_”部分，表明有多个级别的控件。
任何想法将不胜感激。我已经尝试了所有常见的途径（谷歌搜索“javascript .net control client id”等，但到目前为止我还没有找到任何有帮助的东西。大多数建议 document.getElementById('<%= myControl .ClientId %>')... 这很好，但我不知道“myControl” - 我需要从切换图像
！
发送
The short question:
*takes deep breath*
How I can ClientID of TableRow inside Table added to PlaceHolder, which is in a UserControl inside a Web Part added to a SharePoint page using a MasterPage?
The explanation:
I'm building a usercontrol that dynamically shows SPList items, one per Web.UI.Table(). The 2nd row of the Table() will be hidden at first, with an image used to initiate some JavaScript to hide/show the row at the clients browser (rather than use postback or ajax - I have reasons).
The Table() is then added to a PlaceHolder in a UserControl, which is then used by a WebPart, and that WebPart is added to a SharePoint Page, which of course uses a MasterPage. I'm having real trouble working out the JavaScript method to find the ClientID of the TableRow, given that it's nested so deeply.
My .ascx code looks something like this..
<script type="text/javascript">
function showHidden(itemId) {
var controlId = document.getElementById('<%= phDownloadTable.ClientID %>');
//alert(controlId);
document.getElementById(controlId).style.display = (document.getElementById(controlId).style.display == "table-row") ? "none" : "table-row";
}
</script>
<asp:PlaceHolder ID="phTable" runat="server"></asp:PlaceHolder>
and my .cs codebehind is something like this..
Table myTable = new Table();
TableRow hiddenRow = new TableRow();
hiddenRow.ID = "row" + itemId;
hiddenRow.Attributes.Add("style","display: none;");
... create TableCells and add to hiddenRow...
TableRow displayRow = new TableRow();
TableCell toggleCell = new TableCell();
Image toggleImage = new Image();
toggleImage.ImageUrl = "/images/myimage";
toggleImage.Attributes.Add("onclick","javascript:showHidden('" + hiddenRow.ClientID + "');
toggleCell.Controls.Add(toggleImage);
displayRow.Cells.Add(toggleCell);
... create more TableCells and add to displayRow
myTable.Rows.Add(displayRow);
myTable.Rows.Add(hiddenRow);
the result is that the toggleImage "onclick" attribute shows showHidden('row999');, which passes 'row999' to the JavaScript function, but I cannot figure out there how to get the full clientId of the TableRow it refers to.
The source of my page shows the clientId to be ctl00_SPWebPartManager1_g_eda9b9e9_4c7a_48e0_a2aa_fd8cdd65de6c_ctl00_row999, which is longer than I'm used to seeing, and seems to contain two 'ct100_' parts, suggesting multiple levels of controls.
Any ideas would be greatly appreciated. I've tried all the usual avenues (googleing for 'javascript .net control client id' and the like, but so far I've not found anything that helps. Most suggest document.getElementById('<%= myControl.ClientId %>')... which is fine, but I don't know 'myControl' - I need that send from the toggle image.
Fingers crossed!!
Kevin
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您无法设置客户端 ID，您应该能够设置一个类，并且 .nat 应该尊重这一点。
您可以通过类名称选择元素。
If you cant set the client id, you should be able to set a class, and that should be respected by .nat.
Them you can select the element by class name.
JavaScript 没有通配符选择选项。尝试使用 jQuery，这会让事情变得更加灵活。
然后你可以使用类似的东西：
这样你仍然可以找到正确的元素，即使它被移动到页面上的另一个位置。
以下是有关如何使用这些通配符选择器的更详细说明：
http://api.jquery.com/attribute-contains-selector/
使用普通JavaScript 您可以执行 document.getElementsByTagName('tr') ，然后循环它们以找到正确的对象。
如果您使用的是 Framework 4.0，您可以像这样设置页面的 ClientIdMode：
这样您就可以拥有更可预测的客户端 id。例如，您可以使用不带所有 ctl00_ 前缀的 id。
JavaScript has no wildcard selection options. Try using jQuery, that makes things more flexible.
Then you can use something like:
this way you will still find the right element, even when it's moved to another place on the page.
Here is a more detailed explanation on how to use these wildcard selectors:
http://api.jquery.com/attribute-contains-selector/
With plain JavaScript you can do a document.getElementsByTagName('tr') and then loop those to find the right object.
If you are using Framework 4.0 you can set the ClientIdMode of the page like this:
That way you can have more predictable client ids. For example, you can have id's without all the ctl00_ prefixes.