Редактирование JQuery DataTable Row в asp.net

Question

Я хочу отредактировать строку данных jQuery в веб-формах asp.net.Я хочу, чтобы в строке была кнопка, которая при нажатии на модальное диалоговое окно начальной загрузки всплывает, и содержимое столбцов этой строки отображается во входном текстовом поле, чтобы я мог выполнить редактирование.

В настоящее время у меня есть следующий код, функция, которая отображает Datatable

function displayKPI() {
        $.ajax({
                url: 'MyService.asmx/getKPI',
                method: 'post',
                dataType: 'json',
                success: function (data) {
            var tableins =   $('#datatable').DataTable({
                        data: data,
                        columns: [
                            { 'data': 'Name' },
                            {
                                'data': '',
                                'render': function () {
                                    if (sessionValue == 1 || sessionValue==3 || sessionValue==2 || sessionValue==4 ) {
                                        return "<a id='initybtn' data-target='#iniativemodal' data-toggle='modal'><i class='glyphicon glyphicon-pencil'></i></a>";
                                       // return '<a href="#"  onclick="testininit(' + Name + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';

                                    } else {
                                        return "<i class='glyphicon glyphicon-tasks'></i>";

                                    }
                                       }

                            },
                            { 'data': 'Initiative' },
                            {
                                'data': 'progress'
                            },
                            { 'data': 'BaseTarget' },
                            {
                                'data': 'streachTarget'
                            },
                            {
                                'data': 'Period',
                                'render': function (Period) {
                                    return Period + ".Month(s)";
                                }
                            },
                            {
                                'data': 'Id' ,
                                'render': function (Id, type, full, meta) {
                                    if (sessionValue == 1 || sessionValue == 3 || sessionValue == 2 || sessionValue == 4||sessionValue==5) {
                                        return '<a href="#"  onclick="updateprogress(' +Id +')" ><i class="glyphicon glyphicon-pencil"></i></a>';

                                    } else {
                                        return '<i class="glyphicon glyphicon-pencil"></i>';
                                    }
                                   }
                            },
                            {
                                'data': 'Id',
                                'render': function (Id, type, full, meta) {
                                    if (sessionValue == 1 || sessionValue == 3 || sessionValue == 2 || sessionValue == 4) {
                                        return '<a href="#"  onclick="subtractprogress(' + Id + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';

                                    } else {
                                        return '<i class="glyphicon glyphicon-pencil"></i>';
                                    }
                                }
                            },
                            {
                                'data': 'Id',
                                'render': function (Id, type, full, meta) {
                                    //if (sessionValue == 1||sessionValue==2) {
                                    return '<a   href="#"  onclick="return  getbyID(' + Id + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';

                                        //return '<a href="#"  onclick="testedit(' + Id + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';

                                    //} else {
                                    //    return '<i class="glyphicon glyphicon-pencil"></i>';
                                    //}
                                }
                            },
                            {
                                'data':'Id',
                                mRender: function (data, type, row) {
                                    return '<a     href="#" data-target="#ekpimodal" data-toggle="modal" class="btn-success table-edit" data-id="' + row[0] + '"></a>'
                                }
                            },

                        ]                
                    });
                }

            }
        );
    }

Функция редактирования Jax

 function getbyID(Id) {

        var urll = "MyService.asmx/editGoal?Id=" + Id + "&Name=" + $('#enametxt').val() + "&Initiative=" + $('#einittxt').val() + "&BaseTarget=" + $('#ebasetxt').val() + "&streachTarget=" + $('#estrtxt').val() + "&Period=" + $('#eperiodtxt').val() + "";

        $("#esubdata").load(urll, function () {
              $("#ekpimodal").modal("show");

            $("#esavebtn").click(function () {

                var name = $('#enametxt').val();
                var measure = $('#einittxt').val();
                var BaseTarget = $('#ebasetxt').val();
                var streachTarget = $('#estrtxt').val();
                var Period = $('#eperiodtxt').val();

                $.ajax({
                    type: "POST",
                    url: urll,
                    contentType: "application/json;charset=utf-8",
                    datatype: "json",

                  data: '{Id: ' + Id + ', Name: "' + name + '",Initiative: "' + measure + '",BaseTarget: "' + BaseTarget + '",streachTarget: "' + streachTarget + '",Period: "' + Period + '" }',
                    success: function () {

                        $("#progrebtn").closest("tr").find("td:eq(4)").text(400);
                        $('#ekpimodal').modal('hide');
                    },

                });


            });
        })
    }

Веб-метод редактирования в webservice.asmx выглядиткак это:

[WebMethod]
public void editGoal(int Id, string Name, string Initiative, string BaseTarget, string streachTarget, string Period)
{
        string constring = System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;

        using (SqlConnection conn = new SqlConnection(constring))
        {
            using (SqlCommand cmd = new SqlCommand("UPDATE KPIs SET  Name=@Name,Initiative=@Initiative,BaseTarget=@BaseTarget,streachTarget=@streachTarget,Period=@Period  WHERE [Id] =@Id", conn))
            {
                try
                {
                    conn.Open();

                    cmd.Parameters.AddWithValue("@Id", Id);
                    cmd.Parameters.AddWithValue("@Name", Name);
                    cmd.Parameters.AddWithValue("@Initiative", Initiative);
                    cmd.Parameters.AddWithValue("@BaseTarget", BaseTarget);
                    cmd.Parameters.AddWithValue("@streachTarget", streachTarget);
                    cmd.Parameters.AddWithValue("@Period", Period);
                    // cmd.Parameters.AddWithValue("@progress", progress);

                    cmd.ExecuteNonQuery();
                }
                catch (Exception)
                {
                }
                finally
                {
                    conn.Close();
                }
            }
        }
}