c# - Blazor（详细信息）页面重新加载导致 javascript 错误

问题描述

我为自己构建了一个小型 Blazor 网站，使用一个免费模板，其中包含一堆 javascript 文件。除了一件事，一切似乎都运行良好。

当用户重新加载（F5）项目详细信息页面时，所有 html 标记都消失了，控制台显示一堆错误日志，表明它找不到相关的 javascript 文件。重新加载任何其他页面都可以正常工作。

这是剃须刀页面

@page "/project/{Slug}"

@using DOGA.Data
@using DOGA.Services
@inject ProjectService projectService
@inject NavigationManager navigationManager

@if (_project == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <section id="pricing" class="pricing-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="section-title text-center pb-20">
                        <h3 class="title">@_project.Name</h3>
                        <p class="text">
                            @((MarkupString)_project.Description)

                            @if (_project.BulletPointList.Items.Any())
                            {
                                <br />

                                @_project.BulletPointList.Name
                                <br />
                                <br />
                                <ul style="text-align:left;">
                                    @foreach (var item in _project.BulletPointList.Items)
                                    {
                                        <li>
                                            <i class="lni-check-mark-circle"></i> @item
                                        </li>
                                    }

                                </ul>
                            }
                        </p>
                    </div> <!-- section title -->
                </div>
            </div> <!-- row -->
            @foreach (var image in _project.DetailImages)
            {
                <div class="row justify-content-center">
                    <div class="col-lg-12 col-md-7 col-sm-9">
                        <div class="pricing-style-one mt-40 wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.2s">
                            <div class="pricing-header text-center">
                                <h5 class="sub-title">@image.ImageName</h5>
                            </div>
                            <div class="text-center">
                                <img src="@image.ImageLink" alt="@image.ImageName">
                            </div>
                            <div class="text-center top-buffer">
                                <br />
                                @image.ImageDescription
                            </div>
                            @if (image.BulletPoints.Any())
                            {
                                <br />

                                <div class="pricing-list">
                                    <ul>
                                        @foreach (var item in image.BulletPoints)
                                        {
                                            <li><i class="lni-check-mark-circle"></i> @item</li>
                                        }
                                    </ul>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
    </section>
}

@code {
    [Parameter]
    public string Slug { get; set; }

    private Project _project { get; set; }

    protected override async Task OnInitializedAsync()
    {
        _project = await projectService.GetProjectAsync(Slug);

        if (_project == null)
        {
            navigationManager.NavigateTo("/");
        }
    }
}

该错误出现在本地和已发布的 Azure 站点上。

该站点目前部署在 azure 上。请注意，它是荷兰语。进入投资组合页面时出现错误，单击三个项目之一，然后硬刷新。 https://dogasolutions.azurewebsites.net/

编辑：通过添加“/”（感谢 gsharp）修复引用后，页面似乎重新加载正常，除了 blazor javascript 文件。

在body标签里面的_host.cshtml：

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

<script src="/_framework/blazor.server.js"></script>

标签： c#blazor

我发现了罪魁祸首是什么。我使用在线模板替换了我的大部分_Host.cshtml文件。通过这样做，我覆盖了base我的标签中的head标签。

只需在我的标签中添加以下代码head即可完全解决问题。

<base href="~/" />

没有这个，blazor 在进入详细页面时无法正确解析连接（例如 domain/page/{parameter}）

c# - Blazor（详细信息）页面重新加载导致 javascript 错误

问题描述

解决方案

推荐阅读