Loading
asp.net core display bootstrap tabs dynamically in razor pages  
  •                         class="col-md-3 ml-1">  
  •                             class="form-control text-white pl-2" style="background-color:firebrick;">WO Status  
  •                             class="form-control text-center">@Html.DisplayFor(modelItem => item.WOStatus)  
  •                           
  •                       
  •   
  •                   
  •             }  
  •           
  •     }  
  •   
    • Is there anything I should do better? 
     
     

    9 Replies

    Know the answer? Post it — somebody with the same question will find it here.

        
  •         class="tab-content">    
  •             @foreach (var item in Model.WOMainsL)    
  •             {    
  •                 "@item.WOMainID" class="container tab-pane active">    
  •                     
        
  •                     class="row no-gutters">    
  •                         class="col-md-2 ml-1">    
  •                             class="form-control text-white pl-2" style="background-color:firebrick;">CreateDate    
  •                             class="form-control text-center">@Html.DisplayFor(modelItem => item.CreateDate)    
  •                             
  •                         class="col-md-3 ml-1">    
  •                             class="form-control text-white pl-2" style="background-color:firebrick;">WO Status    
  •                             class="form-control text-center">@Html.DisplayFor(modelItem => item.WOStatus)    
  •                             
  •                         
  •     
  •                     
  •             }    
  •             
  •     }    
  •     
  •   
  •   
  • $('[data-toggle="tab"]').click(function(e) {  
  •     var $this = $(this),  
  •         loadurl = $this.attr('href'),  
  •         targ = $this.attr('data-target');  
  •   
  •     $.get(loadurl, function(data) {  
  •         $(targ).html(data);  
  •     });  
  •   
  •     $this.tab('show');  
  •     return false;  
  • }); 
    •  
    +2
  • Marius Vasile

    Marius VasilePosted Feb 14, 2021, 2:44 PM

    So, the only request for json I have is this
     
    1.   
    which is for a select. When I try to use the same request I face a problem, the id. in the tab list the id is @item.WOMainID
    How do I use that in javascript? 
    0
  • Sachin Singh

    Sachin SinghPosted Feb 12, 2021, 8:25 AM

    return json and loop through resuts in razor.
    +2
  • Marius Vasile

    Marius VasilePosted Feb 12, 2021, 6:52 AM

    I got this Sachin, I cannot experiment with something I don't know, in this case javascript.
    +2
  • Sachin Singh

    Sachin SinghPosted Feb 12, 2021, 6:49 AM

    sir i am focussing on data-toggle attribute , you could use other jquery things link bind or change on parent tab , do experiment what works for you the key is to send an ajax request on tab click , otherwise you will endup with unfiltered results.
    +2
  • Sachin Singh

    Sachin SinghPosted Feb 12, 2021, 6:30 AM

    sir
    your data is being filtered with wono in controller action right?
    so you need to send a request with each tab click so that you could get filtered data.
    please check on tab click , breakpoint hits or not?
    and don't forget to include the javascript i mentioned at the bottom.
    +2
  • Marius Vasile

    Marius VasilePosted Feb 12, 2021, 6:22 AM

    Thank you Sachin, the change makes no difference, I still have all data in one tab and also, I don't get the idea with url and pagename. There is no anchor tag for tabs, they suppose to be identified with @item.WoMainId
    +2
  • Marius Vasile

    Marius VasilePosted Feb 12, 2021, 5:36 AM

    Thank you for your reply Kiran. Actualy, the first row (Planned) belongs to 2-2 and second row (Reviewed) belongs to 2-1
     
    The Model
     
    1. public async Task OnGetAsync(int wono)  
    2.         {  
    3.             WONumber = wono;  
    4.             var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);  
    5.             var orgid = await _context.UsersData.Where(u => u.Id == userId).Select(u => u.OrgID).SingleAsync();  
    6.             WOMainID = await _context.WOMains.Where(u => u.WONumber == wono && u.WONumberS == 0).Select(u => u.WOMainID).SingleAsync();  
    7.             if (wono > 0)  
    8.             {  
    9.                 WOMainsL = await _context.WOMains.Where(s => s.OrgID == orgid && s.WONumber == wono && s.WONumberS > 0).ToListAsync();  
    10.             }  
    11.               
    12.             return Page();  
    13.         }  
     
    +1
  • Kiran Mohanty

    Kiran MohantyPosted Feb 12, 2021, 5:28 AM

    I don't see any filter condition which can pick different data for different tabs. Can you please share table data snap along with the output design that you are looking for ?
    +2