如何乘两个GridView的列到一个

Question

我希望能够输入一个值数量文本框，然后：

• 乘以它的“单位平方英尺的”该值和结果存储在“小计“
• 总和每个小计并将结果存入 ”总计“

这是我到目前为止有：

  <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)); 
     } 
    } 

我尝试使用文本框，OnTextChanged内，然后试图找到有关把它们变成整数和它们相乘并显示值到标签的控制，但我要么得到关于空引用unitSquareFootLabel。

但随着上面的代码我得到输入字符串是不是在正确的格式。

我该怎么做？

Answer 1

您有2个选项。

1. 执行计算的客户端使用jQuery或JavaScript
2. 做他们与C＃后端（包括刷新页面）

我建议第一个选项。这里是一个例子： 所以gridview需要修改一下。我补充说，可以用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> 

然后在页面的底部，结束标记之前，添加此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的工作...