Wie ändert man den Wert einer Beschriftung, wenn der Wert eines Textfelds in GridView ASP.NET geändert wird?

Question

Wie kann ich den Wert label als Ergebnis einer Multiplikation von textbox und boundfield in gridview ändern, wenn ich den Wert der Textbox ändere? (Nicht mit TextBox_TextChanged, wie es mir erfordert anderswo zuerst vor dem Brennen klicken)

<asp:GridView ID="productView" runat="server" AutoGenerateColumns="False" OnSelectedIndexChanged="productView_SelectedIndexChanged"> 
    <Columns> 

     <asp:TemplateField HeaderText="Sacks"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtSacks" runat="server" 
       CssClass="form-control" Text ="0" Width="100px" 
       OnTextChanged="txtSacks_TextChanged" AutoPostBack="true"> 
       </asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:BoundField DataField="pricingID.price" HeaderText="Price"/> 

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

    </Columns> 
</asp:GridView> 

lblTotal = txtSacks * Preis

Vielen Dank im Voraus für jede Art von Hilfe

Answer 1

Ihre aktuellen Event-Handler wird ein Postback ausführen, wenn das Textfeld den Fokus verliert. Möglicherweise benötigen Sie einige Client-Seite Javascript, um es zu erreichen, ohne bei jedem Tastendruck zurückgeben. Drop in jQuery in die Seite und versuchen Sie diesen Code:

<Columns> 
    <asp:TemplateField HeaderText="Sacks"> 
     <ItemTemplate> 
      <asp:TextBox ID="txtSacks" runat="server" 
       CssClass="form-control" Text="0" Width="100px" ToolTip="<%# Container.DataItemIndex + 1 %>"> 
      </asp:TextBox> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:TemplateField HeaderText="Price"> 
     <ItemTemplate> 
      <asp:Label runat="server" ID="lblPrice" CssClass="lbl-price" ToolTip="<%# Container.DataItemIndex + 1 %>" Text='<%# Bind("Price") %>'></asp:Label> 
     </ItemTemplate> 
    </asp:TemplateField> 
    <asp:BoundField DataField="price" HeaderText="Price" /> 
    <asp:TemplateField HeaderText="Subtotal"> 
     <ItemTemplate> 
      <asp:Label ID="lblTotal" runat="server" CssClass="lbl-total" ToolTip='<%# Container.DataItemIndex + 1 %>'></asp:Label> 
     </ItemTemplate> 
    </asp:TemplateField> 
</Columns>   

Beachten Sie, dass wir uns auf die Kontrollen mit diesem Code ein data Attribut setzen: data-sxid="sax-<%# Container.DataItemIndex + 1 %>" und data-lblid="sax-<%# Container.DataItemIndex + 1 %>"

Jetzt haben wir einige Javascript Magie brauchen. Fügen Sie dies der Seite hinzu:

<script> 
    $("input[title]").on("keyup", function() { 
     /*We had emitted ToolTip attribute on our controls in Grid. 
     Those are translated to `title` in the browser. Here we are 
     picking controls based on the values that would be set by 
     asp.net while rendering grid.*/ 
     var $t = $(this), 
     //pick value of title or tooptip attribute of $t control 
     i = $t.attr("title") || $t.attr("tooltip"); 

     //we get value of $t and initialize a number from it as it is a string 
     var s = Number($t.val()); 

     //if we are not able get a number from textbox value, return 
     if (isNaN(s)) return; 

     //we are looking for a span which has title attribute set to value 
     //we picked from textbox above also having class lbl-price 
     //and getting its text 
     var p = $("span[title='" + i + "'].lbl-price").text(); 

     //then we get next span with same title value but class lbl-total 
     // and set its text to calculated value. 
     $("span[title='" + i + "'].lbl-total").text(s * +p); 
    }); 
</script> 

Dies ist nicht der eleganteste Weg, dies zu erreichen, aber es funktioniert. Lange Zeit seit dem mit Web-Forms und Gridviews gemacht!

Hinweis: anstelle von <%# Container.DataItemIndex + 1 %>, können Sie die Steuerelemente wie priceId eine Eigenschaft von der Datenreihe zu Zeichenfolge verwenden können.