使用动态表仅填充数据并将值传递给ASP.NET后面的代码

时间:2017-10-08 22:56:30

标签: javascript c# html asp.net webforms

自编码以来已经很长时间了,所以我遇到了麻烦。

我正在使用VS2015 .NET c#webForms Application。我有一个简单的表单,用户需要填充动态表格,在点击提交后,将值传递给后面的代码进行一些计算,然后存储在DB中。

我在链接http://talkerscode.com/webtricks/add-edit-and-delete-rows-from-table-dynamically-using-javascript.php

中使用了HTML表格

输出: enter image description here

我不能使用Gridview,因为它回发并直接连接到DB。我不想立即存储表的输入。

我无法从HTML表格中检索数据。 我可以得到一些提示或建议任何其他更好的方法,如果有的话。

如果你想我可以提供代码。 感谢

更新: 我的代码

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 ;

在运行期间生成行,我试图检索第一行中一个单元格的值以进行测试,但它不起作用。

2 个答案:

答案 0 :(得分:1)

@legends

提供的链接

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

效果很好,解决了我的大部分问题。

由于

答案 1 :(得分:0)

您可以使用此功能以动态方式填充数据网格

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


        }

    }

或者您可以使用占位符控件来创建动态html表