在OnChange JavaScript中访问Repeater项目控件 [英] Accessing Repeater Item Controls in OnChange JavaScript

问题描述

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

I've got a repeater control containing a textbox and a label. I want to set the label value based on the value the user sets in the textbox, on the client-side to avoid a round-trip to the server.

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

I wrote a JavaScript function which is called by the textbox OnChange event. Now I just need to access the textbox and label in that function. I understand I should be accessing the controls via <%# Container.FindControl(...).ClientID %> but I cannot get it to work in the OnChange event. I also tried <%# Container.ItemIndex %>, in case there was a problem with the nested quotes, but that didn't work either.

我是ASP.NET的新手，所以我认为我缺少明显的东西.

I'm a novice with ASP.NET so I assume I'm missing something obvious.

这是我到目前为止(目前正在尝试使用<％#Container.ItemIndex％> )的内容:

Here's what I've got so far (currently attempting to use <%# 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函数:

And here's the JavaScript function:

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，仅检查用户输入的特定限制之间的数值，如果没有输入则显示警报.

The second function, ValidateItemWeight, just checks the user entered a numeric value between certain limits and displays an alert if they didn't.

上面的代码起作用了，因为我只是将一个整数传递给了函数: OnChange ="ValidateItemWeightAndSetVolume(0);" ，但这仅适用于第一个转发器项目.如果我按如下所述对其进行修改，则该功能将无法运行: OnChange ="ValidateItemWeightAndSetVolume(<％#Container.ItemIndex％>);"

The code above works since I'm just passing an integer into the function: OnChange="ValidateItemWeightAndSetVolume(0);", but that is only applicable to the first repeater item. If I modify it as follows the function doesn't run: OnChange="ValidateItemWeightAndSetVolume(<%# Container.ItemIndex %>);"

推荐答案

您可以使用<％#Container.ItemIndex％> 作为注释中建议的我们的要求:

You can use <%# Container.ItemIndex %> as ourmandave suggested in the comment:

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

但是最好使用javascript这样的方式来获取标签(而不是带有string-id的索引concat):

But it would be better if you could use javascript to get the label (instead of index concat with string-id) like this (jQuery):

使用 OnChange = ValidateItemWeightAndSetVolume(this)并更改js函数，如下所示:

Use OnChange = ValidateItemWeightAndSetVolume(this) and change the js function like this:

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 ，如下所示:

Also, you can use a HeaderTemplate and FooterTemplate inside a Repeater like this:

<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.

This keeps the mark-up clean imo.

这篇关于在OnChange JavaScript中访问Repeater项目控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！