如何在完成渲染之前加载剃须刀页面？

Question

我在index.cshtml中有一个记录表，一旦用户单击记录以查看将它们带到lidets.cshtml的详细信息。

问题是，有很多数据正在提取，并且页面的响应时间较慢。我想添加一个加载旋转器，但页面没有切换，它只是在index.cshtml上保留，直到所有数据详细加载所有数据。

我如何使我的应用程序跳至详细信息。cshtml用户单击记录，进行加载旋转器显示，然后完成加载页面。我不希望用户坐在索引页面上等待。

index.cshtml

<a asp-page="/Details" asp-route-id="@Person.id">Select</a>

详细信息。cshtml.cs，

//simplified  

public async Task<IActionResult> OnGetAsync(int? id)
{
 var data = await _dataService.GetData(id); 
 return Page(); 
}

Answer 1

我将以以下方式进行。

步骤1：您确定您的数据访问代码是否已优化？

在这里可以做什么：

• 检查您实际上在做的查询。您正在使用索引吗？如果没有，请尝试添加索引并检查是否有助于减少执行时间。您可以使用数据库工具检查实际查询执行计划（我不知道您正在使用哪种数据库，但是任何常用的专业数据库都提供某种类型的工具来检查查询执行计划）。
• 您是否正在加载所需的最低字段？有时，人们倾向于编写SELECT *从Mytable中进行选择，并最终加载他们在mytable中定义的所有35个字段，而他们实际上需要2或3个字段。
• 您是否考虑过缓存查询结果？我只有在尝试优化查询之后才能以上面的方式进行此操作。有时，数据可以缓存，因为它们不会变得陈旧，或者拥有陈旧的数据是可以接受的。当然，这取决于您的用例。在其他时候，当数据更改并变为陈旧时，可能会缓存数据并使缓存无效。

步骤2：您是否真的需要向用户显示所有整个结果？

有时我们创建网页，其中我们向用户显示1000个数据记录。大多数时候，这是没有用的：您导航到Google搜索结果的第二页多少次？我的意思是，您可以考虑仅向用户展示前10个项目，并为他们提供更多负载按钮，分页系统或过滤搜索以减少结果集的方法。

步骤3：您是否正在进行很多加入来加载数据？

也许您需要准备一个读取模型，该模型正好是1：1，其中需要显示的数据，以便在您的视图中显示您可以在其上运行简单而简单的查询（根本没有加入），并且可以快速简单地获取数据。考虑探索CQRS架构模式。

步骤4：您可以评估以加载数据客户端，以便
快速向用户显示一些东西，并让实际数据懒洋洋地加载用户浏览器。

为此，您需要使用AJAX请求和一些JavaScript将大量页面延长移至客户端。

如果您的所有应用程序都是渲染的服务器端，并且您正在从剃须刀页面或MVC项目中工作，我将避免这样做。这是一个完全不同的范式，无论如何，您需要优化数据访问代码并查看要为用户加载的数据量。

在我看来，在大多数情况下，步骤1和步骤2就足够了。

Answer 2

您可以尝试使用部分页面和JS，使用JS调用部分页面，然后将ID传递给其，然后使用等待_dataservice.getData（ID）（ID）;：

deletss.cshtml：

<div id="content"></div>
@section Scripts{ 

    <script>
        $(function () {
            $.ajax({
                type: "GET",
                url: '[email protected]',
            }).done(function (result) {
                document.getElementById("content").innerHTML = result;
            })
        })
    </script>
}

详细信息。 cshtml.cs：

[BindProperty]
public int ID { get; set; }
public async Task<IActionResult> OnGetAsync(int? id)
{
 ID = id;
 return Page(); 
}

index2.cshtml.cs：

public IActionResult OnGet(int? id)
        {
            var data = await _dataService.GetData(id); 
            return Page();
        }

更新：
如果您不想返回布局元素，请尝试将以下代码添加到index2.cshtml：

@{
    Layout=null; 
}