ASP.NET Razor学习笔记

本文档为ASP.NET Razor的学习笔记，主要介绍Razor的基本语法和常见用法，并通过实例进行说明。

Razor基本语法

变量输出

使用@符号可以将变量输出到HTML页面上，如下所示：

htmlCopy Code
<p>欢迎来到@ViewBag.Title的页面！</p>

控制流程语句

使用if语句、for循环和while循环可以控制流程，如下所示：

htmlCopy Code
@if (ViewBag.IsLoggedIn)
{
    <p>你已经登录了</p>
}
else
{
    <p>请先登录</p>
}

@foreach (var item in ViewBag.Items)
{
    <li>@item</li>
}

@while (ViewBag.HasNextPage)
{
    <a href="?page=@ViewBag.PageNumber">下一页</a>
    ViewBag.PageNumber++;
}

HTML辅助方法

使用@Html可以调用多个针对HTML的辅助函数，如下所示：

htmlCopy Code
@Html.DisplayFor(model => model.Name)
@Html.EditorFor(model => model.Age)
@Html.ActionLink("点击链接", "Index")

实例演示

下面我们通过一个简单的实例来说明Razor的用法。

实例描述

在这个实例中，我们将制作一个简单的网页，该网页包含一个商品列表，每个商品都有名称、描述和价格。我们还将创建一个表单，以便用户可以提交新的商品。

实现步骤

步骤一：创建商品模型

在Models文件夹下创建Product.cs文件，代码如下所示：

csharpCopy Code
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
}

步骤二：创建控制器

在Controllers文件夹下创建HomeController.cs文件，并添加如下代码：

csharpCopy Code
public class HomeController : Controller
{
    private List<Product> _products = new List<Product>
    {
        new Product { Id = 1, Name = "商品1", Description = "描述1", Price = 10.00m },
        new Product { Id = 2, Name = "商品2", Description = "描述2", Price = 20.00m },
        new Product { Id = 3, Name = "商品3", Description = "描述3", Price = 30.00m }
    };

    public IActionResult Index()
    {
        return View(_products);
    }

    [HttpPost]
    public IActionResult Create(Product product)
    {
        product.Id = _products.Count + 1;
        _products.Add(product);
        return RedirectToAction("Index");
    }
}

在Index方法中，我们返回_View视图，并将_products作为参数传递。在Create方法中，我们使用[HttpPost]特性，以便当用户提交表单时调用此方法。我们还在这个方法中将新的商品添加到_products列表中。

步骤三：创建视图

在Views文件夹下创建Home文件夹，并添加两个视图：Index.cshtml和Create.cshtml。代码如下所示：

Index.cshtml

htmlCopy Code
@model List<Product>

<h2>商品列表</h2>

<a asp-action="Create">添加商品</a>

<table>
    <thead>
        <tr>
            <th>名称</th>
            <th>描述</th>
            <th>价格</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.Description</td>
                <td>@product.Price.ToString("c")</td>
            </tr>
        }
    </tbody>
</table>

Create.cshtml

htmlCopy Code
@model Product

<h2>添加商品</h2>

<form asp-controller="Home" asp-action="Create" method="post">
    <div>
        <label>名称：</label>
        <input name="Name" />
    </div>
    <div>
        <label>描述：</label>
        <input name="Description" />
    </div>
    <div>
        <label>价格：</label>
        <input name="Price" />
    </div>
    <button type="submit">提交</button>
</form>

在Index视图中，我们使用@model设置模型类型，并在页面上显示一个链接，以调用Create方法。我们还使用一个表格来显示_products列表。在Create视图中，我们再次使用@model设置模型类型，并创建了一个HTML表单，以便用户可以输入新商品的信息。

运行效果

最终我们可以得到一个简单的商品列表网页，如下所示：

ASP.NET Razor实例网页效果

当点击“添加商品”链接时，将打开一个包含表单的新页面。用户可以在这个页面中输入新商品的信息并提交表单。

结论

本文档介绍了ASP.NET Razor的基本语法和常见用法，并通过一个简单的实例演示了如何使用Razor创建一个Web应用程序。希望本文档能够帮助你理解Razor的用法并提高Web开发技能。