I have a DataTable that is loaded using JavaScript. The CRUD buttons are dynamically created. Before when I used ViewModel and Razor it looked like this:
<a asp-action="Edit" asp-route-id="@item.Id" title="Edit" class="btn btn-warning">
<span class="glyphicon glyphicon-pencil"></span>
</a>
Now that I'm building the buttons with JavaScript, I do not know how to store the main Id of each line and then give Post. Does anyone know how to help me?
$(document).ready(function () {
$.ajaxSetup({ cache: false });
// busca os elementos do atributo data-modal e o vincula ao evento click
$('a[data-modal]').on('click', function (e) {
// Abre a janela modal com o formulário solicitado
openmodal(this.href);
return false;
});
$('#modalPessoaSituacao').on('hidden.bs.modal', function () {
$('#contentModal').html('');
});
myDataTable();
});
function openmodal(url) {
// Faz uma requisição Get e carrega o formulário na janela modal
$('#contentModal').load(url, function () {
$('#modalPessoaSituacao').modal({
keyboard: true
}, 'show');
//Enviar o foco para campo Descrição
$('#modalPessoaSituacao').on('shown.bs.modal', function(event) {
$("#txtDescricao").focus();
});
// Vincula o evento submit
bindForm(this);
});
}
function bindForm(dialog) {
// Vincula o formulário na janela modalcom o evento submit
$('form', dialog).submit(function () {
if ($(this).valid()) {
// Realiza uma querisição ajax
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
// Se a requisição for satisfatória, a página atual é recarregada
if (result.success) {
window.location = window.location;
window.location.reload(); //Ajuda na exclusao, atualizando o grid
} else {
$('#contentModal').html(result);
bindForm();
}
}
});
return false;
} else {
return false;
}
});
}
function myDataTable() {
$('.dataTables_filter input').attr('placeholder', 'Search...').hide();
var table = $("#dtPrincipal").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
//"dom": '<"top"i>rt<"bottom"lp><"clear">',
"ajax": {
"url": '/situacoes-gerenciamento/getPessoaSituacao',
"type": "POST",
"datatype": "json"
},
"columnDefs": [
{ className: "align-center", "targets": [3] },
{ className: "align-right", "targets": [0] }
],
"columns": [
{ "data": "id", "name": "Id", "autoWidth": true },
{ "data": "descricao", "name": "Descricao", "autoWidth": true },
{ "data": "pessoaTipoDescricao", "name": "PessoaTipo", "autoWidth": true },
{
"data": null, "name": "Action", "defaultContent": '<a title="Editar" asp-action="Edit" data-modal="" data-id="" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row"><span class="icon-2x wb-edit"></span></a> |' +
'<a title="Detalhes" asp-action="Details" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default footable-row-detail-row"><span class="icon-2x wb-search"></span></a> |' +
'<a title="Excluir" asp-action="Delete" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row"><span class="icon-2x wb-trash"></span></a> |' +
'<a title="Histórico" class="btn btn-sm btn-icon btn-pure btn-default on-default clockpicker" data-toggle="modal" data-target="#pessoaHistory" data-original-title="Histórico"><span class="icon-2x wb-time"></span></a>', "autoWidth": true
}
],
"language": {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"searchPlaceholder": "Digite algo...",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
}
});
$('.search-input').on('keyup change', function () {
var index = $(this).attr('data-column'),
val = $(this).val();
table.columns(index).search(val.trim()).draw();
});
};
link
[HttpGet]
[Authorize(Policy = "CanWritePessoaSituacaoData")]
[Route("situacoes-gerenciamento/editar-situacao/{id:int}")]
public IActionResult Edit(int? id)
{
if (id == null)
{
return NotFound();
}
var pessoaViewModel = _pessoaSituacaoAppService.GetById(id.Value);
if (pessoaViewModel == null)
{
return NotFound();
}
return PartialView(pessoaViewModel);
}