Я использую jQuery dataTables, ajax и веб-службы для отображения моих данных из базы данных SQL.Я успешно справляюсь с этим, однако теперь мне нужен способ, чтобы иметь возможность обновлять только один столбец записи в базе данных из таблицы данных.
Что я хочу: если я нажму на кнопку редактирования,будет модальное всплывающее окно, а затем я введу значение во всплывающем окне, это значение должно быть добавлено к уже существующему значению в базе данных.Это связано с тем, что записи должны накапливаться ежедневно, когда делаются новые записи.моя проблема в том, что мне удалось написать веб-метод в веб-сервисе, и он выглядит нормально, но я не могу обновить нужное поле, пожалуйста, вы можете мне помочь, так как у меня мало знаний о jQuery dataTables и ajax (как получить идентификатор записи, которую я хочу обновить и, наконец, смог обновить на стороне клиента с помощью jQuery ajax)
Вот что я пробовал:
Clientside jQuery и ajax:
$(document).ready(function () {
insertkpi();
submitinit();
displayKPI();
updateprogress(Id);
});
Отображение в DataTable
function displayKPI() {
$.ajax({
url: 'MyService.asmx/getKPI',
method: 'post',
dataType: 'json',
success: function (data) {
$('#datatable').DataTable({
data: data,
columns: [
{ 'data': 'Name' },
{
'data': '', 'render': function () {
return "<a class='btn btn-default btn-sm' data-target='#iniativemodal' data-toggle='modal'><i class='glyphicon glyphicon-pencil'>Initiative</i></a>";
}
},
{ 'data': 'Initiative' },
{
'data': 'perfomance',
'render': function (perfomance) {
return perfomance + "%";
}
},
{
'data': 'progress'
//'render': function (progress) {
// return "<a class='btn btn-default btn-sm' data-target='#progressmodal' data-toggle='modal'><i class='fa fa-pencil'>Progress</i></a>";
// }
},
{ 'data': 'BaseTarget' },
{
'data': 'streachTarget'
},
{ 'data': 'Period' },
{
'data': 'Id' ,
'render': function (Id, type, full, meta) {
return '<a href="#" onclick="updateprogress(' + Id + ')" ><i class="glyphicon glyphicon-pencil"></i></a>';
}
},
]
});
}
}
);
}
Функция обновления значения базы данных с использованием идентификатора из DataTable:
function updateprogress(Id) {
// var url = "MyService.asmx/getProgress?Id=" + Id+"";
// var url = "MyService.asmx/updateprogres";
$("#progrdata").load("MyService.asmx/updateprogres?Id=" + Id + "", function () {
$("#progressmodal").modal("show");
$("#progrebtn").click(function () {
var progress = $('#pgtxt').val();
var cid = Id.val();
$.ajax({
type: "POST",
url: 'MyService.asmx/updateprogres',
contentType: "application/json;charset=utf-8",
datatype: "json",
data: '{Id: ' +Id + ', progress: "' + progress + '" }',
success: function () {
$('#progressmodal').modal('hide');
},
});
});
})
}
HTML-разметка:
<div class="modal" id="progressmodal" data-keyboad="false" data-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Input Progress</h4>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="progrdata">
<div class="form-group">
<label id ="pnamelb">Cumulative Progress</label>
<label id="prglbl" />
</div>
<div class="form-group">
<label id ="pinelb">Enter progress</label>
<label id="finalpglbl"></label>
<input type="text" class="form-control" id="pgtxt" />
</div>
</div>
<div class="modal-footer">
<button class="btn-primary" id="progrebtn">Save</button>
<button class="btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Мой веб-метод:
[WebMethod]
public void updateprogres(int Id,int progress)
{
string constring = System.Configuration.ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString;
using (SqlConnection conn = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("UPDATE KPIs SET progress=@progress WHERE [Id] =@Id",conn))
{
try
{
conn.Open();
cmd.Parameters.AddWithValue("@Id", Id);
cmd.Parameters.AddWithValue("@progress", progress);
cmd.ExecuteNonQuery();
}
catch (Exception)
{
}
finally
{
conn.Close();
}
}
}
}