Блог

Итак, у меня небольшая проблема с объединением моего собственного Javascript с элементами управления сервера ASP.

На картинке: у меня на странице есть пара текстовых полей ASP:, которые создаются повторителем. Моя цель — суммировать все значения, которые пользователь вводит в эти текстовые поля. Это должно происходить всякий раз, когда пользователь изменяет что-либо в содержимом текстовых полей. (Внизу страницы у меня есть небольшой калькулятор цен, который работает с кодом на стороне сервера, но я хочу сделать его более динамичным, я говорю о txtTeam и txtPart)

 <asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="Server">
<script type="text/javascript"> 
</script>

<div id='inputDiv'>
    <h1>
        Students per team</h1>
    <table>
        <tr>
            <td>
                Team
            </td>
            <td>
                Actual
            </td>
            <td>
                Maximum
            </td>
        </tr>
        <asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsTeams">
            <ItemTemplate>
                <tr>
                    <td id='td<%# Eval("team_id") %>'>
                        <%# Eval("name") %>
                    </td>
                    <td id='txtTeam<%# Eval("team_id") %>'>
                        <asp:TextBox ID="txtTeam" runat="server"></asp:TextBox>
                        <asp:RangeValidator EnableClientScript="true" ID="rgvTeams" runat="server" ErrorMessage="*"
                            MinimumValue="0" MaximumValue='<%# Eval("st_max") %>' ControlToValidate="txtTeam"></asp:RangeValidator>
                    </td>
                    <td id='lblTeam<%# Eval("team_id") %>'>
                        <asp:Label runat="server">
                        <%# Eval("st_max") %>
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>
    <asp:ObjectDataSource ID="odsTeams" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetTeamsByDelegationID" TypeName="ERASTableAdapters.tbl_teamTableAdapter"
        OnSelecting="odsTeams_Selecting">
        <SelectParameters>
            <asp:Parameter Name="delegation_id" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <h1>
        Additional Participants</h1>
    <table>
        <tr>
            <td>
                Category
            </td>
            <td>
                Actual
            </td>
            <td>
                Maximum
            </td>
        </tr>
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsParticipantsCat">
            <ItemTemplate>
                <tr>
                    <td id='<%# Eval("participant_category_id") %>'>
                        <%# Eval("name") %>
                    </td>
                    <td id='txtPart<%# Eval("participant_category_id") %>'>
                        <asp:TextBox ID="txtPart" runat="server" Enabled='<%# getMax(Eval("key").ToString()) > 0 %>'></asp:TextBox>
                        <asp:RangeValidator EnableClientScript="true" ID="rgvPart" runat="server" ErrorMessage="*"
                            MinimumValue="0" MaximumValue='<%# getMax(Eval("key").ToString())%>' ControlToValidate="txtPart"></asp:RangeValidator>
                    </td>
                    <td id='lblPart<%# Eval("participant_category_id") %>'>
                        <asp:Label runat="server">
                        <%# getMax(Eval("key").ToString())%>
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
        <asp:ObjectDataSource ID="odsParticipantsCat" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetAdditionalParticipantCategories" TypeName="ERASTableAdapters.tbl_participant_categoryTableAdapter">
        </asp:ObjectDataSource>
    </table>
</div>
<h1>
    Advance to be paid</h1>
<table>
    <tr>
        <td>
            Number of participants
        </td>
        <td>
            Days
        </td>
        <td>
            Price
        </td>
        <td>
            Total
        </td>
    </tr>
    <tr>
        <td runat="server" id="tdNumberPart1">
            0
        </td>
        <td runat="server" id="tdDays1">
            0
        </td>
        <td runat="server" id="tdPrice1">
            0
        </td>
        <td runat="server" id="tdTotal1">
            0
        </td>
    </tr>
    <tr>
        <td runat="server" id="tdNumberPart2">
            0
        </td>
        <td>
            N/A
        </td>
        <td runat="server" id="tdPrice2">
            0
        </td>
        <td runat="server" id="tdTotal2">
            0
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td runat="server" id="tdGrandTotal" style="font-weight: bold">
            0
        </td>
    </tr>
</table>
<asp:Button runat="server" ID="btnConfirm" Text="Confirm" OnClick="btnConfirm_Click"
    Style="height: 29px" />
    <asp:Label runat="server" ID="lblInfo"></asp:Label>
  

Укажите идентификаторы ваших таблиц, например <table id="students"> и <table id="additional"> . Затем выполните итерацию строк, найдите элемент ввода в каждой строке и суммируйте значения по мере продвижения:

 function sumTable(id)
{
    var count = 0;
    var studentTable = document.getElementById(id);
    for (var i=1; i in studentTable.rows; i  )
    {
        var r = studentTable.rows[i];
        var input = r.getElementsByTagName("input")[0];
        var n = parseFloat(input.value);
        if (isFinite(n)) count  = n;
    }
    return count;
}
var totalParticipants = sumTable("students")   sumTable("additional");
  

Используя библиотеку, подобную jquery, вы можете легко выбрать все поля ввода в пределах определенного div (скажем, вашего div repeater) или вы можете добавить класс специально для этих полей ввода и захватить их таким образом.

Присоедините вызов функции к методу onblur, чтобы, когда они удаляются от текстовых полей, вы могли суммировать их.