如何将gridview列相乘并将其显示在另一列中答案

【问题标题】：How to multiply gridview columns and display that in another column如何将gridview列相乘并将其显示在另一列中
【发布时间】：2015-02-11 05:15:20
【问题描述】：

我想在gridview中乘以一个由一个Label和Textbox控件组成的gridview列，并在另一列中显示相乘后的值，如图所示。我想要做的是，一旦我单击按钮，所有项目都会显示在 gridview 上，如下所示，然后它会自动在相应列中乘以 rate * 1（默认情况下 Quantity 为 1）。

我的 asp.net 代码

 <%--ServiceID --%>
<asp:TemplateField HeaderText="ServiceID" ItemStyle-Width="100px">
<ItemTemplate>
      <asp:Label ID="lblServiceID" runat="server" Text='<%# Eval("ServiceId")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="100px" />
</asp:TemplateField>

<%-- Rate --%>
<asp:TemplateField HeaderText="Rate" ItemStyle-Width="70px">
<ItemTemplate>
    <asp:Label ID="lblRate" runat="server" Text='<%# Eval("Rate")%>' CssClass="rate"></asp:Label>
</ItemTemplate>       
<ItemStyle Width="70px" />
</asp:TemplateField>

<%-- Quantity --%>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
   <asp:TextBox ID="txtQuantity" runat="server" CssClass="txtQty"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="Total">
<ItemTemplate>
    <asp:Label ID="lblTotal" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>

网格视图

C#代码

for (int i = 0; i < GridView1.Rows.Count; i++)
{
    GridView1.Rows[i].Cells[3].Text = Convert.ToString(Convert.ToDecimal(GridView1.Rows[i].Cells[1].Text) * Convert.ToDecimal(GridView1.Rows[i].Cells[2].Text));
}

【问题讨论】：

虽然你可以做这个服务器端例如通过 Ajax 和 UpdatePanel，因为 Total 是派生的，所以我只需在客户端的 JavaScript 中执行此操作？
最好和更快的将在 javascript 中完成
我同意在客户端使用 javascript 来做这件事，但我会用 jQuery 来做，它会在几个语句中做到这一点。
你也在用jQuery吗？

标签： c# asp.net gridview

【解决方案1】：

这是一种混合客户端和服务器端的方法，可以最大限度地减少回发（即没有 Ajax）

我假设您正在绑定一个类似于以下内容的实体：（请注意，Total 的初始值是派生的，服务器端）

public class Entity
{
    public int ServiceId { get; set; }
    public decimal Rate { get; set; }
    public int Quantity { get; set; }
    public decimal Total
    {
        get { return Rate * Quantity; }
    }
}

在.aspx 上，您需要呈现Quantity 和Total 的初始状态（例如，编辑现有行可能需要相同的页面）。请注意，Total 标签是服务器绑定的，但不需要input 控制，因为它的值是派生的。总计不会回传到服务器。

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField HeaderText="ServiceID" ItemStyle-Width="100px">
                <ItemTemplate>
                    <asp:Label ID="lblServiceID" runat="server" Text='<%# Eval("ServiceId")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Rate" ItemStyle-Width="70px">
                <ItemTemplate>
                    <asp:Label ID="lblRate" runat="server" Text='<%# Eval("Rate")%>' CssClass="rate"></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Quantity">
                <ItemTemplate>
                    <asp:TextBox ID="txtQuantity" runat="server" CssClass="txtQty" Text='<%# Eval("Quantity")%>'></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Total">
                <ItemTemplate>
                    <asp:Label ID="lblTotal" runat="server" CssClass='Total'><%# Eval("Total")%></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

在同一个 .aspx 页面中，添加以下 javascript 来对 Total 进行客户端计算，在任何数量更改时触发。（并确保您已经引用了jQuery）

<script>
    $(document).ready(function () {
        $('.txtQty').on('change', function (evt) {
            var $row = $(this).parents('tr');
            var rate = Number($row.find('.rate').text());
            var qty = Number($(this).val());
            var total = rate * qty;
            $row.find('.Total').text(total);
        });
    });
</script>

在这种情况下，因为计算是一个简单的乘法，所以服务器端和客户端的总计算重复是合理的，因为这样可以节省浪费的 IO。但是，如果计算要复杂得多（例如税收、折扣、利息罚款等），那么我建议将计算完全保留在服务器端，然后通过 UpdatePanel（或者最好是Json / REST API) 服务。

【讨论】：

【解决方案2】：

如果您因为其他计算或安全原因而严格希望在服务器端执行此操作，那么您必须遍历所有行，然后从 gridview 中找到 label 和 textbox 控件，然后您可以更新该值。

    foreach(GridviewRow row in GridView1.Rows)
    {
        if(row.RowType == DataControlRowType.DataRow)
        {
            Label total = ((Label)Row.FindControl("lblTotal"));
            Label rate = ((Label)Row.FindControl("lblRate"));
            TextBox quantity = ((TextBox)Row.FindControl("txtQuantity"));
            if(rate != null && quantity != null)
            {
                 total.Text = (int.Parse(rate.Text) * int.Parse(quantity.Text)).ToString();
            }
        }
    }

【讨论】：

【解决方案3】：

这真的很简单：不要这样做。

提前计算所有数据，然后将 GridView 绑定到数据。这可能意味着您必须在底层数据源中添加一列，无论是在背后的代码中，还是在数据库中。然后计算添加列的值，最后将你的 GridView 绑定到完整的数据源。

GridView 控件用于显示和编辑数据，而不是用于计算数据。

【讨论】：

【解决方案4】：

foreach(GridviewRow row in GridView1.Rows)
    {
        if(row.RowType == DataControlRowType.DataRow)
        {
            int quantity= 1;
            TextBox txtQuantity = ((TextBox)Row.FindControl("txtQuantity"));
            int.TryParse(txtQuantity.Text,out quantity);
            Label lblRate = ((Label)Row.FindControl("lblRate"));

            decimal total = decimal.Parse(lblRate.Text) * quantity;
            Label lblTotal = ((Label)Row.FindControl("lblTotal"));

            lblTotal.Text = total.ToString();

        }
    }

【讨论】：

【解决方案5】：

这是一个将网格视图列相乘的示例，将其显示在另一列中，然后对该特定列求和以获得总值

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function isNumberKey(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        function validateTextBox() {
            ValidateCheckBox()
            //get target base & child control.
            var TargetBaseControl = document.getElementById('<%=this.gv1.ClientID%>');
            var TargetChildControl1 = "text1";

            //get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");

            for (var n = 0; n < Inputs.length; ++n)
                if (Inputs[n].type == 'text' && Inputs[n].id.indexOf(TargetChildControl1, 0) >= 0)
                    if (Inputs[n].value != "") return true;
            alert('Enter some value in textbox!');
            return false;
        }
        function ValidateCheckBox() {            
            //get target base & child control.
            var TargetBaseControl = document.getElementById('<%=this.gv1.ClientID%>');
           var TargetChildControl = "check1";    //get all the control of the type INPUT in the base control.
           var Inputs = TargetBaseControl.getElementsByTagName("input");
           for (var n = 0; n < Inputs.length; ++n)
               if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0)
                   if (Inputs[n].checked) return true;
           alert('Select at least one checkbox!');
           return false;
       }

    </script>
    <style type="text/css">
        .auto-style1 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div>
       <center>
        <asp:GridView ID="gv1" AutoGenerateColumns="False" 
            runat="server" Height="115px" Width="373px" OnSelectedIndexChanged="gv1_SelectedIndexChanged" DataSourceID="SqlDataSource1" >
         <Columns>             
             <asp:TemplateField>
                 <ItemTemplate>
                     <asp:CheckBox ID="check1" runat="server" AutoPostBack="true"  />
                 </ItemTemplate>
             </asp:TemplateField>             
             <asp:BoundField HeaderText="ProductId" DataField="ProductId" InsertVisible="False" ReadOnly="True" SortExpression="ProductId" />
             <asp:BoundField HeaderText="ProductName" DataField="ProductName" SortExpression="ProductName" />
             <asp:BoundField HeaderText="Price" DataField="Price" SortExpression="Price" />
             <asp:TemplateField HeaderText="Enter Quantity">
                 <ItemTemplate>
                     <asp:TextBox ID="text1" runat="server" MaxLength="10" Onkeypress="return isNumberKey(event)"/>    
                 </ItemTemplate>
             </asp:TemplateField>
             <asp:TemplateField HeaderText="Total">
                 <ItemTemplate>
                    <asp:Label ID="lbltotal1" runat="server" Text="Label"></asp:Label>  
                 </ItemTemplate>
             </asp:TemplateField>              
         </Columns>
        </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:BaviConnectionString %>" SelectCommand="SELECT [ProductId], [ProductName], [Price] FROM [Product]"></asp:SqlDataSource>
            <asp:Button ID="Button1" runat="server" Text="View" OnClientClick="javascript:return validateTextBox();" OnClick="Button1_Click" />
            </center>
                <br />
                <br />

    <center>
    <h><strong><span class="auto-style1">Selected Product</span><br />
    </strong></h>
        &nbsp;<asp:GridView ID="gv2" AutoGenerateColumns="False" runat="server" >
        <Columns>  
         <asp:BoundField HeaderText="ProductName" DataField="ProductName" SortExpression="ProductName" />      
         <asp:BoundField HeaderText="Price" DataField="Price" SortExpression="Price" />
         <asp:BoundField HeaderText="Quantity" DataField="Quantity" SortExpression="Quantity" />
         <asp:BoundField HeaderText="Total" DataField="Total" SortExpression="Total" />       
        </Columns>
        </asp:GridView>
    <br />
    <asp:Label ID="Label1" runat="server" Text="Total Price" ></asp:Label>         
    <asp:TextBox ID="txttotal" runat="server" Width="75px"></asp:TextBox>
    </center>

            </div>

        </div>
    </form>
</body>
</html>

 protected void Button1_Click(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[4] {
        new DataColumn("ProductName"),
        new DataColumn("Price"),
        new DataColumn("Quantity"),
        new DataColumn("total")
    });

    foreach (GridViewRow row in gv1.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {

            CheckBox chk = (row.Cells[0].FindControl("check1") as CheckBox);
            string qty = ((TextBox)gv1.Rows[row.RowIndex].FindControl("text1")).Text;[enter image description here][1]

            if (chk.Checked)
            {
                string name = row.Cells[2].Text;
                string Price = row.Cells[3].Text;
                string Quantity = qty;                  
                ((Label)gv1.Rows[row.RowIndex].FindControl("lbltotal1")).Text = Convert.ToString(Convert.ToInt32(qty) * Convert.ToInt32(Price));
                string Ttl = ((Label)gv1.Rows[row.RowIndex].FindControl("lbltotal1")).Text;
                tprice += int.Parse(Ttl);
                dt.Rows.Add(name, Price, Quantity, Ttl);
            }

        }

    }
    txttotal.Text = tprice.ToString();
    gv2.DataSource = dt;
    gv2.DataBind();

}

[这将是最终输出][1]

【讨论】：