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

Improve this question
6
  • Remove that return; statement from the .cshtml file you show at the bottom. Then, move this block, await storage.GetAsync<int>("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 <head> to load the correct css. Commented Apr 8, 2021 at 1:22
  • Thanks cory for the reply.I tried the same but getting the following internal server error stackoverflow.com/questions/61438796/… Commented Apr 8, 2021 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 - devblogs.microsoft.com/aspnet/… Commented Apr 8, 2021 at 21:50
  • Influencing the HTML head in Blazor apps - will this work on dot net core 3.1 @MrC aka Shaun Curtis .Thanks Commented Apr 12, 2021 at 9:03
  • Check out the following question - stackoverflow.com/questions/14292997/…. You will need to do some JSInterop code to use it. Commented Apr 12, 2021 at 18:21
Related questions
17
How can I change css directly(without variable) in Blazor?
8
Different css files in Blazor pages
5
Blazor dynamically set CSS file
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.