如何使用 JQuery 将 Web 控件识别为客户端对象

Question

有人可以帮助我如何使用 Jquery 识别或捕获自定义 Web 控件并访问其客户端功能吗？

我在 asp.net 中创建了一个 Web 控件 (.ascx)，就像在示例中一样。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyControl.ascx.cs" Inherits="MyControl" %>

<asp:Panel ID="myPanel" runat="server">
     <asp:TextBox ID="myText" runat="server" />
</asp:Panel>

<script type="text/javascript">
     function showMessage(){ 
          var txt = $('<%= this.myText.ClientID %>')
          alert(txt.val());
     }
</script>

然后，我想将此控件放置在 Web 窗体 (.aspx) 的转发器中

<table>
<asp:Repeater ID="myRepeater" runat="server">
<ItemTemplate>
 <tr>
 <td>
 <Pre:MyControl ID="myControl" runat="server" />
 <input type="button" id="myButton" onclient="sendData(this);" />
 </td>
 </tr>
</ItemTemplate>
</asp:Repeater>
</table>

在同一页面中，我想管理我对单击旁边按钮的当前行的控制，这是我的疑问。

在我的函数 sendData 中，我想做这样的事情：

function sendData(sender){
 var row = $(sender).closest('tr');
 var ccontrol = row.find(*******) // 1. 
 ccontrol.showMessage(); // 2. 
}

这里我想用Jquery来控制我的控制。我可以通过 ID 找到它，如 row.find([id*='myControl'])，但我如何将它识别为对象。
这里我要调用当前控件的客户端函数

编辑： 当我这样做时：

var ccontrol = row.find("[id*='myControl']");

我在开发者工具（调试）中得到了这个

<div id="myRepeater_myControl_4_myPanel_4">
    <div id="myRepeater_myControl_4_myPanel_4">
    <input name="myRepeater$ctl04$myControl$myText" type="text" value="hello world" id="myRepeater_myControl_4_myText_4">
</div>
 ,
<input name="myRepeater$ctl04$myControl$myText" type="text" value="hello world" id="myRepeater_myControl_4_myText_4">

我很想知道如何将它作为对象获取并访问 showMessage()。

当我的控件呈现时，我可以在视图源中看到转发器在 html 中显示我的控件，并且每个控件的功能 showMessage 单独显示。我想封装一下。

Answer 1

因为我还不能发表评论，所以我把它写成答案：
我不太了解 aspx 模板，但请尝试查看 MSDN
我猜它应该是 onclientclick 属性而不是 onclient 来引用元素的点击处理程序。

Answer 2

您应该能够使用 jQuery:

获得您想要的任何控件

var yourControl = $("#yourcontrolid");

如果您想要它作为 object 只需执行以下操作：

var yourControlAsObject = $("#yourcontrolid")[0];

编辑：已更新以回答评论。

编辑 #2:

如果您只包含脚本函数一次并包含用户控件 (yourusercontrol.js)，效果会更好吗？如果你看看你的 HTML，showMessage 定义不是一遍又一遍地出现吗？

您可以将 showMessage 函数更改为：

function showMessage(controlID){ 
    var txt = $('#' + controlID);  // you didn't have the # in your example
    alert(txt.val());
}

然后在您的 sendData 函数中：

function sendData(sender){
    var row = $(sender).closest('tr');
    var ccontrol = row.find(*******)  // 1.
    showMessage(ccontrol.attr('id')); // 2. 
}

不确定这是否是您真正想要的，但也许这种方法至少可以帮助您前进。

Answer 3

嗯，其实答案并不短。答案就在这个来自微软的article

希望这对某人有所帮助。

如何使用 JQuery 将 Web 控件识别为客户端对象

How to recognize a Web Control as a Client Object with JQuery

javascript

c#

asp.net

jquery

web-controls