Last year I wrote a blog post about how you could keep logic out of your ASP.NET MVC views.

Now with the introduction of the Razor view engine for ASP.NET MVC, I thought it would be a good idea to do a ‘Razor’ version.

The code used in this post can be downloaded here.

If you recall the reasons you should not have logic in your views are because they will become difficult to read, maintain and test at the very least.

How to decide what CSS class to use for the stock level in a Razor view

The screenshot below shows the three possible messages displayed to the user depending on the number of units in stock.

An example of a Razor view with conditional logic

We could select the CSS class for the corresponding number of units in stock using multiple if statements like this

@inherits System.Web.Mvc.WebViewPage<KeepLogicOutOfYourRazorViews.Models.Product>
@using KeepLogicOutOfYourRazorViews.Helpers

@{
	View.Title = "Index";
	LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<div class="example">
@if(Model.UnitsInStock == 0){
								<div class="stockLevel stockLevelNone">
									<span>Number Of Units In Stock: @Model.UnitsInStock</span>
								</div>
							}
@if(Model.UnitsInStock > 0 && Model.UnitsInStock <= 20)
							{
								<div class="stockLevel stockLevelLow">
									<span>Number Of Units In Stock:	@Model.UnitsInStock</span>
								</div>
							}
@if(Model.UnitsInStock > 20){
								<div class="stockLevel stockLevelHigh">
									<span>Number Of Units In Stock: @Model.UnitsInStock</span>
								</div>
							}
</div>

but there are better ways to achieve our goal.

So what are the alternatives?

We could:

• Move the logic for choosing the CSS class into a helper method
• Create a method to build the HTML for displaying the number of units in stock
• Use a Product data transfer object with a CSS class name property
• Pass all the CSS classes to a method which will return the CSS class to use

As I want to concentrate on showing code for Razor view engine, if you want to see the methods, unit tests and discussion about the advantages and disadvantages of each option please refer to the original post.

What the view would look like if we used a method to get the CSS class in a Razor view

The code below shows how we could achieve the same result by calling a method which returns the CSS class for the number of units in stock.

@inherits System.Web.Mvc.WebViewPage<KeepLogicOutOfYourRazorViews.Models.Product>
@using KeepLogicOutOfYourRazorViews.Helpers

@{
	View.Title = "Index";
	LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<div class="example">
	<div class="stockLevel @ProductCssHelper.GetCssClassForUnitsInStock(Model.UnitsInStock)">
		<span>Number Of Units In Stock: @Model.UnitsInStock</span>
	</div>
</div>

What the view would look like if we passed the CSS classes to a method in a Razor view

Alternatively, a more designer friendly way would be to pass the CSS classes to a method which returns the appropriate CSS class to use for the stock level.

@inherits System.Web.Mvc.WebViewPage<KeepLogicOutOfYourRazorViews.Models.Product>
@using KeepLogicOutOfYourRazorViews.Helpers

@{
	View.Title = "Index";
	LayoutPage = "~/Views/Shared/_Layout.cshtml";
}

<div class="example">
	<div class="stockLevel
		@ProductCssHelper.SelectCssClassForUnitsInStock(
														 Model.UnitsInStock,
														 "stockLevelNone",
														 "stockLevelLow",
														 "stockLevelHigh"
													   )">
		<span>Number Of Units In Stock: @Model.UnitsInStock</span>
	</div>
</div>

Jag Reehal’s Final Thought on ‘ASP.NET MVC Razor View Best Practices – Keep logic out of your Razor views’

Razor does a fantastic job of cleaning up your views, but to keep them even cleaner the best practice to keep logic out of yours view still applies.