WebPages Razor学习笔记

什么是Razor?

Razor是用于在.NET Web应用程序中创建动态Web页面的一种视图引擎。它可以作为ASP.NET Web Pages, ASP.NET MVC和ASP.NET Core的视图引擎。

Razor视图引擎使用一种混合语法,将C#代码与HTML标记结合在一起,从而使页面更加动态且易于维护。

Razor基础语法

Razor注释

使用@符号加上单行注释符号"//"可以在Razor页面中添加单行注释:

htmlCopy Code
@// This is a single-line comment

对于多行注释,可以使用@@符号:

htmlCopy Code
@* This is a multi-line comment *@

Razor变量

在Razor中,可以通过@符号将C#变量插入到HTML标记中。例如:

htmlCopy Code
<p>Current date: @DateTime.Now</p>

Razor控制结构

if/else

可以使用@if,@else和@else if语句来创建条件逻辑块:

htmlCopy Code
@if (condition) { <p>This will show if the condition is true</p> } else if (anotherCondition) { <p>This will show if the anotherCondition is true</p> } else { <p>This will show if neither is true</p> }

循环

使用@for或@foreach语句可以创建循环结构:

htmlCopy Code
@for (int i = 0; i < 10; i++) { <p>The current value of i is @i</p> } @foreach (var item in collection) { <p>The current item is @item</p> }

Razor部分视图

使用@{...}可以在Razor页面中定义代码块,这可以用于在页面中嵌入C#代码。

此外,还可以使用@RenderSection方法来呈现其他部分视图:

htmlCopy Code
<!-- _Layout.cshtml --> <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div id="content"> @RenderBody() </div> <div id="sidebar"> @RenderSection("sidebar", required: false) </div> </body> </html>
htmlCopy Code
<!-- MyPage.cshtml --> @{ ViewBag.Title = "My Page"; } @section sidebar { <p>This is the sidebar content for MyPage</p> } <p>This is the body content for MyPage</p>

实例

假设我们正在开发一个电子商务网站,我们有一个产品列表页面,要在该页面上显示一些产品。产品信息存储在数据库中,并且我们需要通过调用代码来检索它们。

我们可以创建一个名为_Products.cshtml的部分视图,用于呈现产品列表:

htmlCopy Code
@model IEnumerable<Product> <table> <tr> <th>Name</th> <th>Description</th> <th>Price</th> </tr> @foreach (var product in Model) { <tr> <td>@product.Name</td> <td>@product.Description</td> <td>@product.Price</td> </tr> } </table>

然后,在我们的列表页面中,我们可以使用@Html.Partial方法来呈现产品列表部分视图:

htmlCopy Code
@{ ViewBag.Title = "Product List"; var products = GetProductsFromDatabase(); } <h1>Product List</h1> @Html.Partial("_Products", products)

这将呈现_Products部分视图,并传递从数据库中检索到的产品列表作为模型。