如何将gridview上的两列相乘并在第三列中显示？答案

【问题标题】：How to Multiply two columns on a gridview and display it in the third?如何将gridview上的两列相乘并在第三列中显示？
【发布时间】：2016-05-25 15:37:22
【问题描述】：

如何将 2 列相乘并在第三列中显示？我想将 Price 和数量的输入值相乘并显示在 lblItemTotal 中。我正在考虑添加一个更新按钮，以便在单击时可以更新所有项目总数。这是我的网格视图代码：

<asp:TemplateField HeaderText="Price">
    <ItemTemplate>
        <asp:Label ID="lblPrice" runat="server" Text='<%# Bind("Price")%>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
    <ItemTemplate>
        <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Item Total">
    <ItemTemplate>
        <asp:Label ID="lblItemTotal" runat="server" ></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

【问题讨论】：

使用JavaScript，绑定数量列字段的key up事件，如果你想实时看到第三列，更新第三列。

标签： c# asp.net gridview

【解决方案1】：

您必须先找到控件才能提取它们的值。也许这个链接可以帮助你：
How to find control in TemplateField of GridView?。

如果你点击更新按钮，你可以循环遍历gridview中的每一行，使用链接中描述的方法找到“txtQuantity”和“lblPrice”控件，将它们相乘，然后使用文本设置结果“lblItemTotal”的属性（您也可以使用链接中描述的方法找到它）。

【讨论】：

【解决方案2】：

这种类型的功能最好在客户端完成（在 javascript 中）。这是一个完整的工作示例，只需按原样复制并粘贴到您的解决方案中即可：

背后的代码：

public partial class GridTwo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<OrderLineItem> lineItems = new List<OrderLineItem>();
        lineItems.Add(new OrderLineItem { Price = 10.00M, Quantity = 0, ItemTotal = 0.00M });
        lineItems.Add(new OrderLineItem { Price = 100.00M, Quantity = 0, ItemTotal = 0.00M });
        lineItems.Add(new OrderLineItem { Price = 5.00M, Quantity = 0, ItemTotal = 0.00M });

        GridView1.DataSource = lineItems;
        GridView1.DataBind();
    }
}

public class OrderLineItem
{
    public decimal Price { get; set; }
    public int Quantity { get; set; }
    public decimal ItemTotal { get; set; }
}

.ASPX：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $(".QuantityClass").on('change keyup paste', function () {

                //Ctrl+Shift+J in Google Chrome to bring up the console which allows you to debug javascript
                debugger;

                var textBox = this;
                var quantity = $(textBox).val();
                var tableRows = $(textBox).parent().parent().children();

                if (quantity != "") {
                    var price = tableRows[0].children[0].innerHTML;

                    var itemTotal = price * quantity;

                    tableRows[2].children[0].innerHTML = itemTotal;
                }
                else
                    tableRows[2].children[0].innerHTML = "";
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Price">
                    <ItemTemplate>
                        <asp:Label ID="lblPrice" runat="server" Text='<%# Bind("Price")%>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <asp:TextBox ID="txtQuantity" CssClass="QuantityClass" runat="server" Text='<%# Bind("Quantity")%>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Item Total">
                    <ItemTemplate>
                        <asp:Label ID="lblItemTotal" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
</body>

输出：

【讨论】：