Web Pages Razor

In web development, Razor is a popular template engine that can be used to generate dynamic web pages. The Razor template engine combines C# code and HTML markup to enable developers to easily build flexible and easy-to-maintain web applications.

Razor syntax

The Razor template engine uses a unique syntax that seamlessly combines C# code and HTML markup. Here are some common Razor syntax examples:

1. Razor comments

Razor comments are enclosed in @*and *@enclosed, similar to C#'s multi-line comments. For example:

@* 这是一个Razor注释 *@

2. Declare variables

To declare variables in Razor templates, you can use @{ }code blocks. For example:

@{
    var name = "John";
}

3. Output variable value

To output the value of a variable in HTML, you can use @symbols. For example:

<p>Welcome, @name!</p>

4. Conditional Statements

The Razor template engine supports building conditional statements using if, , else ifand . elseFor example:

@if (condition) {
    // 执行某些操作
}
else if (anotherCondition) {
    // 执行其他操作
}
else {
    // 执行默认操作
}

5. Loop statement

The Razor template engine supports using foreachand forto build loop statements. For example:

@foreach (var item in items) {
    <p>@item</p>
}

@for (var i = 0; i < count; i++) {
    <p>@i</p>
}

6. Razor layout

The Razor template engine allows the use of layouts to define a shared page structure. @{ Layout = "Layout.cshtml"; }Layout files can be specified using directives. For example:

@{
    Layout = "Layout.cshtml";
}

Interaction between Razor and HTML

The power of the Razor template engine is that it can easily combine C# code and HTML markup. Here are some examples of common Razor-HTML interactions:

1. Generate HTML markup using C# variables

The Razor template engine allows dynamic HTML markup to be generated using C# variables. For example:

@foreach (var item in items) {
    <p>@item</p>
}

2. Use HTML tags to call C# methods

The Razor template engine allows using HTML markup to call C# methods and output the results. For example:

<p>Total: @CalculateTotal()</p>

@{
    decimal CalculateTotal()
    {
        // 执行计算逻辑
        return 100.50m;
    }
}

Use conditional statements to control HTML display

The Razor template engine allows controlling the display of HTML using conditional statements. For example:

@if (isAdmin) {
    <button>Delete</button>
}

Razor sample code

The following is a simple Razor sample code that shows how to use the Razor template engine to generate dynamic web pages:

@{
    var items = new List<string> { "Apple", "Banana", "Orange" };
}

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>

    <ul>
        @foreach (var item in items) {
            <li>@item</li>
        }
    </ul>

    @if (isAdmin) {
        <button>Delete</button>
    }
</body>
</html>

The above sample code demonstrates how to use the Razor template engine to generate a web page that contains a dynamic list and buttons that are displayed based on conditions.

Knot

The Razor template engine provides web developers with a flexible and powerful tool that makes it easier for them to build dynamic web pages. By combining C# code and HTML markup, Razor makes the development process more concise and easier to maintain. I hope this article is helpful for understanding and using the Razor template engine!

Note: The above sample code is for demonstration purposes only, please modify and optimize it according to specific needs in actual use.

[ASP.NET Tutorial-WP Tutorial 02] Web Pages - Razor template engine C# code and HTML markup