时间戳

首页 > 解决方案 > 使用参数导航到 Blazor 页面不会呈现布局或任何内容

blazor - 使用参数导航到 Blazor 页面不会呈现布局或任何内容

问题描述

所以我在 Blazor 应用程序中创建了一个页面 - 它从数据库加载博客故事 - 如果没有选择则加载默认的 - 没什么大不了的

如果我使用故事的参数 id 直接导航到此页面 - 没有 Host 或 mainlayout - 所以没有任何样式等被应用或呈现

如果好奇，页面是https://www.pepclublocker.com/news-posts/1 。

我该怎么做才能解决这个问题？

标签： blazorblazor-server-side

解决方案

您的 html 中缺少该<base href="/" />标记head，因此 Blazor 在其中查找脚本/new-post但找不到任何内容。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Pep Club Locker - Team Apparel Printers & Shop </title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/business-frontpage.css" rel="stylesheet">
</head>
<body>
...
<!--Blazor:{"prerenderId":"4ae18037ad8d4418b898ea9715bbefab"}-->
    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Blazor-Analytics/blazor-analytics.js"></script>
    <script src="_content/Blazor-Facebook-Analytics/interop.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>

在此处输入图像描述

在中添加<base href="~/" />标签应该可以解决head您_Host.cshtml的问题。

_Host.cshtml

<head>
    <base href="~/" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Pep Club Locker - Team Apparel Printers & Shop </title>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="css/business-frontpage.css" rel="stylesheet">
</head>

推荐阅读