Functions inside page using Razor View Engine – ASP.NET MVC

As we already know, Razor is probably the best view engine for ASP.NET MVC so far. It keeps your code fluid and very expressive.

Besides the other functionalities Razor has, it also supports writing local functions.

If you want to write a function, you can’t just open new @{ } razor block and write it there… it won’t work. Instead, you should specify @functions { } so that inside the brackets you will write your own C#/VB.NET functions/methods.

Lets see an example:

1. I have the following loop that prints data using Razor

<ul>
@{
    int N = 10;
    for (int i = 1; i<=N; i++)
    {
        <li>Number @i</li>
    }    
}
</ul>

This code will print the numbers from 1 to 10:

  • Number 1
  • Number 2
  • Number 3
  • Number 4
  • Number 5
  • Number 6
  • Number 7
  • Number 8
  • Number 9
  • Number 10

So, now lets write a function that will check if current number is even, if yes… add Even before Number word.

Function in Razor

@functions{
    public bool isEven(int number)
    {
        return number % 2 == 0 ? true : false;
    }
}

The modified code which creates unordered list is:

<ul>
@{
    int N = 10;
    for (int i = 1; i<=N; i++)
    {
        if (isEven(i)) {
            <li>Even number @i</li>
        }
        else {
            <li>Number @i</li>
        }            
    }            
}
</ul>

As you can see, in the modified code we use the isEven(i) function to check if the current number is even or not…

The result is:

  • Number 1
  • Even number 2
  • Number 3
  • Even number 4
  • Number 5
  • Even number 6
  • Number 7
  • Even number 8
  • Number 9
  • Even number 10

So, the main point of this blog was to show how you can define your own functions inside page using Razor View Engine. Of course you can define multiple functions inside the same @functions { } defined razor statement.

The complete code:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>ASP.NET MVC - Razor View Engine :: Functions</title>
</head>
<body>
    <div>
        <ul>
        @{
            int N = 10;
            for (int i = 1; i<=N; i++)
            {
                if (isEven(i)) {
                    <li>Even number @i</li>
                }
                else {
                    <li>Number @i</li>
                }            
            }            
        }
        </ul>

        @functions{
            public bool isEven(int number)
            {
                return number % 2 == 0 ? true : false;
            }
        }
    </div>
</body>
</html>

Hope you like it.

Regards,
Hajan

8 Comments

  • Thanks, this IS informative.

    Arun

  • That's a nice tip. Thanks for sharing.

  • Why should I want to add functions to the page? I like to have clean and readable pages, so I prefer to choose the "old" style helper methods.

    Anything I have missed so far?

  • Worst idea ever. Functions have no business in views.

  • @Arun, @Koistya `Navin, @Alex, @Dave - thanks for the comments.

    @Alex, yep... I probably agree with you. However, there might be some cases where using functions inside the page View might be useful.

    @Dave Van den Eynde, if not... then why they are included as an option? Yes, because of flexibility... still I won't go much with using functions since the MVC model itself provide enough good pattern to separate layers... But, for some very minor logic that might be very much related to the VIEW, you can still use @functions {}. Simply, put it somewhere up or down in the page where it won't mix with your standard HTML code.

    Thanks for the comments once again ;)

  • Thanks for sharing valuable information, but I have some confusion about the statement as mentioned;

    "As you can see, in the modified code we use the isEven(@i) function to check if the current number is even or not…".

    Why I can not use "isEven(i)" and why I need to use "isEven(@i)"?

  • @Rais, nice catch. You can use either way & both are applicable. I didn't mentioned that, neither specified that only one can be used, but was actually referring to the isEven function and how you can call it once we have defined it inside the @functions block. I changed it to make the code clearer ;).

    Thanks.
    Hajan

  • Nice tip.
    To those who say functions have no business in view, I think you are not understanding the intent of the function. It is a VIEW function. Every heard of JQuery? Its a hit.

    If you have the luxury of designing simple interfaces , great. But when you have complex UX requirements that require more than simple layout, your going to use combination of JQuery or razor VIEW functions to meet requirements.

Comments have been disabled for this content.