After several days and multiple attempts using examples, I am still struggling to get a partial view to page inside a tab control. In the code below, when selecting the 'tab4' Tab 1st time, it displays the records, however when selecting the next page, the entire view is updated and the first tab1 becomes the active tab. When selecting the tab4 tab again, the data displayed has paged. I'm looking to just page the partial view within the active tab (in this case tab4)
Controller
Function Index(page As Integer?) As ActionResult
Dim TSets = db.TransactionSets.OrderBy(Function(a) a.FileSerial)
Dim pageNumber As Integer = If(page, 1)
Dim pageSize As Integer = 10 ' Number of items per page
Dim pagedList = TSets.ToPagedList(pageNumber, pageSize)
Return View(pagedList)
End Function
Index View
@Modeltype PagedList.IPagedList(Of Test_Pagedlist.TransactionSet)
@Imports PagedList.Mvc
<h2>Test</h2>
<div class="container">
<div class="row">
<div class="col-2">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="tab1-nav" data-toggle="list" href="#tab1" role="tab" aria-controls="home">Unsubmitted Files</a>
<a class="list-group-item list-group-item-action" id="tab2-nav" data-toggle="list" href="#tab2" role="tab" aria-controls="profile">Authorise Files</a>
<a class="list-group-item list-group-item-action" id="tab3-nav" data-toggle="list" href="#tab3" role="tab" aria-controls="messages">Accepted Files</a>
<a class="list-group-item list-group-item-action" id="tab4-nav" data-toggle="list" href="#tab4" role="tab" aria-controls="submitted">Submitted Files</a>
</div>
</div>
<div class="col-10">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active " id="tab1" role="tabpanel" aria-labelledby="tab1">Unsubmitted</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2">Authorise</div>
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3">Accepted</div>
<div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="tab4">
<div id="submitted-container" style="border:double">@Html.Partial("_SubmissionSets", Model)</div>
</div>
</div>
</div>
</div>
</div>
Partial View
@ModelType PagedList.IPagedList(Of Test_Pagedlist.TransactionSet)
@imports PagedList.mvc
<Table Class="table">
<tr>
<th>
@Html.Label("File Serial")
</th>
<th>
@Html.Label("Name")
</th>
<th></th>
</tr>
@For Each item In Model
@<tr>
<td>
@Html.DisplayFor(Function(modelItem) item.FileSerial)
</td>
<td>
@Html.DisplayFor(Function(modelItem) item.OrigAccountName)
</td>
<td>
</td>
</tr>
Next
</Table>
<div class="pagination" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#submissionList">
Page @(If(Model.PageCount < Model.PageNumber, 0, Model.PageNumber)) of @Model.PageCount
@Html.PagedListPager(Model, Function(page) Url.Action("Index", New With {.page = page}))
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
data-ajax-update="#submissionList"- that the ID of the element the component is supposed to update? If so, where is that element?Indexmethod supposed to serve the full page (including the tabs), or just the paginated results? Sounds like it does the former, and then on the client side the whole thing gets replaced with the result. So you would either have to make tab #4 the active one on the server side already then - or make the controller return only the HTML for the paginated records, and the make it replace only that part of the content on the client side.Url.Action("Index",- your pagination will request theindexURL again; but do you have anything in there that would make it now return just the partial, and not the full index template? You should either pass a parameter that will accomplish that, or create a second method just for the pagination, that will return the partial template.