Convert static html page to Blazor Page

Question

I have build a static website, a long time ago, with Nicepage.

But i want to convert this project into a Blazor project, so i can use some C# code.

To achieve this, i copy/paste the code of a html page, into a razor file, except the script tags (i put them into index.html).

The issue is that elements are not well render.

For example, i have an image that i want to be visible only on desktop, and not on mobile. After i switch the project on Blazor, the image is not visible on desktop and mobile. I saw that nicepage as a global css file, and a specific css file for the html page. So i add them into the razor page

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

But nothing happened.

So i would like to know if anyone has managed to create html page with Nicepage, and then use it in a Blazor project?

Thank you.

When you say `href="nicepage.css"` or `"home.css"` the application will try look inside the assembly where your application running. Ideally, all static resources are placed inside `wwwroot` folder. In your case either you need to fetch the css though `cdn` (if possible) or download the css file from _nicepage_ and place it `wwwroot` folder. — Suprabhat Biswal, Jan 30 '21 at 17:27
That nicepage.css should also be included in index.html, not in the razor file. — H H, Jan 30 '21 at 18:25
Hi, i included the nicepage.css in the index.html, and also placed .css files in wwwroot folder but the elements are not well arranged. — Samih EL SAKHAWI, Jan 30 '21 at 21:41
As mention in this [post](https://stackoverflow.com/questions/61659727/how-to-change-css-or-class-of-body-element-in-blazor), i had to change the body class of my page. — Samih EL SAKHAWI, Feb 20 '21 at 22:58

score 0 · Answer 1 · answered Sep 10 '21 at 05:59

Blazor can be evil :). It works best with CSS (switching classes according to that field etc.) in my opinion. So if you want to display something on desktop do:

1. code in CSS like

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

2. Javascript: Do simple model, inject IJSRuntime, invoke it, create function and use it as property in html part

Model -

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

Inject IJSR - @inject IJSRuntime JS at top of .razor page

Invoke e.g. in OnInitialize also be aware of naming. I had some issues when I had it like HeightOfWindow etc.

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

Create function in JS (can be only code in some JS file + do not forget to put in index file.

window.getWindowDimensions = function () {

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

HTML

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

Convert static html page to Blazor Page

1 Answers1