Is it possible to change view content without performing reload-CodePudding

I need to create view that contains table with pagination, sorting and search. I'm getting my data from backend api and then I'm passing it to the view.

My action method looks like this:

public async Task<IActionResult> Home(int page = 1)
{
    var list = await _service.Get<List<Model.Rezervacija>>(page);
    ViewBag.Page = page;
    return View(list);
}

And I have this view:

@using eBiblioteka.Model
@model List<Rezervacija>
@{
  ViewBag.Title = "Home";
  Layout = "~/Views/Shared/_Layout.cshtml";
 }

<div id="view-all">
  @await Html.PartialAsync("_ViewAll", Model, null)
</div>

<a asp-action="Home" asp-route-page="@(ViewBag.Page - 1)">Previous</a>
<a asp-action="Home" asp-route-page="@(ViewBag.Page   1)">Next</a>

And what view looks like:

And that all works. Don't pay attention for displaying pages number like this and changing with previous and next, I just wanted to simplify my question. So when i click next page, data changes and table also update very fast and that isn't problem.

But i see in tab that page is reloaded: .

So is there any solution in asp .net core to do this without seeing that page reload. I need to call my action again to change this param "page" and then fetch new data from api without see that ugly page reload. Thank you for all solutions.

CodePudding user response：

So you want to create view that contains table with pagination, sorting and search without reloading.so you should use jquery for this.update your code like below:-

@using eBiblioteka.Model
@model IEnumerable<Rezervacija>

<div>
    <table class="table table-striped border" id="myTable">
        <thead>
            <tr class="table-info">
                <th>
                    @Html.DisplayNameFor(c => c.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(c => c.SpecialTagId)
                </th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>  @item.Name </td>
                    <td>  @item.SpecialTag.Name </td>
                    <td>
                        <partial name="_ButtonPartia3" model="@item.Id" /> //you can use partial view for delete or add data.
                    </td>
                </tr>
            }

        </tbody>
    </table>
</div>
<br /> <br />
@section scripts{
    <script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">
        $(document).ready( function () {
       $('#myTable').DataTable();
});

    </script>
}

And Add this below link in your _Layout.cshtml:-

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css">

And your output will be like this:-

So when you will go from one page to another page, it will not reload because you used jquery. and it's already sorted and you can also search as needed.

CodePudding user response：

You can use some excellent front-end frameworks. I now recommend you use