是否可以在不执行重新加载的情况下更改视图内容答案

【问题标题】：Is it possible to change view content without performing reload是否可以在不执行重新加载的情况下更改视图内容
【发布时间】：2021-09-20 10:25:23
【问题描述】：

我需要创建包含带有分页、排序和搜索的表格的视图。我从后端 api 获取数据，然后将其传递给视图。

我的操作方法如下所示：

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

我有这样的看法：

@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>

什么视图看起来像：

一切正常。不要注意显示这样的页码并更改上一个和下一个，我只是想简化我的问题。所以当我点击下一页时，数据变化和表格也更新得非常快，这不是问题。

但我在选项卡中看到该页面已重新加载： .

那么在 asp .net 核心中是否有任何解决方案可以做到这一点而不会看到该页面重新加载。我需要再次调用我的操作来更改这个参数“页面”，然后从 api 获取新数据，而不会看到那个丑陋的页面重新加载。感谢您提供所有解决方案。

【问题讨论】：

只是检查一下，我看到了 blazor 标记，但你是在 blazor 中这样做的吗？无论哪种方式，如果这是正常的 MVC，如果不使用客户端代码（如 javascript）调用服务器并更新页面上的内容，您不太可能能够避免页面重新加载。
是的，使用 AJAX。或者也许更好地使用 Blazor。
我删除了 blazor 标签，很抱歉。我不太熟悉.net core mvc。我正在使用 react，这在 react 中非常简单。我需要为这个项目使用 .net core mvc，所以我想构建非常好的 ui 和 ux...

标签： asp.net-core asp.net-core-mvc

【解决方案1】：

所以你想创建包含分页、排序和搜索的表而不重新加载的视图。所以你应该为此使用 jquery。更新你的代码如下：-

@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>
}

并在您的 _Layout.cshtml 中添加以下链接：-

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

你的输出会是这样的：-

所以当你从一个页面转到另一个页面时，它不会重新加载，因为你使用了 jquery。并且已经排好序了，你也可以根据需要进行搜索。

【讨论】：

是的，我已经知道数据表，但这不是服务器端进程。我需要调用我的 api 来获取当前页面的项目，而不是获取所有项目然后让数据表进行分页。

【解决方案2】：

你可以使用一些优秀的前端框架。我现在推荐你使用layui，这是一个中文社区，当然你也可以选择其他的。这个layui在分页的时候，URL是这样的格式。

https://www.layui.com/demo/table/user/?page=2&limit=10

这样就可以调用.net core api进行部分刷新，而不需要重新加载整个页面。

【讨论】：