Get table records in response to clicking from another table and display them

Question

Get table records in response to clicking from another table and display them

Navigation

#1 by (0 votes)

0

I have two tables in a view, one of them is hidden and appears when I click on a row in the first table

Hidden table:

 @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>

To make the table appear, I do it by changing the class with a simple jQuery (changing the property display of 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);
    }

The controller returns the LPGVM object with a list of objects. Therefore, the flow is as follows:

Click on the first table, this table sends the id to the controller and the controller returns the list of objects. My question is: What do I have to do to make my table fill up once I click on the first table and the controller returns the list of objects?

How do I get the objects in the view and then show them in the body of my table? Thanks!

I tried adding the success property in my ajax call:

                $.ajax({
                    url: '/Periodo/Periodo/IndexSelect',
                    type: 'POST',
                    data: { id: id },
                    success: function (response) 
                    { alert(response.status); }

but it returns to me:

success is not defined

then I tried the following:

                    $.ajax({
                    url: '/Periodo/Periodo/IndexSelect',
                    type: 'POST',
                    data: { id: id },
                    success: handleResponse 


function handleResponse(data) { alert(data); }

But it does not work either. Can anybody help me? Greetings

jquery c# ajax asp.net asp.net-mvc

asked by David 01.05.2018 в 23:22

source

1 answer

I can not get my email to be accepted when sending emails login of users with symfony 3.4 email or nick

score 0 · Answer 1

I will use two different models in this example, Area and Worker, with relation 1-n, where an area can have several workers.

in the Area Index view:

 @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>
}

If you look at the table of the index view for Area, each <tr> will have id the id of the item that will show, and class="table-row" that I have defined it so for I can collect it below in my java script, I also applied it to% cursor:pointer so that when I passed the cursor, I showed each <tr> as a link. The objective is to collect the Id of the selected item and make an Url that will be rendered in <div id="tabla2"> . What you are going to render in table2 is a partial view with the result of the action that we have called with java script. example:

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);
        }
....
}

and in Views / Areas I create the partial view with the content that will be rendered in table2:

_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>

In this way, by clicking on an area, a table is shown with all its workers in the same Index view. I hope it will be helpful.