Question

I’m using MVC3 and Spark.

I need to add a class to a LI if a certain ViewBag element is set to X.

<li id="menu-home" class="active?{ViewBag.Active=='home'}" >${Html.ActionLink("Home", "Index", "Site")}</li>

Like the above. This doesnt work, however wondering if there is a way to approach this?

Answer 1

Here are the steps I took and it worked for me:

1. Create a new ASP.NET MVC 3 project using the default template and the Razor view engine
2. Install the Spark.Web.Mvc3 NuGet package.

3. Change the Index action of HomeController to look like this:

   public ActionResult Index()
   {
       ViewBag.Active = "home";
       return View();
   }
   

4. Rename ~/Views/Home/Index.cshtml to ~/Views/Home/Index.spark and make it look like this:

   <li id="menu-home" class="active?{ViewBag.Active == 'home'}">
       ${Html.ActionLink("Home", "Index", "Site")}
   </li>
   

5. Run the project

6. The generated HTML is:

   <li id="menu-home" class="active">
       <a href="/Site">Home</a>
   </li>
   

Remark: Everytime I see someone using ViewBag instead of strongly typed views with view models I feel in the obligation to point this as a bad practice.