0

hola comunidad como estoy buscando la forma de crear tabs dinámicos y cargar las vista dinámicamente usando jQuery, como el que se encuentra en la imagen, estoy intentando crear el tabpane dinámicamente y a su ves cargar la primera opción llamando una vista parcial desde el controlador. Por el momento he fracasado en hacerlo dinámico espero su ayuda y si no me exprese bien no me regañen saludos.

introducir la descripción de la imagen aquí

Mi html

<div class="container">
<div class="form-group">
    <div class="row">
        <a href="#item1" class="col-3 master-advanced-left-tab nav-link active">
            <span class="number">1</span><span class="cssNegrita">Seleccione su Tarjeta</span>
        </a>
        <a href="#item2" class="col-3 master-advanced-left-tab nav-link active">
            <span class="number">2</span><span class="cssVerde">Escoja la cuenta acreditar</span>
        </a>
        <a href="#item3" class="col-3 master-advanced-left-tab nav-link active">
            <span class="number">3</span><span class="cssVerde">Monto y seleccione plazo</span>
        </a>
        <a href="/Home/Contact" class="col-3 nav-link active master-advanced-left-tab">
            <span class="number">4</span><span class="cssVerde">Comprobante</span>
        </a>
    </div>
</div>

esto intento hacerlo dinamico

 $(document).ready(function () {
    debugger
    var index = 1;
    if (index > 0) {
        var partialView = "/TabPane/OpcionesTabs?index=" + index;
        $('.item').load(partialView);
    }       
});

debugger
let tabs = $('.tab-content');
let triggers = $('.master-advanced-left-tab').on('click', function (e) {
    e.preventDefault();
    triggers.removeClass('master-advanced-left-tab-active');
    var elem = $(this).addClass('master-advanced-left-tab-active');
    tabs.hide();
    tabs.filter(elem.attr('href')).show();
});
triggers.first().trigger('click');

function CargarTabs(index) {
    debugger
    if (index > 0) {
        var partialView = "/TabPane/OpcionesTabs?index=" + index;
        $('.item').load(partialView);
    }       
}

En el controlador tabpane envió la opción y me retorna una vista parcial

   public ActionResult OpcionesTabs(int? index)
    {
        
        switch (index)
        {
            case 1:
                return PartialView("../TabPane/CrudAvances/Index");
            case 2:
                return PartialView("../TabPane/CrudAvances/Index2");
            case 3:
                return PartialView("../TabPane/CrudAvances/Index3");
            case 4:
                return PartialView("../TabPane/CrudAvances/Index4");
        }
        return View("../TabPane/OpcionesTabs");
    }

1 respuesta 1

0

Solucione el problema para alguien que necesite algo similar "gracias por las ayudas y sugerencias" -_- (ninguna)

En la vista puse un ciclo que arma el tab dinámico

<div class="container">
    <div class="row nav nav-justified flex-column flex-sm-row linea">
        @foreach (var customer in Model)
        {<div class="col-3 nav flex-column justify-content-center form-group">
                <a href="@customer.Id" id="#id" class="master-advanced-left-tab nav-link"><span>@customer.Id</span><span class="cssNegrita">@customer.Nombre</span></a>
            </div>
        }
    </div>

    <br />
    <div class="item form-group">

    </div>
</div>

En el css hice algunos cambios

.linea {
    border-bottom: 2px solid;
    color: gainsboro;   
    border-bottom-width: 2px;
    width: 90%
}


/*Original*/

.tab-content {
    display: none;
}
.master-advanced-left-tab {
    display: block;
    overflow: hidden;
    cursor: pointer;
    padding-bottom: 10px;
    padding-top: 10px;
}

.master-advanced-left-tab > span:first-child {
    height: 30px;
    background-color: #32CD32;
    color: #fff;
    width: 30px;
    display: inline-block;
    font-size: 0.8em;
    margin-right: 4px;
    line-height: 30px;     
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    border-radius: 100%;
    opacity:0.9;
}

.master-advanced-left-tab-active {
    color: #32CD32;
    border-bottom: 3px #32CD32 solid;    
}


En el controlador

    // GET: TabPane
        public static readonly IEnumerable<TabPaneMenu> TabPaneMenus = new[] {
            new TabPaneMenu() { Id = 1, Nombre = "Seleccione la tarjeta" },
            new TabPaneMenu() { Id = 2, Nombre = "Escoja la cuenta a acreditar" },
            new TabPaneMenu() { Id = 3, Nombre = "Ingrese el monto y el plazo" },
            new TabPaneMenu() { Id = 4, Nombre = "Comprobante" },          
        };     

        public ActionResult CargarTabPaneMenu()
        {            
            return View(TabPaneMenus.ToList());
        }        
            
        public ActionResult OpcionesTabs(int itemId)
        {                        
            switch (itemId)
            {
                case 1:
                    return PartialView("../TabPane/CrudAvances/Index");
                case 2:
                    return PartialView("../TabPane/CrudAvances/Index2");
                case 3:
                    return PartialView("../TabPane/CrudAvances/View");
                case 4:
                    return PartialView("../TabPane/CrudAvances/Index4");
            }
            return PartialView("../TabPane/CrudAvances/Index");
         }

Finalmente en el js

$(function (e) {
            debugger
            triggers.first().trigger('click');
        });

        /*-------------Carga de los href y primera opción del tabPane----------------------*/
        let tabs = $('.tab-content');
        let triggers = $('.master-advanced-left-tab').on('click', function (e) {
            e.preventDefault();
            var href = $(this).attr('href').valueOf();

            if (href > 0 || href != null) {
                CargarTabs(href);
            }
            triggers.removeClass('master-advanced-left-tab-active');
            var elem = $(this).addClass('master-advanced-left-tab-active');
            debugger
            tabs.hide();
            tabs.filter(elem.attr('href')).show();
        });

        /*--------Selecciona las vistas sellecionadas por el tabPane--------*/
        function CargarTabs(itemId) {
            debugger
            $.ajax({
                type: 'Get',
                url: '/TabPane/OpcionesTabs?itemId=' + itemId,
                data: {},
                success: function (data) {
                    $('.item').empty().html(data);
                }
            })
        }

El resultado del tab, ahora si podras llamar las vistas desde la pestaña tabpane

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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