0

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

2
  • A ver si entiendo mejor. Lo que deseas es que en el Index salga una tabla y al dar click en una Fila, la cual corresponde a un Item se muestre una segunda tabla con los objetos de ese Item? Commented el 2 may. 2018 a las 16:26
  • Exacto. Es lo que quiero @VicenteAlmea
    – David
    Commented el 2 may. 2018 a las 16:41

1 respuesta 1

0

Voy a utilizar dos modelos diferentes en este ejemplo, Area y Trabajador, con relación 1-n, donde un area puede tener varios trabajadores.

en la vista Index de Area:

 @model IEnumerable<WebApplication1.Models.Area>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Nombre)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr id="@item.Id" class="table-row" style="cursor: pointer">
        <td>
            @Html.DisplayFor(modelItem => item.Nombre)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>
<div id="tabla2"></div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(document).ready(function ($) {
            $(".table-row").on("click", function () {
                var id = $(this).attr("id");                  
                $("#tabla2").load("@Url.Action("Trabajadores", "Areas")/"+ id);
            });
        });
    </script>
}

Si te fijas en la tabla de la vista index para Area, cada <tr> tendrá como id el id del item que va a mostrar, y class="table-row" eso lo he difinido así para poder recogerlo más abajo en mi java script, también le apliqué estilo cursor:pointer para que al pasar el cursor se muestre cada <tr> como un link. El objetivo es recoger el Id del item seleccionado y conformar una Url que va a ser renderizada en el <div id="tabla2">. Lo que vas a renderizar en tabla2 es una vista parcial con el resultado de la acci'on que hemos llamado con java script. ejemplo:

public class AreasController : Controller
    {
        private ApplicationDbContext db = new ApplicationDbContext();

        // GET: /Areas/
        public ActionResult Index()
        {
            return View(db.Areas.ToList());
        }

        //Esta es la acción que llamamos al dar click en un tr de la tabla
        public ActionResult Trabajadores(int id)
        {
            var trabajadores = db.Trabajadores.Where(t => t.AreaId == id).ToList();

            return PartialView("_ListadoTrabajadoresPartial", trabajadores);
        }
....
}

y en Views/Areas creo la vista parcial con el contenido que se va a renderizar en tabla2:

_ListadoTrabajadoresPartial.cshtml

    @model IEnumerable<WebApplication1.Models.Trabajador>


<table class="table table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Nombre)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Nombre)
            </td>
        </tr>
    }

</table>

De esta forma al dar click en un area se mustra una tabla con todos sus trabajadores en la misma vista Index. Espero te sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.