Как редактировать базу данных из jQuery DataTables, используя Bootstrap Dialog в веб-формах ASP.net и веб-сервисах

Question

Пожалуйста, кто-нибудь может мне помочь со следующим: я хочу иметь возможность редактировать мой TableRow в базе данных, мои таблицы отображаются с помощью jQuery DataTables в веб-форме ASP.NET.Я хочу, чтобы в DataTable была кнопка редактирования, чтобы при щелчке на ней отображались данные строк в модальном диалоговом окне начальной загрузки, текстовые поля, а затем я мог изменить то, что хочу изменить.

Что работает, так это то, что я 'Я могу редактировать, но проблема в том, что данные строки не отображаются в модальном диалоге, поэтому, если я попытаюсь редактировать, мне придется заполнить все текстовые поля в диалоговом окне, в противном случае в столбцах я буду писать Nullничего не вводил ...

Это мой код:

 $(document).ready(function () {
        insertkpi();
        submitinit();
        displayKPI();

    });

    $(document).on('click', '.editdat', function() {

    });
    var sessionValue = '<%= Session["roleId"] %>';

    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="editKpi(' + 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>';
                                    }
                                }
                            },
                        ]                
                    });
                }
            }
        );
    }

Функция редактирования KpI (функция JS)

 function editKpi(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');
                    },

                });


            });
        })
    }

Ниже моя сетьметод в веб-сервисе:

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