使用動態表格填寫數據並將值傳遞給ASP.NET後面的代碼

Question

我編寫代碼已經很長時間了，所以我面臨着麻煩。

我正在使用VS2015 .NET c＃webForms Application。我有一個簡單的表單，用戶需要填寫一個動態表格，並在提交後將值傳遞給後面的代碼以進行一些計算，然後存儲在數據庫中。

我使用的HTML表中的鏈接http://talkerscode.com/webtricks/add-edit-and-delete-rows-from-table-dynamically-using-javascript.php

輸出：

我不能使用的GridView，原因是其postsback並直接連接到數據庫。我不想立即存儲表格的輸入。

我被困在檢索HTML表格中的數據。 我可以得到一些提示，或者向我建議任何其他更好的方法。

如果你想我可以提供的代碼。 感謝

UPDATE： 我的代碼

form.aspx

<form runat="server"> 
    //elements here 

    <div class="table-responsive" id="div_invlv"> 

       <!------TABLE ----> 
      <table id="data_table" class="table" > 
      <tr> 
      <th></th> 
      <th> </th> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Company</th> 
      <th></th> 
      </tr> 

      <tr> 
       <td> 
        <select class="form-control" id="type_of_person"> 
        <option>Internal</option> 
        <option>External</option> 
        </select> </td> 
       <td><input type="text" class="form-control" id="new_name" /></td> 
       <td><input type="text" class="form-control" id="new_position" /></td> 
       <td><input type="text" class="form-control" id="new_company" /></td> 
       <td><input type="button" class="btn btn-small btn-template-main add" onclick="add_row();" value="Add Row" /></td> 
      </tr> 

      </table> 
    </form> 

Table.js

function delete_row(no) 
    { 
    document.getElementById("row"+no+"").outerHTML=""; 
    } 

    function add_row() 
    { 
    var drop = document.getElementById("type_of_person"); 
    var new_type = drop.options[drop.selectedIndex].innerHTML; 
    var new_name=document.getElementById("new_name").value; 
    var new_country=document.getElementById("new_position").value; 
    var new_company=document.getElementById("new_company").value; 

    var table = document.getElementById("data_table"); 
    var table_len = (table.rows.length) - 1; 
    var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='id_row" + table_len + "'><asp:Label Name='id" + table_len + "' runat='server' > " + table_len + "</asp:Label></td> <td id='Type_row" + table_len + "'><asp:Label ID='type" + table_len + "' runat='server' > " + new_type + "</asp:Label></td><td id='name_row" + table_len + "'> <asp:Label ID='name'"+table_len+" runat='server' >" + new_name + "</asp:Label></td><td id='position_row" + table_len + "'>" + new_country + "</asp:Label></td><td id='company_row" + table_len + "'><asp:Label ID='company'"+table_len+" runat='server' >" + new_company + "</asp:Label></td><td > <input type='button' value='Delete' class='btn btn-small btn-template-main delete' onclick='delete_row(" + table_len + ")'></td></tr>"; 


    document.getElementById("new_name").value=""; 
    document.getElementById("new_position").value = ""; 
    document.getElementById("new_company").value = ""; 
    } 

C＃

string typeTable = Request.Form["type" + 1]; 
    Label10.Text = typeTable ; 

行s是在運行過程中生成的，我試圖檢索第一行中的一個單元格的值進行測試，但它不工作。

Answer 1

由@legends提供的鏈接

https://www.aspsnippets.com/Articles/Dynamically-Add-Rows-to-GridView-using-JavaScript-on-Button-Click-in-ASPNet.aspx

工程很好，解決了我的大部分問題。

感謝

Answer 2

，你可以用這個功能來填補你的DataGrid dyamically

public void fillgrid(string qry, GridView dg){ 

     try 
     { 

      sql.cmd = new SqlCommand("qry", sql.cn); 
      sql.cn.Open(); 
      DataSet ds = new DataSet(); 
      SqlDataAdapter sda = new SqlDataAdapter(sql.cmd); 
      sda.Fill(ds); 
      dg.DataSource = ds; 
      dg.DataBind(); 
      sql.cn.Close(); 
     } 
     catch (Exception ex) 
     { 

      MessageBox.Show(ex.ToString()); 


     } 

    } 

，或者你可以使用一個佔位符控件創建dyamic HTML表格