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

Question

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

但我想把这个项目转换成Blazor项目，所以我可以使用一些C#代码。

为了实现这一点，我将html页面的代码复制/粘贴到一个剃刀文件中，除了脚本标记(我将它们放入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项目中使用它？

谢谢。

Answer 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; }
}

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

调用，例如在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>