Как скопировать данные из текстового поля в другое текстовое поле, динамически добавленное в gridview, без обратной передачи

Question

Я динамически добавил n число текстовых полей в gridview и привязал данные к ним . Я хочу, чтобы код, стоящий за функцией/методом, суммировал textbox1, textbox2 ..... textboxn в textboxtotal, если пользователь меняет значение в любом текстовом поле. Я не могу добавить postback с этими текстовыми полями, потому что после того, как postback textbox будет удален.

код для добавления столбцов в GridView динамически

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

Добавление контроля Textbox на rowbound:

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

Вы можете создать функцию Javascript в код, как это (если вы с использованием 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); 

Теперь добавьте класс CSS к вашим dynamicaly создал TextBoxes (добавить это):

TextBox101.CssClass = "txtBox"; 

Кроме того, TextBox, который отображает сумма должна быть названа так:

TextBox102.ID = "total"; 

Answer 2

Вот небольшой пример начните. Добавьте уникальное имя класса в TextBoxes в GridView. Затем jQuery может связать событие onblur с ними.

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

И здесь функция javascript, которая вызывается, когда TextBox теряет фокус. Сначала идентификатор TextBox, который запускает событие, разбивается на части, чтобы получить идентификаторы двух других текстовых полей в строке ( в моем случае ID выглядит так: ContentPlaceHolder1_GridView1_TextBox1_0). Тогда это просто вопрос добавления значений.

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