So kopieren Sie Daten aus einem Textfeld in ein anderes Textfeld, dynamisch in gridview hinzugefügt, ohne Postback

Question

Ich habe dynamisch eine Anzahl von Textfeld in gridview hinzugefügt und binden Sie die Daten auf ihnen . Ich möchte einen Code hinter Funktion/Methode zu summieren textbox1, textbox2 ..... textboxn in textbxtotal, wenn Benutzer den Wert in einem Textfeld ändern. Ich kann Postback mit diesen Textfeldern nicht hinzufügen, da nach Postback Textbox entsorgt werden.

-Code für das Hinzufügen von Spalten dynamisch Steuer

foreach (string a in crcl) 
      { 

       SqlCommand cmd1 = new SqlCommand("select qty from purchaseinstruction where project ='" + DropDownList1.SelectedItem.ToString() + "' AND circle = '" + a + "' AND item = 'BIFURCATION' AND material = '" + mat + "'", agr); 
       SqlDataReader dr1 = cmd1.ExecuteReader(); 
       if (dr1.Read()) 
       { 
        string val = dr1[0].ToString(); 
        if (val.Length > 0) 
        { 
         row[a] = val; 
         value = value + decimal.Parse(val); 
        } 
        else 
        { 
         row[a] = 0; 
        } 
       } 
       else 
       { 
        row[a] = 0; 
       } 
       dr1.Dispose(); 
       row["TOTAL"] = value; 
      }     
      dt.Rows.Add(row); 
GridView1.DataSource = dt; 
     GridView1.DataBind(); 

Hinzufügen Textbox auf rowbound zu gridview:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    int i = 3; 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     crcl = (List<string>)ViewState["bdi2"]; 
     foreach(string a in crcl) 
     { 
      TextBox TextBox101 = new TextBox(); 
      TextBox101.ID=a; 
      TextBox101.Width = 60; 
      TextBox101.Text = (e.Row.DataItem as DataRowView).Row[a].ToString(); 
      e.Row.Cells[i].Controls.Add(TextBox101); 
      i++; 
     } 
     TextBox TextBox102 = new TextBox(); 
     TextBox102.ID = "TOTAL"; 
     TextBox102.Width = 60; 
     TextBox102.Text = (e.Row.DataItem as DataRowView).Row["TOTAL"].ToString(); 
     e.Row.Cells[i].Controls.Add(TextBox102); 
    } 
} 

Answer 1

Sie hinter Javascript Funktion in Code erstellen können, wie diese (wenn Sie mit WebForms):

string myScript = "function sumTextBoxes() { var arr = document.getElementsByClassName('txtBox');\n"; 
     myScript += "var total=0;\n"; 
     myScript += "for(var i=0;i<arr.length;i++){\n"; 
     myScript += "if(parseInt(arr[i].value))\n"; 
     myScript += "total += parseInt(arr[i].value);}\n"; 
     myScript += "document.getElementById('total').value = total;}\n"; 
Page.ClientScript.RegisterStartupScript(this.GetType(), "myKey", myScript, true); 

nun CSS-Klasse zu Ihrem dynamicaly erstellt Textfelder hinzufügen (add this):

TextBox101.CssClass = "txtBox"; 

Auch TextBox, die die Summe anzeigt sollte wie folgt benannt werden:

TextBox102.ID = "total"; 

Answer 2

Hier ist ein kleines Beispiel zu fang an. Fügen Sie den TextBoxen in der GridView einen eindeutigen Klassennamen hinzu. Dann kann die jQuery das Ereignis onblur an sie binden.

<asp:GridView ID="GridView1" runat="server"> 
    <Columns> 
     <asp:TemplateField> 
      <ItemTemplate> 
       <asp:TextBox ID="TextBox1" runat="server" CssClass="GridTextBox"></asp:TextBox> 
       <asp:TextBox ID="TextBox2" runat="server" CssClass="GridTextBox"></asp:TextBox> 
       <asp:TextBox ID="TextBox3" runat="server" CssClass="GridTextBox"></asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

Und hier ist die Javascript-Funktion, die aufgerufen wird, wenn die TextBox den Fokus verliert. Zuerst wird die ID der TextBox, die das Ereignis auslöst, in Teile aufgeteilt, um die IDs der anderen beiden TextBoxen in der Zeile zu erhalten ( in meinem Fall sieht die ID so aus ContentPlaceHolder1_GridView1_TextBox1_0). Dann ist es nur eine Frage des Hinzufügens der Werte.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.GridTextBox').blur(function() { 
      var idString = this.id.split("_"); 
      var tb1 = idString[0] + "_" + idString[1] + "_TextBox1_" + idString[3]; 
      var tb2 = idString[0] + "_" + idString[1] + "_TextBox2_" + idString[3]; 
      var tb3 = idString[0] + "_" + idString[1] + "_TextBox3_" + idString[3]; 
      var total = parseInt($("#" + tb1).val()) + parseInt($("#" + tb2).val()); 
      if (!isNaN(total)) { 
       $("#" + tb3).val(total); 
      } 
     }); 
    }); 
</script>