将静态 html 页面转换为 Blazor 页面答案

【问题标题】：Convert static html page to Blazor Page将静态 html 页面转换为 Blazor 页面
【发布时间】：2021-05-04 08:07:31
【问题描述】：

我很久以前用Nicepage建立了一个静态网站。

但我想将此项目转换为 Blazor 项目，因此我可以使用一些 C# 代码。

为此，我将 html 页面的代码复制/粘贴到 razor 文件中，脚本标签除外（我将它们放入 index.html）。

问题是元素渲染不好。

例如，我有一张图片，我希望只在桌面上可见，而不是在移动设备上。在 Blazor 上切换项目后，图像在桌面和移动设备上不可见。我看到 nicepage 作为一个全局 css 文件，以及一个用于 html 页面的特定 css 文件。所以我将它们添加到剃须刀页面中

<link rel="stylesheet" href="nicepage.css" media="screen"> <link rel="stylesheet" href="home.css" media="screen">

但什么也没发生。

所以我想知道是否有人设法使用 Nicepage 创建 html 页面，然后在 Blazor 项目中使用它？

谢谢。

【问题讨论】：

当您说href="nicepage.css" 或"home.css" 时，应用程序将尝试查看您的应用程序运行所在的程序集内部。理想情况下，所有静态资源都放在wwwroot 文件夹中。在您的情况下，您需要通过 cdn（如果可能）获取 css，或者从 nicepage 下载 css 文件并将其放置在 wwwroot 文件夹中。
那个 nicepage.css 也应该包含在 index.html 中，而不是 razor 文件中。
您好，我在 index.html 中包含了 nicepage.css，并且还把 .css 文件放在了 wwwroot 文件夹中，但是元素排列得不好。
正如post 中提到的，我不得不更改页面的正文类。

标签： c# html css blazor

【解决方案1】：

Blazor 可能是邪恶的 :)。在我看来，它最适用于 CSS（根据该字段切换类等）。因此，如果您想在桌面上显示某些内容，请执行以下操作：

1. CSS 中的代码，如

    @media (max-width: 992px){
    .nameOfClass {
    display:none;
    }
 }

2。 Javascript：做简单模型，注入IJSRuntime，调用它，创建函数并将其用作html部分的属性

型号 -

public class WindowDimension
{
public int Height { get; set; }
public int Width { get; set; }
}

注入 IJSR - @inject IJSRuntime JS 在 .razor 页面顶部

调用例如在 OnInitialize 中也要注意命名。我有一些问题，比如 HeightOfWindow 等。

@code{
int Height { get; set; }
int Width { get; set; }
    
protected override async Task OnInitializedAsync()
          {    
            var dimension = await JS.InvokeAsync<WindowDimension>("getWindowDimensions");
            Height = dimension.Height;
            Width = dimension.Width;
          }
    }

在JS中创建函数（只能是一些JS文件中的代码+不要忘记放入索引文件。

window.getWindowDimensions = function () {

  return {
    width: window.outerWidth,
    height: window.outerHeight
  };
};

HTML

<div style:"width: @Height">.....</div>

【讨论】：