在 OnChange JavaScript 中访问中继器项控件

Question

我有一个包含文本框和标签的转发器控件。我想根据用户在文本框中设置的值在客户端设置标签值，以避免往返服务器。

我编写了一个由文本框 OnChange 事件调用的 JavaScript 函数。现在我只需要访问该函数中的文本框和标签。我知道我应该通过<%# Container.FindControl(...).ClientID %> 访问控件，但我无法让它在 OnChange 事件中工作。我还尝试了<%# Container.ItemIndex %>，以防嵌套引号出现问题，但这也不起作用。

我是 ASP.NET 的新手，所以我认为我遗漏了一些明显的东西。

这是我目前得到的（目前正在尝试使用<%# Container.ItemIndex %>）：

<asp:Content ID="Content3" ContentPlaceHolderID="regionBody" runat="server">
    <table class="DataGrid">
        <tr class="HeaderStyle">
            <td>Item</td>
            <td>Weight (kg)</td>
            <td>Total Volume (m3):</td>
        </tr>
        <asp:Repeater ID="rptItems" runat="server" 
            OnItemDataBound="rptItems_ItemDataBound" >
            <ItemTemplate>
                <tr class='<%# Container.ItemIndex % 2 == 0 
                            ? "ItemStyle" 
                            : "AlternatingItemStyle"  %>' 
                    style="text-align: center">
                    <td>
                        <asp:Label ID="lblItemNum" runat="server" />
                    </td>
                    <td>
                        <asp:TextBox ID="txtWeight" Height="20px" Width="40px" 
                            runat="server" Visible="true" 
                            OnChange="ValidateItemWeightAndSetVolume(0);" />
                    </td>
                    <td>
                        <asp:Label ID="lblVolume" runat="server" 
                            Visible="true" CssClass="numericLeft" />
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>
</asp:Content>

这是 JavaScript 函数：

function ValidateItemWeightAndSetVolume(itemIndex) { 
    var weightId = "regionBody_rptItems_txtWeight_" + itemIndex;
    var volumeId = "regionBody_rptItems_lblVolume_" + itemIndex;
    var txtWeight = document.getElementById(weightId);
    var lblVolume = document.getElementById(volumeId);

    var volume = 0;
    var validated = ValidateItemWeight(txtWeight);
    if (validated) {
        var weight = parseFloat(txtWeight.value);
        volume = weight / <%=VOLUMETRIC_WEIGHT_CONVERSION%>;
    }

    // asp:label is rendered as a span in HTML.  So to set the value, 
    //  have to set the inner HTML.
    lblVolume.innerHTML = volume;
}

第二个函数 ValidateItemWeight 只检查用户输入的数值是否在一定的范围内，如果没有，则显示警报。

上面的代码有效，因为我只是将一个整数传递给函数：OnChange="ValidateItemWeightAndSetVolume(0);"，但这仅适用于第一个转发器项目。如果我将其修改如下，则该功能不会运行：OnChange="ValidateItemWeightAndSetVolume(<%# Container.ItemIndex %>);"

Answer 1

您可以按照我们在评论中的建议使用<%# Container.ItemIndex %>：

... OnChange="ValidateItemWeightAndSetVolume(<%# Container.ItemIndex %>`);" />

但如果你可以使用 javascript 来获取标签（而不是使用 string-id 的索引 concat）会更好（jQuery）：

使用OnChange = ValidateItemWeightAndSetVolume(this)，修改js函数如下：

function ValidateItemWeightAndSetVolume(textBox) {    
    var txtWeight = textBox;
    var lblVolume = $(textBox).closest("td").next("td").find("span")[0];
    var volume = 0;
    var validated = ValidateItemWeight(txtWeight);
    if (validated) {
        var weight = parseFloat(txtWeight.value);
        volume = weight / <%=VOLUMETRIC_WEIGHT_CONVERSION%>;
    }

    lblVolume.innerHTML = volume;
}

此外，您可以在 Repeater 中使用 HeaderTemplate 和 FooterTemplate，如下所示：

<asp:Repeater ID="rptItems" runat="server">
    <HeaderTemplate>
        <table class="DataGrid">
            <tr class="HeaderStyle">
                <td>Item</td>
                <td>Weight (kg)</td>
                <td>Total Volume (m3):</td>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <!-- Your item template here -->
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

这使标记保持干净 imo。