Question

Trying to create code section within an If condition throws error:
Unexpected “section” keyword after “@” character. Once inside code, you do not need to prefix constructs like “section” with “@”.

Example 1:Create section when needed
@If bIsMobile = True Then
@section PageFooter
    <div data-role="navbar">
        <ul>
            <li><a href="#">Add</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
            <li><a href="#">Search</a></li>
            <li><a href="#">Refresh</a></li>
        </ul>
    </div>
End Section
End If

Obviously we could move the condition inside the section, but this forces processing of empty section blocks:

Example 2:Creates empty section
@section PageFooter
@If bIsMobile = True Then
    <div data-role="navbar">
        <ul>
            <li><a href="#">Add</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
            <li><a href="#">Search</a></li>
            <li><a href="#">Refresh</a></li>
        </ul>
    </div>
End If
End Section

How can we implement Example #1

Answer 1

@section blocks can only appear in markup context. Thanks to SLacks for this answer.

@If bIsMobile = True Then
<text>
   @section PageFooter
     <div data-role="navbar">
        <ul>
            <li><a href="#">Add</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
            <li><a href="#">Search</a></li>
            <li><a href="#">Refresh</a></li>
        </ul>
     </div>
   End Section
</text>
End If

And check in _Layout page whether section is defined for non mobile pages. Otherwise it will throw an exception stating that the “PageFooter” section wasn’t defined.

<footer>
  @If IsSectionDefined("PageFooter") Then
      RenderSection("PageFooter")
  End If
</footer>