在 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
}
我有包含另一个子转发器的父转发器。 为简单起见,假设子转发器包含文本框和 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
}