asp.net core display bootstrap tabs dynamically in razor pages

Question

I am trying to put related info in tabs for better view but it will show all data in both tabs. I used example here https://www.c-sharpcorner.com/blogs/bootstrap-tab-strip-in-asp-net-mvc class = "container" > @ if (Model.WOMainsL.Count() > 0) { class = "row no-gutters" > class = "col-md-2" > class = "form-control text-white pl-2" style= "background-color:firebrick;" >WO NUmber class = "col-md-4" > class = "form-control text-center btn-link" >@Html.DisplayFor(model => model.WONumber) class = "row no-gutters mb-4 pl-2" > class = "h6" >Subsequent class = "nav nav-tabs" role= "tablist" > @{ int i = 0; foreach (var item in Model.WOMainsL) { if (i == 0) { class = "nav-item" > class = "nav-link active" data-toggle= "tab" href= "#@item.WOMainID" >@item.WONumber - @item.WONumberS } else { class = "nav-item" > class = "nav-link" data-toggle= "tab" href= "#@item.WOMainID" >@item.WONumber - @item.WONumberS } i++; } } 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) } } Is there anything I should do better?

Sachin Singh · Answer

href is to send url , but bootstrap override this , which i don't like , so use href for what it is invented for and to change the tab use data-target attribute. then with ajax load the content. so your code should go like this. please change the url with pageName means with what you normally use in all anchor tags. class = "nav nav-tabs" role= "tablist" id= "myTab" > @{ int i = 0; foreach (var item in Model.WOMainsL) { if (i == 0) { class = "nav-item" > class = "nav-link active" data-toggle= "tab" href= "url/@item.WOMainID" data-target= "#@item.WOMainID" >@item.WONumber - @item.WONumberS } else { class = "nav-item" > class = "nav-link" data-toggle= "tab" href= "url/@item.WOMainID" data-target= "#@item.WOMainID" >@item.WONumber - @item.WONumberS } i++; } } 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 ; });

Kiran Mohanty · Answer

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 ?

Sachin Singh · Answer

return json and loop through resuts in razor.

Marius Vasile · Answer

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

Sachin Singh · Answer

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.

Sachin Singh · Answer

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.

Marius Vasile · Answer

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

Marius Vasile · Answer

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 public async Task OnGetAsync( int wono) { WONumber = wono; var userId = User.FindFirstValue(ClaimTypes.NameIdentifier); var orgid = await _context.UsersData.Where(u => u.Id == userId).Select(u => u.OrgID).SingleAsync(); WOMainID = await _context.WOMains.Where(u => u.WONumber == wono && u.WONumberS == 0).Select(u => u.WOMainID).SingleAsync(); if (wono > 0) { WOMainsL = await _context.WOMains.Where(s => s.OrgID == orgid && s.WONumber == wono && s.WONumberS > 0).ToListAsync(); } return Page(); }

Marius Vasile · Answer

So, the only request for json I have is this $(function () { $( "#Location" ).on( "change" , function () { var categoryId = $( this ).val(); $( "#Asset" ).empty(); $( "#Asset" ).append( " --Select Asset-- " ); $.getJSON(`?handler=Asset&id=${categoryId}`, (data) => { $.each(data, function (i, item) { $( "#Asset" ).append(` "${item.value}" > ${item.text} `); }); $( '#Asset' ).selectpicker({ liveSearch: true }); }); $.getJSON(`?handler=LocationDetails&id=${categoryId}`, (data) => { if (!jQuery.isEmptyObject(data)) { $( "#AssetLocation" ).val(data.assetLocation); } }); }); }); 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?