Asp.Net Mvc: How to Use Razor Variable in CSS File

ASP.Net MVC: How to use razor variable in CSS file

By default, MVC does not support writing server side codes in external CSS file and external Javascript files.

For your case to work, you can add an internal stylesheet in your view file itself, it will work.

Eg:

@{
    ViewBag.Title = "Title";
}
<style>
    .test {
        background: url('@Model.LogoUrl') no-repeat scroll 0 0 transparent;
    }  
</style>

Concatenating the Razor Variables with CSS Styles

Try this:

<div style="background-image: url('@Model.SpriteSheetUrl'); width: 60px; height: 60px;background-position: 0px @(positionY + "px"))> </div>

The @() renders whatever is written inside of it as a literal, so you should get "60px" as the output.

ASP.NET MVC Razor and css block

I believe you can use LESS Css for .NET http://www.dotlesscss.org/

How to assign C# variable to CSS class variable in ASP.NET MVC ActionLink

This can be do by two ways one is by setting value in ViewModel class or by setting value in ViewBag, ViewData or TempData.

Way 1) Preffered way Strongly Typed: Set css class name to viewmodel class attribute:

Class Student
{
  public ID BIGINT {get; set;}
  ... //other properties

}

Class StudentViewModel : Student
{
   public CssClass string {get; set;}
}

//controller action

public ActionResult Index(){
  StudentViewModel objModel; 
  //initialize model

  objModel.CssClass = "myCssClass"; //set css class name to viewmodel 
  return View(objModel);
}

//in view use code like below:

@model namespace.StudentViewModel;
@Html.ActionLink("Manage List", "Index", new { @class =  Model.CssClass })

Way 2) Set css class name to viewbag / viewdata / tempdate. But this is not prefered.

//controller action

public ActionResult Index(){

  ViewBag.CssClass = "myCssClass"; //set css class name to ViewBag
  //or
  ViewData["CssClass"] = "myCssClass"; //set css class name to ViewData
  //or
  TempData["CssClass"] = "myCssClass"; //set css class name to TempData

  return View();
}

//in view use code like below:

@Html.ActionLink("Manage List", "Index", new { @class =  @ViewBag.CssClass })
//Or
@Html.ActionLink("Manage List", "Index", new { @class =  @Convert.toString(ViewData["CssClass"]) })
//Or
@Html.ActionLink("Manage List", "Index", new { @class =  @Convert.toString(TempData["CssClass"]) })

Please let me know, is this works for you?

Passing variable into @Styles.Render function

First, Session is dynamic, meaning it can hold any type inside. When you just pull out a value, it's technically of type object. Styles.Render expects a parameter of type string, so you need to cast the value to a string first:

@Styles.Render(@Session["cssTheme"] as String)

Then, there's the problem that you could potentially receive a null value if either that session variable is not set at all, or has been set to something other than a string value that can't be converted to a string. So, to compensate for that, you should provide some fallback for nulls:

@Styles.Render(@Session["cssTheme"] as String ?? "~/Content/css")

Now, it will either use whatever is in the session variable, or "~/Content/css" as a last resort. Bear in mind though, that this is still pretty brittle. If Session["cssTheme"] is set to a string, but not a properly formatted bundle reference, you'll still get an error, and a runtime error at that, which is ugly. Ideally, you should have some sort of value sanitization routine that you run Session["cssTheme"] through first before passing it to Styles.Render.

How to add a second css class with a conditional value in razor MVC 4

I believe that there can still be and valid logic on views. But for this kind of things I agree with @BigMike, it is better placed on the model. Having said that the problem can be solved in three ways:

Your answer (assuming this works, I haven't tried this):

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

Second option:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

Third option:

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

---

Related Topics