Elanat Framework

Posted on Aug 14

View design with Razor syntax

#tutorial #dotnet #beginners #backend

The CodeBehind framework, developed by the Elanat team, represents a modern approach to web development under ASP.NET Core. It reintroduces the classic aspx extension while incorporating contemporary features like Razor syntax for view design. This allows developers to create dynamic, server-side rendered pages with a syntax that feels familiar to those experienced with ASP.NET Core's Razor Pages, but with enhancements tailored for performance and modularity. Unlike traditional frameworks, CodeBehind emphasizes a clear separation between server-side logic and HTML markup, enabling flexible development patterns such as MVC, Model-View, or even standalone views. In this article, we'll explore how to design views using Razor syntax in CodeBehind, drawing from its reference documentation and highlighting key differences and best practices.

Understanding ASPX Extension and View Pages in CodeBehind

In the CodeBehind framework, the aspx extension serves as the foundation for view files, functioning as the presentation layer where HTML markup integrates with dynamic content. These aspx pages support two primary syntaxes: the standard syntax (reminiscent of classic ASP.NET with inline code like <%= Expression %>) and Razor syntax (using @ for code expressions), providing developers with options based on their preferences or project needs. View pages in CodeBehind are designed to handle incoming requests directly, where attributes at the top of the file define associated controllers and models, ensuring a modular structure that promotes reusability across projects. This approach differs from Microsoft's Razor Pages, which use cshtml files and may blend concerns more closely. Razor syntax in CodeBehind framework may exhibit minor syntactical variations due to its independent development.

Razor Syntax in CodeBehind: Key Concepts

Razor syntax in the CodeBehind framework is applied directly within aspx files, automatically detected and processed without the need for mixing it with standard syntax. It's highly similar to the Razor syntax used in cshtml pages in ASP.NET Core, but since it was built independently by the Elanat team, there might be subtle differences in error handling or edge cases. Importantly, if errors occur in Razor-based aspx pages, they won't mirror those in .NET Core's cshtml files exactly. To enable Razor syntax, every such page must start with the @page directive.

Here's a basic example of an HTML page combined with Razor syntax in CodeBehind:

@page
@controller YourProjectName.DefaultController
@model YourProjectName.DefaultModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@model.PageTitle</title>
</head>
<body>
    @model.BodyValue
</body>
</html>

This structure defines the page as a view, links it to a specific controller and model, and embeds dynamic content like @model.PageTitle directly into the HTML.

Escaping Razor Syntax

To prevent the @ symbol from being interpreted as the start of a Razor expression, simply double it:

<p>@@user</p>

This renders as <p>@user</p> after compilation.

For emails or text where @ appears naturally (e.g., yourname@example.com), Razor intelligently ignores it if surrounded by alphanumeric characters, preserving the content intact:

<p>Example of an email: yourname@example.com</p>

Implicit Razor Expressions

Start expressions with @ followed by C# code for seamless integration:

<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2024)</p>

These evaluate at runtime, injecting the results directly into the markup.

Page Attributes in Razor Syntax

CodeBehind supports several attributes at the top of the view page, each on a single line. These configure the page's behavior:

Model Attribute: Links the view to a model class.

  @model YourProjectName.DefaultModel

Controller Attribute: Specifies the controller class.

  @controller YourProjectName.DefaultController

Layout Attribute: Defines a layout file path.

  @layout "/main-layout.aspx"

Template Attribute: Sets a template file.

  @template "/templates/template1.aspx"

Break Attribute: Halts further processing (used sparingly).

  @break

IsLayout Attribute: Marks the page as a layout.

  @islayout

Code Blocks

Enclose multi-line C# code in @{ }:

@{
    string Note = "Elanat CMS was created to be a reliable system in .NET and an honor for .NET programmers and can be compared to other systems under PHP and JAVA.";
}

<p>@Note</p>

This allows variable declarations, logic, and more within the view.

Control Structures

Razor supports standard C# control flows, such as loops:

Foreach Loop Example:

@foreach (NameValue nv in NameValues)
{
    <b>Name: @nv.Name</b>
    <p>Value: @nv.Value</p>
}

Special Cases and Considerations

When using apostrophes ('), quotes ("), or backticks in code blocks, ensure the closing brace } is on a new line to avoid parsing issues:

Incorrect (may cause errors):

@if (IsTrue)
{
    <p>You don't do it.</p>}<b>bold text</b>

Correct:

@if (IsTrue)
{
    <p>You don't do it.</p>
}
<b>bold text</b>

Unlike ASP.NET Core's cshtml pages, CodeBehind allows coding within conditional blocks and loops. For JavaScript in these blocks, prefix lines with @: to distinguish them from C# code.

Conclusion

Designing views with Razor syntax in the CodeBehind framework offers a powerful, efficient alternative to traditional ASP.NET Core methods. By leveraging aspx files with familiar Razor constructs, developers can achieve cleaner separation of concerns, faster performance, and greater modularity. While it shares much with Microsoft's Razor, the Elanat team's independent implementation ensures unique optimizations and potential minor differences—always test thoroughly for your specific use case. For more advanced patterns, explore combining these views with CodeBehind's MVC or Web-Forms-like approaches to build robust applications.

DEV Community