CODEWITHSUNDEEP
cssasp.net-core.net-coresassasp.net-core-mvc
Vyas Senthil
Vyas Senthil

Reputation: 153

.Net Core MVC 3.1 - How to change css (or scss) global variable, dynamically based on Session Values?

How can I dynamically change global variable in css (or scss) in .net core mvc 3.1 based on session values which are also dynamically reloaded and changed if necessary when going between different pages?
This is what I have done so far. But please also suggest other methods like if I have to use different technologies like LESS or just plan css or anything else for that matter. Would be nice, if i can edit css global variables from the controller. Thanks in Advance :)

Upvotes: 0

Views: 844

Answers (1)

Vyas Senthil
Vyas Senthil

Reputation: 153

I was finally able to fix this problem. I created a new themecontroller and set the stylings in them using session values on a action that returns partial view.

public class ThemeController : Controller
{
    public IActionResult ThemeManager()
    {
        
        ThemeModel themeModel = HttpContext.Session.GetObject<ThemeModel>("ThemeSettings");

        if(themeModel == null)
        {
            themeModel = new ThemeModel();
        }
        themeModel.primaryColor = "red";


        //var colors = await _apiService.GetThemeColors();
        Response.ContentType = "text/css";                        
        return PartialView(themeModel);
    }
}

I then put this into my layout file like below,

<link href="@Url.Action("ThemeManager", "Theme")" rel="stylesheet" type="text/css" />

Now in the partial View,

@model ThemeModel
@{
    var color = Model.primaryColor;
}
<style>
   @if (color == "red")
    {
        @:.image{ box-shadow: 10px 10px 5px #ccc;-moz-box-shadow: 10px 10px 5px #ccc;-webkit-box-shadow: 10px 10px 5px #ccc;-khtml-box-shadow: 10px 10px 5px #ccc;}
    }
    else
    {
        @:.image{}
    }
</style>

Upvotes: 1

Related Questions