none
Duda con Ajax para pintar Rows dependiendo de un ID RRS feed

  • Pregunta

  • Muy buen día a todos. He decidido incursionar en este foro debido a que en diversas ocasiones me han sacado de apuros, sin embargo hoy me encuentro en un problema, ojal a alguien me pueda orientar, se los agradeceria de ante mano muchisimo.

    Estoy desarrollando una aplicación web con ASP en MVC con HTML y JS.

    Tengo una vista (Index) donde estoy pintando una tabla con encabezados que muestran información padre, donde cada encabezado puede tener 1 o mas comentarios hijos a nivel detalle el cual lo muestro en una vista parcial (_Detalles). Estos son ligados a traves de un id (clav_res) dentro de la base de datos.

    Ya puedo hacer que se muestren datos pasando la clav_res mediante @ajax.actionlink

    <td>@Ajax.ActionLink("Detalles", "_Detalles", new { clav_res = item.clav_res }, new AjaxOptions { UpdateTargetId = "DetallesAjax" })</td>

    El dato llamado clav_res es el que paso a la vista al AtionResult para que se ejecute un procedimiento almacenado y lo cacha como parametro...Hasta aqui todo bien, el problema es que cuando doy click en el enlace con ajax, me pinta solo un <tr> , siempre en la misma posicion no importando que de click en diversos elementos de la tabla. No encuentro la manera de que me pinte el <tr> debajo del enlace al que le estoy dando clic. Entiendo que debo asignar un id a cada <Tr> a nivel encabezado para poderlo ligar al detalle, pero no he logrado hecharlo a andar.

    A continuacion les dejo el codigo.

    Vista Index

    @{
        ViewBag.Title = "Listado de Comentarios Evaluados";
        var listaEncabezados = (List<DocumentosEvaluadosEncabezado>)ViewBag.ListaEncabezados;
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <!--Tabla que almacenara los comentarios a nivel encabezado-->
    <table width=1250 align="center" border=1 bgcolor="#828DDF" id="Encabezado">
        <thead>
            <tr>
                <!--Agrego encabezados de tabla-->
                <th>Detalles</th>
                <th>Reservacion</th>
                <th>Fecha</th>
                <th>Control</th>
                <th>Aprobar</th>
            </tr>
        </thead>
        <!--Agrego elementos al cuerpo de la tabla-->
        <tbody>
            <!--Recorro la tabla llenandola con los datos de la lista-->
            @foreach (var item in listaEncabezados)
                {
                <tr id="@item.clav_res">
                   <td>@Ajax.ActionLink("Detalles", "_Detalles", new { clav_res = item.clav_res }, new AjaxOptions { UpdateTargetId = "DetallesAjax" })</td>
                    <td>@item.clav_res</td>
                    <td>@item.fecha_ingreso</td>
                    <td>@item.control</td>
                    <td style="text-align:center"> <img src="~/Content/img/ok.png" style="cursor:pointer"></td>
                </tr>
    
                <tr id="fila-@item.clav_res" style="display:normal">
    
                    <td colspan="14">
    <!--Aqui asigno el espacio para que pinte la vista parcial dentro del div DetallesAjax-->
                        <div id="DetallesAjax"></div>
                        @*@RenderPage("~/Views/Home/_Detalles.cshtml")*@                    
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <br>
    
    @section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
    </script>
    }
    

    Vista Detalles

    @{
        <!--Seccion de traspaso de datos de C# a HTML--> <!--Declaro una variable que utilizare para almacenar el listado de los datos traspasados-->
        var listaDetalles = (List<DocumentosEvaluadosDetalles>)ViewBag.ListaDetalles;
    }
    <table width=1250 align="center" border="1">
        <thead>
            <tr>
                <!--Agrego encabezados de tabla de detalles-->
                <th>Reservacion</th>
                <th>Servicio</th>
                <th>Val Titulo</th>
                <th>Valo Lo Mejor</th>
                <th>Val Lo Peor</th>
                <th>Val Best Day</th>
                <th>Val Total</th>
                <th>Fecha Valoracion</th>
                <th>Aprobar</th>
                <th>Comentarios</th>
            </tr>
        </thead>
        <!--Agrego elementos al cuerpo de la tabla-->
        <tbody>
            <!--Recorro la tabla llenandola con los datos de la lista-->
            @foreach (var item in listaDetalles)
                {
                <tr>
                    <!--<td style="text-align:center"> <img src="~/Content/img/add.png" style="cursor:pointer" id="DetallesAjax"></td>-->
                    <td>@item.clav_Res</td>
                    <td>@item.clav_servicio</td>
                    <td>@item.val_titulo</td>
                    <td>@item.val_lo_mejor</td>
                    <td>@item.val_lo_peor</td>
                    <td>@item.val_best_day_opinion</td>
                    <td>@item.val_total</td>
                    <td>@item.fecha_valoracion</td>
                    <td style="text-align:center"> <img src="~/Content/img/ok.png" style="cursor:pointer" id="AprobarDetallesAjax"></td>
                    <td style="text-align:center"> <img src="~/Content/img/add.png" style="cursor:pointer" id="MostrarDetallesAjax"></td>
                </tr>
            }
        </tbody>
    </table>
    
    

    Controlador

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace SI_de_Comentarios.Controllers
    {
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                //Instancion una lista que traera los datos de comentarios evaluados a nivel encabezado
                List<DocumentosEvaluadosEncabezado> listaEncabezado = new List<DocumentosEvaluadosEncabezado>();
                //Instancio mi clase de BaseDeDatos para poder acceder a sus metods publicos
                BaseDeDatos bd = new BaseDeDatos();
                //Asigno a listadetalles los datos que se obtienen con la funcion ObtenerComentariosEvaluadosEncabezado
                listaEncabezado = bd.ObtenerComentariosEvaluadosEncabezado();
                //Le paso a ViewBag la variable listaDetalles a una nueva variable ListaDetalles
                ViewBag.ListaEncabezados = listaEncabezado;
                //Regreso la vista
                return View();
            }
    
            //PartialViewResult
            public ActionResult _Detalles(int clav_res)
            {
                //Instancion una lista que traera los datos de comentarios evaluados a nivel detalles
                List<DocumentosEvaluadosDetalles> listaDetalles = new List<DocumentosEvaluadosDetalles>();
                //Instancio mi clase de BaseDeDatos para poder acceder a sus metods publicos
                BaseDeDatos bd = new BaseDeDatos();
                //Asigno a listadetalles los datos que se obtienen con la funcion ObtenerComentariosEvaluadosEncabezado
                listaDetalles = bd.ObtenerComentariosEvaluadosDetalles(clav_res);
                //Le paso a ViewBag la variable listaDetalles a una nueva variable ListaDetalles
                ViewBag.ListaDetalles = listaDetalles;
                //Regreso una vista parcial
                return PartialView("_Detalles");
            }
        }
    }

    Agradezco mucho su apoyo, ojala alguien pudiera hecharme una manita.

    Saludos y buena noche.

    miércoles, 18 de octubre de 2017 3:04