Custom UI template doesn't work in blazor-server

Asrar Ahmad Ehsan 1

I have created a blazor server project and wanted to change the default UI template and use another admin dashboard bootstrap template (LEMA admin dashboard template). So I followed this YouTube Video but the problem is that the sidebar is not showing. When I comment the blazor script out then the template works properly and If I uncomment the blazor script the again the template breaks and not shown properly.
I have tried many solutions like rendering js files using JsInterop but didn't work.
Any Help to solve the issue?

Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

2022-09-24T01:40:53.443+00:00

Hi @Asrar Ahmad Ehsan ,

When I comment the blazor script out then the template works properly and If I uncomment the blazor script the again the template breaks and not shown properly.
I have tried many solutions like rendering js files using JsInterop but didn't work.

Try to use F12 developer Console tools to check is there any error? Perhaps there is something wrong in the JS script.

Besides, it is better to share the relates code or create a Minimal, Complete, and Verifiable example to reproduce the problem, and then share it with us via Github, so that we can help you to narrow down the problem and help you fix it.

Best regards,
Dillion
Asrar Ahmad Ehsan 1 Reputation point

2022-09-24T14:57:59.437+00:00

Thanks for reply.

There is no error shown in the Console tools and for demonstrating my problem I created a GitHub repository and uploaded the project with the template so others can check what the problem is.

GitHub link: blazortemplate
Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

2022-09-26T08:14:49.62+00:00
Hi @Asrar Ahmad Ehsan ,

Please check your GitHub sample and the YouTube Video you followed, from your code, I can't find the relate code, such as:

The DropDownList to change style and the relates code block in the MainLayout.cshtml page

The Style API controller to append the selected style to cookie. And the API controller route configuration in the Program.cs file.

The If-Else statement in the _Host.cshtml page to change the style reference.
So, I suggest you re-examine the YouTube Video and follow the steps to create a sample.

Best regards,
Dillion
Asrar Ahmad Ehsan 1 Reputation point

2022-09-29T20:18:26.707+00:00

I thinks there is a misunderstanding, I don't want to change the theme or style I want to change the whole HTML template.
My GitHub code when it is run not showing the web app properly as the sidebar is not displayed.
Zhi Lv - MSFT 32,021 Reputation points Microsoft Vendor

2022-09-30T09:52:47.147+00:00
Hi @Asrar Ahmad Ehsan ,

If using F12 developer Console tools to check your website, there has some CSS and JS reference error. Perhaps the issue relates to them. The files not exist in the wwwroot folder.

Check the relate files in the wwwroot folder, and add the file reference like this:

Or

<link rel="stylesheet" href="~/css/bootstrap/bootstrap.min.css" />