Blazor(详细信息)页面重新加载会导致javascript错误

时间:2019-11-03 07:11:11

标签: c# blazor

我使用一个免费模板(其中包含一堆javascript文件)为自己建立了一个Blazor小网站。 除了一件事,一切似乎都工作正常。

当用户重新加载(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网站上。

The error

该站点目前已部署在Azure上。请注意,它是荷兰语。 转到投资组合页面时,单击三个项目之一,然后进行强制刷新,将出现错误。 https://dogasolutions.azurewebsites.net/

编辑:通过添加'/'(感谢gsharp)修复了引用后,该页面似乎重新加载正常,除了blazor javascript文件之外。

在_host.cshtml正文标签内:

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

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

enter image description here

1 个答案:

答案 0 :(得分:0)

我找出了罪魁祸首。我使用在线模板替换了我的大部分writing queries文件。这样,我已经覆盖了_Host.cshtml标签中的base标签。

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

head

否则,blazor进入详细页面(例如domain / page / {parameter})时将无法正确解析连接