web 从dropdownlist 选择数据 按下追加按钮 并在下方表格中增加一行数据

问题遇到的现象和发生背景 创建社员追加画面，下方有个部下一览表，刚开始是空的，然后有个下拉选择框从里面选择社员，旁边有个

追加按钮，当按下追加按钮是，会在部下一览表中显示一行关于该社员的信息。每按追加一次，都会在表格中增加一行社员信息。

问题相关代码，请勿粘贴截图 ////aspx:

    <asp:Label ID="kanji" runat="server" Text="部下一覧"  />
    <asp:DropDownList  runat="server" DataTextField="UserName" DataValueField="ID" Width="200px" CssClass="dropdownlist" ID="dropUserInfo"  />
    <asp:Button ID="btnBukaAdd" runat="server" CssClass="btn-bukaAdd" Text="部下追加"　   />

//cs:
string usrsql = "";
usrsql = "SELECT";
usrsql += " ID";
usrsql += " , [UserName]";
usrsql += "FROM";
usrsql += " UserList ";
usrsql += "WHERE";
usrsql += " DeleteFlag = 0";
MdbAccessInfo mdb = new MdbAccessInfo();
DataTable dat = mdb.SelectMDBSQLDt(usrsql);
dropUserInfo.DataSource = dat;
dropUserInfo.DataBind();

运行结果及报错内容

下拉表的社员名字从 一个叫userlist的sql数据库获取 这个userlist数据库中有社员的各种信息
不知道如何创建那个表并实现追加按钮的功能

我的解答思路和尝试过的方法

我想要达到的结果

最好使用ajax的方式，
不刷新页面，在部下一览表中增加数据

点击追加 你得向userlist 插入一条数据。然后刷新一下这个list列表

https://docs.microsoft.com/zh-cn/previous-versions/msdn10/dd348396(v=msdn.10)

使用js数据表格，例如Layui数据表格。
数据库增加追加社员表，后台增加该表查询接口。
数据表格访问该查询接口，返回数据并渲染页面。
当点击追加按钮时，向追加社员表新增数据，在新增成功的回调方法中调用数据表格的刷新方法，成功实现此功能

你好，
假设你的表格是gridview。 你可以使用Ajax+ webmethod 去获取这个表格，返回数据，用jQuery 渲染页面，添加新行。请看以下的例子。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnAddRow]").click(function () {
                var id = $("[id*=txtId]").val();                                       //添加新行
                var name = $("[id*=txtName]").val();
                var country = $("[id*=txtCountry]").val();
                if (id != "" && name != "" && country != "") {
                    var row = $("[id*=GridView1] tr:last").clone();
                    $("td:nth-child(1)", row).html(id);
                    $("td:nth-child(2)", row).html(name);
                    $("td:nth-child(3)", row).html(country);
                    $("[id*=GridView1] tbody tr:first").after(row);
                }
                $("[id*=txtId]").val('');
                $("[id*=txtName]").val('');
                $("[id*=txtCountry]").val('');
                return false;
            });
            $("[id*=btnSave]").click(function () {
                $("[id*=GridView1] tr:has(td)").each(function () {
                    var customer = {};
                    customer.customerId = $(this).find("td:nth-child(1)").html();
                    customer.name = $(this).find("td:nth-child(2)").html();
                    customer.country = $(this).find("td:nth-child(3)").html();
                    $.ajax({
                        type: "POST",
                        url: "GridView_AddRow_SaveAll.aspx/SaveGridViewRowData",
                        data: JSON.stringify(customer),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                        }
                    });
                });
                return false;
            });
        });
    </script>

后台：

private void PopulateCustomers()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", conn))
        {
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
                DataSet ds = new DataSet();
                da.Fill(ds);
                GridView1.DataSource = ds;
                GridView1.DataBind();
            }
        }
    }
}
 
     
[System.Web.Services.WebMethod]
public static string SaveGridViewRowData(int customerId, string name, string country)
{
    //Write your code here to save each row in database
    return "";
}