0

数量テキストボックスに値を入力できるようにしたい場合:

  • その値に「単位平方フィート」を掛けて、結果を「小計」に格納します。
  • 各小計を合計し、結果を「Total」に格納します

これは私がこれまでに持っているものです:

           <asp:GridView runat="server" ID="gridViewBuildOfficeSpace" AllowPaging="false" 
                AllowSorting="false" AutoGenerateDeleteButton="false" 
                AutoGenerateEditButton="false" AutoGenerateSelectButton="false" 
                AutoGenerateColumns="false" ShowFooter="true" 
               onrowdatabound="gridViewBuildOfficeSpace_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:BoundField DataField="Size" HeaderText="Size" />
                    <asp:BoundField DataField="Dimensions" HeaderText="Dimensions" />
                    <asp:TemplateField HeaderText="Unit Square Foot">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="unitSquareFootLabel" Text='<%# Eval("UnitSquareFoot") %>'  />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Quantity" >
                        <ItemTemplate>
                            <asp:TextBox AutoPostBack="true" ID="gridviewQuantityItem" runat="server"/>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="Label12" Text="Total Size: " runat="server" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="SubTotal">
                        <ItemTemplate>
                            <asp:Label ID="gridViewItemSubTotal"  runat="server" />
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:Label ID="totalSizeDisplayLabel" runat="server" />
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>

コードビハインド:

        protected void gridViewBuildOfficeSpace_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        for (int i = 0; i < gridViewBuildOfficeSpace.Rows.Count; i++)
        {
            gridViewBuildOfficeSpace.Rows[i].Cells[5].Text = Convert.ToString(Convert.ToDouble(gridViewBuildOfficeSpace.Rows[i].Cells[3].Text)*Convert.ToDouble(gridViewBuildOfficeSpace.Rows[i].Cells[4].Text)); 
        }
    }

TextBox 内で OnTextChanged を使用してみました。次に、関連するコントロールを int に変換して乗算し、値をラベルに表示しようとしましたが、unitSquareFootLabel に関する null 参照を取得します。

しかし、上記のコードビハインドでは、入力文字列が正しい形式ではありません。

どうすればいいですか？

4

1 に答える 1

0

2 つのオプションがあります。

  1. jQueryまたはjavascriptを使用してクライアント側で計算を行う
  2. C# を使用してバックエンドで実行します (ページの更新が必要です)。

最初のオプションをお勧めします。以下に例を示します。グリッドビューを少し変更する必要があります。JS と jQuery で簡単に参照できる CSS クラス名をいくつか追加しました。

<asp:GridView runat="server" ID="gridViewBuildOfficeSpace" 
    AutoGenerateColumns="False" ShowFooter="True"
    DataSourceID="SqlDataSource1">
    <Columns>
        <asp:BoundField DataField="DESCRIPTION" HeaderText="Description" />
        <asp:BoundField DataField="SIZE" HeaderText="Size" />
        <asp:BoundField DataField="DIMENSIONS" HeaderText="Dimensions" />
        <asp:TemplateField HeaderText="Unit Square Foot">
            <ItemTemplate>
                <asp:Label runat="server" ID="unitSquareFootLabel" Text='<%# Eval("SQFOOT") %>'  />
            </ItemTemplate>
            <ItemStyle CssClass="unitSquareFoot" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Quantity" >
            <ItemTemplate>
                <asp:TextBox ID="gridviewQuantityItem" runat="server" onblur="calculate()"/>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="Label12" Text="Total Size: " runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="SubTotal">
            <ItemTemplate>
                <asp:Label ID="gridViewItemSubTotal"  runat="server" />
            </ItemTemplate>
            <ItemStyle CssClass="SubTotal" />
            <FooterTemplate>
                <asp:Label ID="totalSizeDisplayLabel" runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

次に、ページの下部で、終了 body タグの前に、次の js を追加します。

<script>
    function calculate() {
        //get the gridview
        gv = $('#gridViewBuildOfficeSpace');
        //Find the number of rows in the grid
        var rowCount = gv.find('tr').length;

        //Iterate through each row looking for the input boxes (This section is for the ROW totals)
        for (var i = 0; i < rowCount; i++) {
        //Iterate through each text box
            var row = gv.find("tr:eq(" + i + ")");
            //Find the input text field
            row.find(":input[type=text]").each(function () {
                //Get the quantity value
                quantity = $(this).val();
                //Get the sqfoot
                sqfoot = row.find("[class$='unitSquareFoot']").text();
                //Add the text to the subtotal field
                row.find("[class$='SubTotal']").text(quantity * sqfoot);
            });
        }
    }
</script>

これは、それが機能するために jQuery への参照を追加することを前提としています...

于 2015-03-31T08:17:43.453 に答える