If condition not working in HTML page with C# code

Question

I'm using the following code to populate the table with data. The if statement is not working as i expected. Both the statements in the conditional blocks are executed.

  @if (--somecondition--)
  {
         <table>  
         foreach (Message userMessage in UserMessages)
         {                               
              <tr>
                  if(@userMessage.Message.MessageText.Length <= 10)
                  {
                      <td>
                          @userMessage.Message.MessageText
                      </td>
                  }
                  if(@userMessage.Message.MessageText.Length > 10)
                  {
                      <td>
                           @userMessage.Message.MessageText.Substring(0, 10)
                      </td>
                  }    
              </tr>        
         }
    </table>
}

What am i missing here? Isnt such use not possible?

EDIT (after seeing the answer):

I thought -

Once inside code, you do not need to prefix constructs like "if" with "@"

Answer 1

You need to start with @...

@foreach (Message userMessage in UserMessages)
{

and...

@if(userMessage.Message.MessageText.Length <= 10)
{

Without it at the start, the if( is still treated as HTML.

---

The @ symbol identifies the start of your Razor syntax (i.e. C# code) and will continue to be a razor code block until an appropriate terminator has been reached. There are a number of ways to move it back to HTML, the one most commonly seen in your example is to include a html tag, such as <td>.

Here is the complete version of your code, hopefully it will help you understand how it should work:

<table>
//due to the table tag, we are current inside HTML 
//so we need to use the @ symbol to move back to razor syntax
@foreach (Message userMessage in UserMessages)
{                               
    <tr>
    //using this tag again changes us back to HTML mode
    //so again we must use the at symbol
    @if(userMessage.Message.MessageText.Length <= 10)
    {
        //still Razor
        <td>
        //back in HTML mode
             @userMessage.Message.MessageText
        </td>
    }
    @if(userMessage.Message.MessageText.Length > 10)
    {
        <td>
             @userMessage.Message.MessageText.Substring(0, 10)
        </td>
    }    
    </tr>        
}
</table>

(I know these comments wont work in Razor so don't add them)

---

And to clear up what you initially thought. If you didn't have the first <tr> tag, then the following would work...

@foreach (Message userMessage in UserMessages)
{
   if(userMessage.Message.MessageText.Length <= 10)
   {

Notice how the whole if statement line doesn't required an @ symbol, because we never moved back to HTML mode.

Answer 2

The problem with your code is that you mix up what's HTML and what's Razor. The @ sign is supposed to be where your Razor code starts and then you don't need to use it inside of the Razor code.

When you write if(@userMessage.Message.MessageText.Length <= 10) then if is not seen as Razor code but part of the HTML. So everytime you leave the HTML and go into Razor mode you need to have a @ mark. The if statement should instead look like @if(userMessage.Message.MessageText.Length <= 10).

A complete example of your code would look like:

<table>  
@foreach (Message userMessage in UserMessages)
{                               
  <tr>
    @if(userMessage.Message.MessageText.Length <= 10)
    {
      <td>
        @userMessage.Message.MessageText
      </td>
    }

    @if(userMessage.Message.MessageText.Length > 10)
    {
      <td>
        @userMessage.Message.MessageText.Substring(0, 10)
      </td>
    }    
  </tr>        
</table>