如何在异步获取PartialView结果准备好后如何执行JavaScript？

Question

在我的Razor视图中，我使用Fetch API调用Partial View，并且效果很好：

<script>
    window.onload = async function () {
        await fetch('http://localhost:53801/Home/VesselPartial')
            .then((response) => { return response.text(); })
            .then((result) => {
                document.getElementById('loadVessel').innerHTML = result;
                document.getElementById('loader').style.display = 'none';
                document.getElementById('loadVessel').style.display = 'block';
            });
    };
</script>

它在控制器中执行部分后端，并显示部分视图。问题来了，当我想执行Partial视图中负责HTML元素的JavaScript时。正如我已经注意到的，我无法从部分cshtml中执行任何<script>。如果_Layout.cshtml为DisplayPartial，则从async调用的帮助程序也无济于事。我试图弄清楚在Fetch调用后如何调用ViewComponent，因为在ViewComponent中我有JavaScript。在DisplayPartial完成其后端工作之前，不幸的是在下面的代码中执行了ViewComponent。

<script>
    window.onload = async function () {
        await fetch('http://localhost:53801/Home/VesselPartial')
            .then((response) => { return response.text(); })
            .then((result) => {
                document.getElementById('loadVessel').innerHTML = result;
                document.getElementById('loader').style.display = 'none';
                document.getElementById('loadVessel').style.display = 'block';
            });
                @await Component.InvokeAsync(nameof(VesselDetailsScripts))
    };
</script>

如何强制Component.InvokeAsync等待Fetch API result准备就绪？我已经为此挣扎了几个小时...

Answer 1

const response = await fetch('http://localhost:53801/Home/VesselPartial')
const result = await response.text()
document.getElementById('loadVessel').innerHTML = result;
document.getElementById('loader').style.display = 'none';
document.getElementById('loadVessel').style.display = 'block';

@await Component.InvokeAsync(nameof(VesselDetailsScripts))