Cleanest way to have inline code blocks using the ASP.NET Razor view engine?

Question

This works:

<li @{if (Model.Mode == "map") {<text> class="bselected"</text>}}>@Html.ActionLink("Map & Directions", MVC.Biz.Show(Model.SingleBiz.BizName, "map", string.Empty))</li>

But it's ugly... Is there a better, cleaner way to do this? in this code, I'm checking if some view data is null or empty, if so add a class.

Or is there another technique to accomplish accomplish this better?

Answer 1

I posted some Html Extension methods yesterday that handle this kind of thing:

How to concisely create optional HTML attributes with razor view engine?

Using this approach would give you the following Razor syntax:

<li @Html.Css("selected", Model.Mode == "map" )>STUFF</li>

NOTE: you can chain attributes together to build up attribute values based upon multiple conditions. For example:

<li @Html.Css("selected", true).Add("winner", false).Add("last", true)>STUFF</li>

would output:

<li class="selected last">STUFF</li>

Also, if the resultant attribute value is empty the attribute will collapse to keep your html tidy.

Answer 2

Or you could do something like this:

@{
    var cssClass = (Model.Mode == "map") ? "selected" : "";
}

<li class="@cssClass">@Html.ActionLink("Map & Directions", MVC.Biz.Show(Model.SingleBiz.BizName, "map", string.Empty))</li>