Tengo dos tablas en una vista, una de ellas esta oculta y aparece cuando doy clic en una row de la primera tabla
Tabla oculta:
@model Tuple<IEnumerable<web.Areas.Periodo.Models.PeriodoViewModel>,
IEnumerable<web.Areas.Periodo.Models.PeriodoPagoViewModel>>
<div id="SegundaTabla" style="display:none">
<div class="row">
<div class="col-md-12">
<div class="portlet box">
<div class="portlet-title">
<div class="caption">
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
</div>
</div>
<table class="table table-striped table-hover table-bordered dt-responsive" width="100%" id="tbl-listado">
<thead>
<tr>
<th data-priority="1"> Periodo Pago </th>
<th data-priority="2"> Estatus </th>
</tr>
</thead>
<tbody>
<tr>
<tbody>
<tr>
@if (Model.Item2 != null) { foreach (var item in Model.Item2) {
<tr class="select" id="@item.IdPeriodoPago">
<td>@item.sTipoPeriodo</td>
<td>@item.Estatus</td>
</tr>
} }
</tbody>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Para hacer aparecer la tabla lo hago cambiando la clase con un simple jQuery (cambiando la propiedad display
de css):
$('.select').each(function (index) {
$(this).click(function () {
var row = $(this);
var id = row.attr('id').split('-')[1];
row.css({ 'background-color': 'aqua' });
$('#SegundaTabla').css({ 'display': 'block' });
$.ajax({
url: '/Periodo/Periodo/IndexSelect',
type: 'POST',
data: { id: id }
});
});
});
Controlador:
[HttpPost]
public ActionResult IndexSelect(int? id)
{
List<PeriodoPagoViewModel> LPGVM = new List<PeriodoPagoViewModel>();
var lista2 = PPS.Listar(x=>x.IdPeriodoMensual == id && x.EstatusRegistro, includeProperties: "TipoPeriodo");
foreach (var l in lista2)
{
PeriodoPagoViewModel PVM = new PeriodoPagoViewModel();
PVM.sTipoPeriodo = l.TipoPeriodo.Nombre;
if (l.Estatus == "A")
PVM.Estatus = "Abierto";
else if (l.Estatus == "X")
PVM.Estatus = "Calculado";
else if (l.Estatus == "C")
PVM.Estatus = "Cerrado";
else if (l.Estatus == "P")
PVM.Estatus = "Pendiente";
else
PVM.Estatus = "";
LPGVM.Add(PVM);
}
return View("Index", LPGVM);
}
El controlador regresa el objeto LPGVM
con una lista de objetos. Por lo cual el flujo es el siguiente:
Se da clic en la primera tabla, esta tabla envia el id al controlador y el controlador regresa la lista de objetos. Mi pregunta es: Que es lo que tengo que hacer para que mi tabla se llene una vez de clic en la primera tabla y el controlador regrese la lista de objetos?
Como obtengo los objetos en la vista y después los muestro en el body de mi tabla? Gracias!
Intenté agregar en mi llamada ajax la propiedad success:
$.ajax({
url: '/Periodo/Periodo/IndexSelect',
type: 'POST',
data: { id: id },
success: function (response)
{ alert(response.status); }
pero me regresa:
success is not defined
después intenté lo siguiente:
$.ajax({
url: '/Periodo/Periodo/IndexSelect',
type: 'POST',
data: { id: id },
success: handleResponse
function handleResponse(data) { alert(data); }
Pero tampoco funciona. Alguien que me pueda ayudar? Saludos