在 ASP.NET Web 表单中,我想使用 javascript 在子 Repeater 中进行控制

In ASP.NET Web Forms I want to get control inside child Repeater with javascript

我有包含另一个子转发器的父转发器。 为简单起见,假设子转发器包含文本框和 Requiredvalidator。

标记的简单示例:

<asp:Repeater ID="rpt1" runat="server">
 <HeaderTemplate>
 ....
 </HeaderTemplate>
 <ItemTemplate>
 <asp:Label ID="lbl1" runat="server" CssClass=".."></asp:Label>
 <div class="..">
 <asp:Repeater ID="rpt2" runat="server">
     <HeaderTemplate>
     </HeaderTemplate>
     <ItemTemplate>
       <div class="...">
       <asp:TextBox ID="txt21" runat="server" CssClass="..." MaxLength="7" CssClass="ErrorMessage" ErrorMessage="*" />
       <asp:RequiredFieldValidator ID="rfv21" runat="server" CssClass="ErrorMessage" ErrorMessage="*" />
       </div>
     </ItemTemplate>
     <FooterTemplate>
     </FooterTemplate>
 </asp:Repeater>
 </div>
 </ItemTemplate>
 <FooterTemplate>
 </FooterTemplate>
</asp:Repeater>

我创建了一个这样的方法来获取第二个转发器的 RequiredField id:

function getId(){

var myId = document.getElementById('<%= rfv21.ClientID %>');
}

当然不行,出现了异常:

The name control-name Does Not Exist in the Current Context

那我该怎么做呢?

我想提一下,我的业务需求是当 txt21 的 onchange、onkeyup、onkeydown 事件触发时,它将获得等效的 rfv21 并启用它:

我创建了这个为 onchange、onkeyup、onkeydown 事件触发的方法已更改:

 function txt21_onChange(txtbox) {
        var newValue = this.value;
        var oldValue = this.oldvalue;
        var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
        if (newValue != oldValue) {
            ValidatorEnable(myRfv2, true); 
        }
        } 

我将 txt21 更新为:

<asp:TextBox ID="txt21" runat="server" CssClass=".." MaxLength="7" onkeyup="javascript: txt21_onChange(this);this.oldvalue = this.value;" />

但是这条线需要工作:

var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');

正如我之前解释的那样。

我认为 Item.FindControl(..) 可能会有帮助,但在这种情况下我们如何使用它?

这里的问题是会有很多这样的控件,每个子中继器的每一行都有一个。所有生成的 ID 都会略有不同。因此,您可以使用 jQuery 相对于触发事件的 txt 快速找到它们,而不是通过 id 查询它们(不可能):

function txt21_onChange(txtbox) {
    var rfv2 = 
     $(textbox)           // gives you the jquery object representing the textbox
     .closest("div")      // the parent div
     .find("id*='rfv2'"); // the element you are looking for, id contains rfv2

这回答了本线程中关于如何获取元素的直接问题。但我不确定它是否会解决 enabling/disabling 验证的更大问题。使用 javascript 中的服务器端控件无法轻松做到这一点。此外,在您的代码中默认情况下不会禁用验证器。尽管我相信所有这些都值得在 SO>

上提出一个单独的问题

您可以绑定来自 Repeater Repeater.ItemDataBound 事件的 javascript 函数调用。

代码Bahind

 void R1_ItemDataBound(Object Sender, RepeaterItemEventArgs e) 
 {
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
      {            
          TextBox txt21 = (TextBox)e.Item.FindControl("txt21");
          RequiredFieldValidator rfv21 = (RequiredFieldValidator)e.Item.FindControl("rfv21");
          txt21.Attributes.Add("onclick", "txt21_onChange('" + txt21.ClientID + "','" + rfv21.ClientID + "'" )            
      }
 }    

Javascript

function txt21_onChange(txt21ID, rfv21ID) 
{
    txt21ID = document.getElementById(txt21ID);
    rfv21ID = document.getElementById(rfv21ID);
    //The above are TextBox and RequiredFieldValidator objects of row of TextBox that triggered change event.
    //You can use these object  
}