Comment faire pour multiplier deux colonnes GridView dans un

Question

Je veux être en mesure d'entrer une valeur dans une zone de texte de quantité, puis:

• Multipliez cette valeur avec son « unité pied carré » et stocker le résultat dans « Sous-total "
• Somme chaque sous-total et stocker le résultat dans "total"

C'est ce que j'ai jusqu'à présent:

  <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> 

code Derrière:

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

J'essayé d'utiliser au sein de la zone de texte, OnTextChanged puis a essayé de trouver les contrôles pertinents pour les transformer en ints et les multiplier et afficher la valeur dans l'étiquette mais je soit obtenir des références nulles en ce qui concerne la unitSquareFootLabel. Mais avec le code ci-dessus je reçois la chaîne d'entrée n'est pas dans le format correct.

Comment est-ce que je ferais ceci?

Answer 1

Vous avez 2 options.

1. faire les calculs côté client avec jQuery ou javascript
2. les faire sur le back-end avec C# (ce qui implique de rafraîchir la page)

je recommande la première option. Voici un exemple: Le gridview doit donc être légèrement modifié. J'ai ajouté quelques noms de classes CSS qui peuvent être facilement indexable avec JS et jQuery:

<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> 

Puis, au bas de la page, avant la balise de corps de fermeture, ajoutez 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> 

Cela suppose vous ajoutez une référence à jQuery pour que cela fonctionne ...