0

I would like to append two different CSS files based on session state user_id in an ASP.NET Core Blazor project (Server-side Blazor).

I have two css file for user 1 & 2

For example:

  1. If its user 1 css site1 should be appended on _Host.cshtml.
  2. If its user 2 css site2 should be appended on _Host.cshtml.

And the user_id= 1 and Userid = 2 in P

1.var user_id = await storage.GetAsync<int>("user");

this how the User_id is taken using await async. Now the requirement is to take the user_id on _host.cshtml so that

On _Host.cshtml

@if(user_id ==1)
{
<link href="css/site1.css" rel="stylesheet" />          
}
else if (user_id ==2)
{
<link href="css/site2.css" rel="stylesheet" /> 
}

Now iam unabe to use function (await storage.GetAsync(User_id);) on _host.cshtml

This is how a _Host.cshtml page looks 

@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta charset="utf-8" />
    <title>ProjectName</title>
    <link rel="icon" type="image/png" sizes="32x32" href="images/tenantA/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/tenantA/favicons/favicon-16x16.png">
</head>
<body class="something">
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.Server))
    </app>

    <script src="_framework/blazor.server.js"></script>
    <link href="css/tenantA/site.css" rel="stylesheet" />
</body>
</html>

Now i need to get user_id on cshtml which is await call

    @page "/"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@if(User_id =="1")
{
    <link href="css/site1.css" rel="stylesheet" />          
    return;
}

<!DOCTYPE html>
<html lang="en">
<head>
....
...
..
.

This one is currently stopping my project . Please help me as soon as possible

ijaz noufal
  • 11
  • 2
  • Remove that `return;` statement from the .cshtml file you show at the bottom. Then, move this block, `await storage.GetAsync("user");`, to the top of the `_Host.cshtml` file in an `@{}` section below `@page`. Get the user id, and use the if statement you have in the `` to load the correct css. – Cory Podojil Apr 08 '21 at 01:22
  • Thanks cory for the reply.I tried the same but getting the following internal server error https://stackoverflow.com/questions/61438796/javascript-interop-error-when-calling-javascript-from-oninitializedasync-blazor – ijaz noufal Apr 08 '21 at 13:41
  • I'm not sure how this will work. The _Host.cshtml page is the launch page for a Blazor Application. It isn't the application, so you don't have a user context until the app starts. What you need to do is load the Css after the app starts - see this section of an article on how to change the header info after the SPA has started - https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-preview-8/#influencing-the-html-head-in-blazor-apps – MrC aka Shaun Curtis Apr 08 '21 at 21:50
  • Influencing the HTML head in Blazor apps - will this work on dot net core 3.1 @MrC aka Shaun Curtis .Thanks – ijaz noufal Apr 12 '21 at 09:03
  • Check out the following question - https://stackoverflow.com/questions/14292997/changing-style-sheet-javascript. You will need to do some JSInterop code to use it. – MrC aka Shaun Curtis Apr 12 '21 at 18:21
  • Thanks you so much @MrC aka Shaun Curtis your reply was really helpfull . Its was almost what i was in need of. But now as _host.cshtml is loaded for each blazor page ,every time when i navigate to other page a fraction of sec i see the style getting overrided.which is not good with client . Can you help me on this – ijaz noufal Apr 15 '21 at 11:52

0 Answers0