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

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.