【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

喵叔哟2024-01-14 12:11

一、Views和Razor语法基础

1.1 Views概述

在ASP.NET Core的MVC（Model-View-Controller）框架中，View 扮演着呈现用户界面的角色。View负责展示应用程序的数据给用户，并接收用户的输入。它与Model和Controller协同工作，通过模型绑定从Controller获取数据，然后使用Razor语法或其他视图引擎将数据呈现为用户可见的HTML。

  1. 视图的作用

    • 数据呈现： 主要职责是将数据从Controller层传递到用户界面，展示给用户。这包括显示数据库查询结果、业务逻辑计算的输出等。
    • 用户交互： Views能够接收用户的输入，并将用户的请求传递给Controller层进行处理。这使得用户能够与应用程序进行交互，例如填写表单、点击按钮等。

  2. Razor语法

    在ASP.NET Core中，主要使用Razor作为默认的视图引擎。Razor语法是一种简洁且强大的语法，它允许在HTML中嵌入C#代码，使得在视图中能够方便地处理数据和逻辑。以下是Razor语法的一些基本特征：

    • 代码块： 使用 @ 符号表示C#代码块，可以在HTML中嵌入C#逻辑。

      html 复制代码 
      <p>Total items: @Model.Items.Count</p>

    • 变量和表达式： 使用 @ 符号表示C#表达式，可以直接在HTML中输出变量的值。

      html 复制代码 
      <p>Welcome, @User.Name!</p>

    • 循环和条件语句： 使用C#的循环和条件语句来实现动态的HTML生成。

      html 复制代码 
      @foreach (var item in Model.Items)
{
    <li>@item.Name</li>
}
    复制代码

  3. 视图文件结构

    在ASP.NET Core中，Views通常存放在项目的特定文件夹中（例如Views文件夹），并按照Controller的结构进行组织。每个Controller都有一个对应的文件夹，其中包含该Controller的所有视图。

  4. 视图布局

    Views支持布局，可以使用主布局文件（_Layout.cshtml）定义整个应用程序的共同结构。通过使用布局，可以实现页面的一致性和重用。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - My ASP.NET Core App</title>
</head>
<body>
    <div id="header">
        <!-- Header content -->
    </div>

    <div id="main">
        @RenderBody()
    </div>

    <div id="footer">
        <!-- Footer content -->
    </div>
</body>
</html>
1.2 Razor语法简介

  1. Razor语法的优势

    Razor语法在ASP.NET Core中被广泛采用，并具有多个优势，使其成为一种强大且受欢迎的视图引擎。以下是Razor语法的一些主要优势：

    • 简洁性和可读性： Razor语法以简洁的方式嵌入在HTML中，使得视图代码更加清晰易读。与传统的ASP.NET Web Forms相比，Razor语法减少了视图文件中的冗余标记，提高了可维护性。
    html 复制代码 
    	   <p>Welcome, @User.Name!</p>
    • 混编性： Razor语法允许在HTML中嵌入C#代码，实现了前端与后端逻辑的混编。这使得在视图中可以直接访问后端的数据和逻辑，简化了数据呈现和处理的流程。
    html 复制代码 
       <p>Total items: @Model.Items.Count</p>
    • 强大的代码块支持： Razor语法支持C#代码块，包括条件语句、循环语句等。这使得在视图中可以轻松实现动态内容的生成。
    html 复制代码 
       @if (User.IsAuthenticated)
   {
       <p>Welcome back, @User.Name!</p>
   }
    • 自动HTML编码： Razor自动对输出进行HTML编码，防止了常见的跨站脚本攻击（XSS）。这意味着在视图中输出的内容默认会被转义，提高了安全性。
    html 复制代码 
       <p>@Model.HtmlContent</p>
   <!-- 如果HtmlContent包含HTML标签，会被自动编码 -->
    • 强大的模型绑定： Razor语法与MVC框架深度集成，支持强大的模型绑定功能。这使得在视图中能够方便地访问Controller传递的数据。
    html 复制代码 
       <p>Total items: @Model.Items.Count</p>
    • 良好的扩展性： Razor语法是可扩展的，可以通过自定义标签助手（Tag Helpers）等方式扩展其功能。这使得开发者能够根据需要进行定制，以适应特定的项目要求。
    html 复制代码 
       <my-custom-tag helper-attribute="value">Content</my-custom-tag>

  2. Razor语法的基本结构

    Razor语法是在HTML中嵌入C#代码的一种方式，具有简洁且直观的语法结构。以下是Razor语法的基本结构：

    • 输出表达式：使用 @ 符号，后跟C#表达式，将其输出到HTML页面。
    html 复制代码 
    <p>Welcome, @User.Name!</p>

    这里 User.Name 是一个C#表达式，它的值会被自动输出到HTML中。

    • 代码块：使用 @{ } 包裹C#代码块，可以在其中编写多行代码。
    html 复制代码 
    @if (User.IsAuthenticated)
{
    <p>Welcome back, @User.Name!</p>
}
else
{
    <p>Please log in.</p>
}
    • 循环和条件语句：Razor支持常见的C#循环和条件语句，可以在HTML中嵌套使用。
    html 复制代码 
    @foreach (var item in Model.Items)
{
    <li>@item.Name</li>
}

@if (Model.Items.Count == 0)
{
    <p>No items available.</p>
}
    • 注释：Razor支持单行和多行注释，使用 @* 和 *@。
    html 复制代码 
    <!-- 这是HTML注释 -->

@* 这是Razor注释 *@
    • 嵌套：在Razor中，可以嵌套HTML和C#代码，创建动态的HTML结构。
    html 复制代码 
    <div>
    <h2>@Model.Title</h2>
    <ul>
        @foreach (var item in Model.Items)
        {
            <li>@item.Name</li>
        }
    </ul>
</div>

    • 部分视图：使用 @RenderSection 和 @section 可以在布局文件中定义和渲染部分视图。

      • 布局文件（_Layout.cshtml）:
      html 复制代码 
      <!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - My ASP.NET Core App</title>
</head>
<body>
    <div id="main">
        @RenderBody()
        @RenderSection("scripts", required: false)
    </div>
</body>
</html>
      • 页面文件:
      html 复制代码 
      @section scripts {
    <script>
        // JavaScript code specific to this view
    </script>
}

这样，部分视图中定义的内容将被嵌入到布局文件中相应的位置。

二、Razor语法深入理解

2.1 Razor中的代码块

  1. 代码注释
    在Razor中，你可以使用两种方式进行注释：单行注释和多行注释。以下是它们的示例：

    • 单行注释：使用 @* 和 *@ 将代码行或代码块注释掉。
    html 复制代码 
    @* 这是单行注释 *@
<p>Welcome, @User.Name!</p>
    • 多行注释：使用 <!-- 和 --> 进行多行注释，类似于HTML注释：
    html 复制代码 
    <!--
    这是多行注释
    可以跨越多行
-->
<p>Welcome, @User.Name!</p>

在Razor中，这两种注释方式都是有效的，并根据需要选择适当的注释形式。注释对于在代码中添加解释或标记暂时不需要的代码块是很有用的。

  1. 变量和表达式
    在Razor中，你可以使用 @ 符号来嵌入C#变量和表达式，将它们输出到HTML中。以下是变量和表达式的基本用法：

    • 变量：使用 @ 符号后跟变量名，将其输出到HTML中：
    html 复制代码 
    <p>Welcome, @User.Name!</p>

    在这个例子中，User.Name 是一个C#变量，其值将被嵌入到HTML中。

    • 表达式：使用 @ 符号后跟C#表达式，将其输出到HTML中。
    html 复制代码 
    <p>Total items: @Model.Items.Count</p>

    在这个例子中，Model.Items.Count 是一个C#表达式，它的值会被输出到HTML中。

    • 字符串拼接：你也可以在HTML中使用 + 来连接字符串：
    html 复制代码 
    <p>@("Hello, " + User.Name + "!")</p>
    • HTML编码：Razor默认对输出进行HTML编码，防止跨站脚本攻击（XSS）。这意味着特殊字符将被转义，确保安全性。
    html 复制代码 
    <p>@Model.HtmlContent</p>
<!-- 如果HtmlContent包含HTML标签，会被自动编码 -->

Tip：默认情况下Razor会进行HTML编码，确保输出的内容不会引起安全问题。

  1. 控制流语句
    在Razor中，你可以使用C#的控制流语句，如条件语句 (if, else if, else) 和循环语句 (for, foreach, while)，以便在视图中根据不同的条件生成不同的HTML内容。以下是一些示例：

    • 条件语句

      • if 语句
      html 复制代码 
      @if (User.IsAuthenticated)
{
    <p>Welcome back, @User.Name!</p>
}
else
{
    <p>Please log in.</p>
}
      • else if 语句
      html 复制代码 
      @if (Model.Status == "Active")
{
    <p>The account is active.</p>
}
else if (Model.Status == "Inactive")
{
    <p>The account is inactive.</p>
}
else
{
    <p>The account status is unknown.</p>
}

    • 循环语句

      • foreach 语句
      html 复制代码 
      <ul>
    @foreach (var item in Model.Items)
    {
        <li>@item.Name</li>
    }
</ul>
      • for 语句
      html 复制代码 
      	<ul>
	    @for (int i = 0; i < Model.Items.Count; i++)
	    {
	        <li>@Model.Items[i].Name</li>
	    }
	</ul>
	```

    • 其他控制流语句

      • switch 语句
      html 复制代码 
      @switch (Model.Status)
{
    case "Active":
        <p>The account is active.</p>
        break;
    case "Inactive":
        <p>The account is inactive.</p>
        break;
    default:
        <p>The account status is unknown.</p>
        break;
}
      • while 语句
      html 复制代码 
      @{
    int i = 0;
    while (i < 5)
    {
        <p>Iteration @i</p>
        i++;
    }
}

这些控制流语句使得在Razor视图中可以根据不同的条件生成不同的HTML内容，从而实现动态的页面呈现。

2.2 Razor中的HTML辅助方法

在ASP.NET Core中，Razor视图引擎提供了一些内置的HTML辅助方法（HTML Helpers），这些方法简化了在视图中生成HTML元素的过程。HTML辅助方法使得在Razor视图中以更简洁的方式生成常见的HTML元素和表单控件。以下是一些常用的HTML辅助方法：

  1. Html.ActionLink
    ActionLink 用于生成超链接，链接到指定的Controller和Action。
html 复制代码 
@Html.ActionLink("Click me", "About", "Home")
  1. Html.DisplayNameFor 和 Html.DisplayFor
    这对方法用于显示模型的属性名和属性值。
html 复制代码 
@Html.DisplayNameFor(model => model.Name)
@Html.DisplayFor(model => model.Name)
  1. Html.EditorFor 和 Html.TextBoxFor
    用于生成文本框，EditorFor 会根据模型类型选择适当的编辑器。
html 复制代码 
@Html.EditorFor(model => model.UserName)
@Html.TextBoxFor(model => model.UserName)
  1. Html.DropDownListFor
    生成下拉列表。
html 复制代码 
@Html.DropDownListFor(model => model.Country, new SelectList(Model.Countries, "Value", "Text"), "Select Country")
  1. Html.CheckBoxFor 和 Html.CheckBox
    生成复选框。
html 复制代码 
@Html.CheckBoxFor(model => model.IsAdmin)
@Html.CheckBox("isAdmin", true)
  1. Html.RadioButtonFor 和 Html.RadioButton
    生成单选按钮。
html 复制代码 
@Html.RadioButtonFor(model => model.Gender, "Male") Male
@Html.RadioButton("gender", "Female", true) Female
  1. Html.TextAreaFor
    生成文本区域。
html 复制代码 
@Html.TextAreaFor(model => model.Comments, new { rows = 4, cols = 40 })
  1. Html.ValidationMessageFor
    显示模型属性的验证消息。
html 复制代码 
@Html.ValidationMessageFor(model => model.UserName)

这些HTML辅助方法使得在Razor视图中生成HTML元素更为方便和可维护。通过利用这些方法，可以减少手动编写HTML元素的工作，同时提高代码的可读性和可重用性。

三、Views的创建和布局

3.1 创建Views文件

在ASP.NET Core中，创建Views文件通常是在MVC（Model-View-Controller）模式中的Views文件夹下的特定位置。以下是一般的步骤：

  1. 确保存在Views文件夹： 在ASP.NET Core项目中，确保在项目的根目录下有一个名为Views的文件夹。如果没有，你可以手动创建。

  2. 按Controller组织Views： Views文件夹中通常包含与Controller对应的文件夹，每个Controller文件夹中包含该Controller相关的视图文件。例如，如果有一个名为HomeController的Controller，那么在Views文件夹下应该有一个名为Home的文件夹。

  3. 创建具体的视图文件： 在Controller对应的文件夹中，你可以创建具体的视图文件，这些文件的命名通常与Controller的Action方法对应。例如，如果有一个名为Index的Action方法，那么在Views/Home文件夹下就可以创建一个名为Index.cshtml的文件。
    下面是一个示例：
    假设有一个名为HomeController的Controller，其中有一个名为Index的Action方法。

  4. 在Views文件夹下创建Home文件夹：

    复制代码 
    /Views
/Home

  5. 在Home文件夹下创建Index.cshtml：

    复制代码 
    /Views
   /Home
      /Index.cshtml

在Index.cshtml中，你可以编写HTML和Razor代码来构建具体的页面内容。

这样，当访问HomeController的Index方法时，MVC框架会自动查找并渲染Views/Home/Index.cshtml文件中的内容。这种组织结构使得视图文件与Controller的关系更加清晰，方便了项目的维护和扩展。

3.2 Views的布局
  1. 主布局文件
    在ASP.NET Core中，主布局文件通常是整个应用程序中的顶层布局，它定义了整个站点的基本结构和外观。这个主布局文件在项目中被称为 _Layout.cshtml，位于Views/Shared文件夹下。以下是一个简单的 _Layout.cshtml 的示例：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - My ASP.NET Core App</title>

    <!-- 引入CSS文件或其他头部元素 -->
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <!-- ...其他CSS文件... -->
</head>
<body>
    <div class="container">
        <header>
            <h1>My ASP.NET Core App</h1>
            <nav>
                <ul>
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
                    <!-- ...其他导航链接... -->
                </ul>
            </nav>
        </header>

        <main>
            @RenderBody()
        </main>

        <footer>
            <!-- 页脚内容 -->
        </footer>
    </div>

    <!-- 引入JS文件或其他尾部元素 -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- ...其他JS文件... -->
</body>
</html>

在这个示例中：

  • @ViewBag.Title 用于动态设置页面的标题，具体的标题信息会在每个视图中进行设置。
  • @RenderBody() 是一个占位符，用于渲染具体视图的内容。
  • 使用了 asp-* 属性，这是ASP.NET Core Tag Helpers 的一种形式，用于生成URL。
  • 引入了一些外部的CSS和JavaScript文件，通常是通过使用 lib 目录下的包管理工具（例如，NuGet或NPM）安装的第三方库。
  • <div class="container"> 用于包裹主要内容，这是 Bootstrap 中的一个样式类，用于创建一个固定宽度的容器。

这个主布局文件定义了网站的整体结构，包括头部、导航栏、主要内容区域和页脚。每个具体的视图可以选择性地使用这个布局，确保整个应用程序的一致性。在视图中，可以使用 @{ Layout = "_Layout"; } 来指定使用的布局文件。

  1. 部分视图
    部分视图（Partial View）是在ASP.NET Core中可重用的、可以被其他视图或部分视图包含的组件。它允许你将页面中的一部分提取出来，以便在多个地方共享相同的代码或 UI 元素。以下是如何创建和使用部分视图的基本步骤：

  • 创建部分视图

    • 在Views文件夹中创建一个名为Shared的文件夹：

      /Views
      /Shared

    • 在Shared文件夹中创建部分视图文件，例如_MyPartialView.cshtml：

    html 复制代码 
    <!-- _MyPartialView.cshtml -->
<div>
    <h3>This is a partial view content</h3>
    <!-- 其他部分视图的内容 -->
</div>

  • 使用部分视图
    在其他视图或布局中使用 Html.Partial 或 Html.RenderPartial 方法引入部分视图：

html 复制代码 
<!-- 在视图中引入部分视图 -->
@Html.Partial("_MyPartialView")

<!-- 或者使用 Razor 语法 -->
@{
    await Html.RenderPartialAsync("_MyPartialView");
}

或者，在布局中引入部分视图：

html 复制代码 
<!-- 在布局中引入部分视图 -->
@Html.Partial("_MyPartialView")
  • 传递模型给部分视图
    如果你希望在部分视图中使用模型数据，可以将模型数据传递给部分视图：
html 复制代码 
<!-- 在视图中传递模型给部分视图 -->
@Html.Partial("_MyPartialView", model: new MyModel())
  • 使用 @model 声明部分视图的模型
    在部分视图文件的顶部使用 @model 声明视图模型，以便在部分视图中直接访问模型数据：
html 复制代码 
@model MyNamespace.MyModel

<div>
    <h3>@Model.Title</h3>
    <!-- 使用模型数据渲染内容 -->
</div>
  • 注意事项
    • 部分视图的文件名通常以下划线 _ 开头，这是一种常见的约定，用于表示这是一个局部组件而非完整的视图。
    • 部分视图通常用于渲染重复的 UI 元素，例如导航栏、页脚、模态框等。
    • 在部分视图中，可以包含 HTML、Razor 代码和 C# 代码，类似于完整的视图。

使用部分视图有助于提高代码的可维护性，避免在多个地方重复编写相同的代码，同时使得对 UI 元素的修改更为方便。

四、数据传递和模型绑定

4.1 模型绑定概述

模型绑定是ASP.NET Core中一种重要的特性，它负责将HTTP请求的数据（如表单数据、查询字符串、路由数据等）与应用程序中的模型进行关联。这使得在控制器中处理请求时，可以方便地使用和操作模型数据。

  1. 工作原理
    模型绑定工作的基本原理是通过将HTTP请求中的数据（键值对）映射到应用程序中的模型对象。这个映射过程是自动进行的，ASP.NET Core框架根据请求中的数据类型、名称和模型对象的属性进行匹配。

  2. 支持的数据源
    模型绑定可以从多个数据源中获取数据，包括：

    • 查询字符串（Query String）： 通过URL中的查询参数传递的数据。

      csharp 复制代码 
      public IActionResult MyAction([FromQuery] string parameter)
{
    // 从查询字符串中获取参数值
}

    • 表单数据： 通过HTML表单提交的数据。

      csharp 复制代码 
      [HttpPost]
public IActionResult MyAction([FromForm] string parameter)
{
    // 从表单数据中获取参数值
}

    • 路由数据： 从URL中的路由参数中获取数据。

      csharp 复制代码 
      [HttpGet("/myroute/{parameter}")]
public IActionResult MyAction([FromRoute] string parameter)
{
    // 从路由数据中获取参数值
}

    • 请求体数据（Body）： 通常用于接收JSON格式的数据。

      csharp 复制代码 
      [HttpPost]
public IActionResult MyAction([FromBody] MyModel model)
{
    // 从请求体中获取模型数据
}

  3. 模型验证
    模型绑定的一部分是模型验证，这是一个在模型绑定后执行的步骤。模型验证用于确保绑定到模型的数据符合模型的定义规则。如果验证失败，可以通过检查 ModelState.IsValid 属性来获取错误信息。

  4. 自定义模型绑定器
    在某些情况下，可能需要自定义模型绑定的行为。这可以通过创建自定义的模型绑定器来实现。模型绑定器是实现 IModelBinder 接口的类，允许你完全掌控数据绑定的过程。

  5. 特性和注解
    通过在模型属性上使用特性和注解，可以对模型的绑定行为进行更精确的控制。例如，可以使用 Required 特性指定某个属性为必填项。

csharp 复制代码 
public class MyModel
{
    [Required]
    public string Name { get; set; }
}

模型绑定是ASP.NET Core MVC中处理用户请求和数据输入的关键机制之一。了解如何有效地使用模型绑定可以简化控制器的代码，并使数据传递更为方便和可靠。

4.2 常见的模型绑定技巧

在ASP.NET Core MVC中，有一些常见的模型绑定技巧，可以帮助你更灵活、高效地处理用户请求和数据输入。以下是一些常见的技巧：

  1. 模型绑定前缀
    在处理复杂的数据结构（例如嵌套的对象或集合）时，可以使用模型绑定前缀来指定数据应该绑定到模型的哪个属性。这在处理表单数组或嵌套对象时非常有用。
csharp 复制代码 
public IActionResult MyAction([Bind(Prefix = "User")] UserModel user)
{
    // 会将请求中以 "User" 为前缀的数据绑定到 UserModel 对象的相应属性
}
  1. [FromBody] 特性
    使用 [FromBody] 特性将请求体中的数据绑定到模型对象。这在处理 JSON 格式的请求时非常有用。
csharp 复制代码 
[HttpPost]
public IActionResult MyAction([FromBody] MyModel model)
{
    // 从请求体中获取 JSON 数据并绑定到 MyModel 对象
}
  1. [FromForm], [FromQuery], [FromRoute]
    使用 [FromForm], [FromQuery], [FromRoute] 特性明确指定模型绑定的数据来源。
csharp 复制代码 
[HttpPost]
public IActionResult MyAction([FromForm] string name, [FromQuery] int age, [FromRoute] int id)
{
    // 分别从表单、查询字符串和路由数据中获取数据
}
  1. 默认值
    在模型的属性上设置默认值，可以确保即使没有提供相应的数据，模型属性也有一个合理的初始值。
csharp 复制代码 
public class MyModel
{
    public string Name { get; set; } = "Default Name";
}
  1. 复杂类型的绑定
    处理复杂类型（如集合、数组）时，可以使用 [Bind] 特性来指定绑定的属性。
csharp 复制代码 
public IActionResult MyAction([Bind("Id,Name")] List<ItemModel> items)
{
    // 只绑定 Id 和 Name 属性，而忽略其他属性
}
  1. 手动验证
    在模型绑定后，可以手动执行验证并检查 ModelState.IsValid 属性。
csharp 复制代码 
[HttpPost]
public IActionResult MyAction([FromBody] MyModel model)
{
    if (ModelState.IsValid)
    {
        // 执行逻辑
    }
    else
    {
        // 处理验证失败的情况
    }
}
  1. 自定义模型绑定器
    对于特殊的绑定需求，可以创建自定义的模型绑定器。
csharp 复制代码 
public class CustomModelBinder : IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        // 自定义绑定逻辑
    }
}

然后在控制器的方法中使用 [ModelBinder] 特性应用自定义的模型绑定器。

csharp 复制代码 
public IActionResult MyAction([ModelBinder(typeof(CustomModelBinder))] MyModel model)
{
    // 使用自定义模型绑定器
}

这些技巧可以帮助你更好地利用ASP.NET Core MVC的模型绑定功能，使代码更加灵活、可维护。选择适当的技巧取决于你的具体需求和场景。

五、Views中的表单处理

5.1 HTML表单基础

HTML表单是一种用于收集用户输入的元素，它允许用户通过输入框、下拉菜单、单选按钮等方式向服务器提交数据。以下是HTML表单的基础概念和元素：

  1. <form> 元素
    表单通常使用 <form> 元素进行定义，它包裹了表单中的所有输入元素。<form> 元素有以下常见属性：

    • action: 指定表单数据提交到的服务器端URL。
    • method: 指定用于发送表单数据的HTTP方法，常见的有 "GET" 和 "POST"。
    • enctype: 指定在发送表单数据时使用的编码类型，常见的有 "application/x-www-form-urlencoded" 和 "multipart/form-data"。
    html 复制代码 
    <form action="/submit" method="post">
  <!-- 表单内容将在这里定义 -->
</form>

  2. 输入元素
    在表单中，可以使用多种输入元素，根据用户需要收集的数据类型选择合适的元素。

    • 文本框 <input type="text">
    html 复制代码 
    <label for="username">Username:</label>
<input type="text" id="username" name="username">
    • 密码框 <input type="password">
    html 复制代码 
    <label for="password">Password:</label>
<input type="password" id="password" name="password">
    • 单选按钮 <input type="radio">
    html 复制代码 
    <input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
    • 复选框 <input type="checkbox">
    html 复制代码 
    <input type="checkbox" id="subscribe" name="subscribe" value="true">
<label for="subscribe">Subscribe to newsletter</label>
    • 下拉菜单 <select> 和 <option>
    html 复制代码 
    <label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <option value="uk">UK</option>
</select>
    • 多行文本框 <textarea>
    html 复制代码 
    <label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

  3. 提交按钮 <input type="submit">
    用于触发表单提交。

html 复制代码 
<input type="submit" value="Submit">
  1. 重置按钮 <input type="reset">
    用于重置表单中的所有输入元素。
html 复制代码 
<input type="reset" value="Reset">
  1. <label> 元素
    用于为表单元素添加标签，提高可访问性并改善用户体验。
html 复制代码 
<label for="username">Username:</label>
<input type="text" id="username" name="username">

以上是HTML表单的基础元素，通过它们的组合可以创建各种类型的表单，用于接收用户输入并提交到服务器。在实际开发中，还可以使用CSS和JavaScript来改善表单的样式和交互行为。

5.2 Views中的表单标签

在ASP.NET Core的Razor视图中，可以使用HTML表单标签和ASP.NET Core的HTML辅助方法来创建表单。以下是一些在Razor视图中创建表单的示例：

  1. 使用HTML辅助方法
html 复制代码 
@using (Html.BeginForm("submit", "home", FormMethod.Post))
{
    <label for="username">Username:</label>
    @Html.TextBox("username")

    <label for="password">Password:</label>
    @Html.Password("password")

    <input type="submit" value="Submit">
}
  1. 模型绑定
    使用模型绑定可以将表单字段直接绑定到模型的属性上。首先，在视图的顶部声明模型：
html 复制代码 
@model YourNamespace.YourModel

然后，使用 Html.EditorFor 或 Html.TextBoxFor 等辅助方法：

html 复制代码 
@using (Html.BeginForm("submit", "home", FormMethod.Post))
{
    @Html.LabelFor(model => model.Username)
    @Html.TextBoxFor(model => model.Username)

    @Html.LabelFor(model => model.Password)
    @Html.PasswordFor(model => model.Password)

    <input type="submit" value="Submit">
}

  1. 部分视图中的表单

    在部分视图中使用表单，可以在主视图中通过 Html.RenderPartial 或 Html.Partial 来包含部分视图，然后在部分视图中定义表单。

    • 主视图：
    html 复制代码 
    @{
    Layout = null;
}

@Html.Partial("_MyForm")
    • 部分视图 _MyForm.cshtml：
    html 复制代码 
    @using (Html.BeginForm("submit", "home", FormMethod.Post))
{
    <label for="username">Username:</label>
    @Html.TextBox("username")

    <label for="password">Password:</label>
    @Html.Password("password")

    <input type="submit" value="Submit">
}

这些示例演示了如何在ASP.NET Core的Razor视图中使用HTML表单标签和HTML辅助方法来创建表单。根据实际需求，可以选择使用传统的HTML表单标签或ASP.NET Core提供的HTML辅助方法来简化表单的创建和处理。

5.3 表单验证和处理

在ASP.NET Core中，表单验证和处理是Web应用程序中的关键部分。ASP.NET Core提供了内置的模型验证和处理机制，可以方便地处理用户提交的表单数据。以下是基本的表单验证和处理步骤：

  1. 模型定义
    首先，定义用于表示表单数据的模型。在模型中可以使用数据注解来添加验证规则：
csharp 复制代码 
public class UserViewModel
{
    [Required(ErrorMessage = "Username is required.")]
    public string Username { get; set; }

    [Required(ErrorMessage = "Password is required.")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}
  1. 创建表单
    在Razor视图中创建表单，使用 Html.BeginForm 和表单元素：
html 复制代码 
@model YourNamespace.UserViewModel

@using (Html.BeginForm("Login", "Account", FormMethod.Post))
{
    <div>
        @Html.LabelFor(model => model.Username)
        @Html.TextBoxFor(model => model.Username)
        @Html.ValidationMessageFor(model => model.Username)
    </div>

    <div>
        @Html.LabelFor(model => model.Password)
        @Html.PasswordFor(model => model.Password)
        @Html.ValidationMessageFor(model => model.Password)
    </div>

    <input type="submit" value="Login">
}
  1. 控制器中处理表单提交
    在控制器中创建对应的动作方法来处理表单提交：
csharp 复制代码 
[HttpPost]
public IActionResult Login(UserViewModel model)
{
    if (ModelState.IsValid)
    {
        // 执行登录逻辑
        // 例如，验证用户名密码是否正确
        // 重定向到成功页面或执行其他操作

        return RedirectToAction("Success");
    }

    // 模型验证失败，返回登录页面，并显示错误信息
    return View(model);
}
  1. 模型验证
    在表单提交时，模型验证会自动执行。通过 ModelState.IsValid 属性来检查模型是否通过验证。如果模型验证失败，将会在视图中显示相应的错误信息。
  2. 显示验证错误信息
    在视图中使用 ValidationMessageFor 辅助方法来显示验证错误信息：
html 复制代码 
@Html.ValidationMessageFor(model => model.Username)

这样，如果模型验证失败，错误信息将自动显示在相应的位置。

这是一个基本的表单验证和处理的例子。根据实际需求，可以进一步扩展和定制验证规则、错误消息以及处理逻辑。 ASP.NET Core的模型验证和处理机制非常强大，可以满足各种复杂的验证需求。

六、Views中的客户端脚本

6.1 JavaScript和Razor的集成

JavaScript和Razor在ASP.NET Core中可以很好地集成，提供了强大的前端和后端交互的能力。以下是一些常见的JavaScript和Razor集成的场景和方法：

  1. Razor中嵌入JavaScript
    在Razor视图中，可以直接嵌入JavaScript代码。这使得你可以根据后端的数据动态生成JavaScript代码。例如：
html 复制代码 
<script>
    var username = '@Model.Username';
    alert('Welcome, ' + username + '!');
</script>

在这个例子中，@Model.Username 会被后端的数据替换，从而在JavaScript中生成动态的代码。

  1. 使用Razor变量和JavaScript

你可以将Razor中的变量传递给JavaScript，以便在前端脚本中使用。这可以通过使用 @ 符号实现：

html 复制代码 
<script>
    var username = '@Model.Username';
    console.log('Username from Razor: ' + username);

    // 可以在JavaScript中使用 username 变量
</script>
  1. Razor中生成JavaScript URL
    在ASP.NET Core中，可以使用 Url.Action 来生成包含Razor变量的JavaScript中的URL。例如：
html 复制代码 
<script>
    var submitUrl = '@Url.Action("Submit", "Home")';
    console.log('Submit URL: ' + submitUrl);
</script>
  1. Ajax请求与Razor结合
    使用JavaScript中的Ajax请求与后端的Razor动作方法交互是常见的需求。例如，使用jQuery进行Ajax请求：
html 复制代码 
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    $(document).ready(function () {
        $('#submitBtn').click(function () {
            var username = $('#username').val();
            var password = $('#password').val();

            $.ajax({
                url: '@Url.Action("Login", "Account")',
                method: 'POST',
                data: { Username: username, Password: password },
                success: function (data) {
                    // 处理成功的响应
                },
                error: function (error) {
                    // 处理错误的响应
                }
            });
        });
    });
</script>

这个例子中，当按钮被点击时，通过Ajax请求将表单数据发送到后端的Razor动作方法 Login。

  1. Razor中使用JavaScript库

在Razor视图中引入和使用JavaScript库，例如，引入Bootstrap或其他前端库：

html 复制代码 
<!-- 引入Bootstrap的CSS和JavaScript文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  1. 使用Razor生成动态的JavaScript代码
    在Razor视图中，可以根据后端的逻辑生成动态的JavaScript代码。例如：
html 复制代码 
<script>
    @if (Model.IsAdmin)
    {
        // 只有管理员用户才能执行的JavaScript代码
        console.log('Welcome, Admin!');
    }
</script>

这允许根据后端数据生成条件性的JavaScript代码。

这些例子展示了JavaScript和Razor在ASP.NET Core中的集成方式。通过这种方式，前端和后端可以更灵活地协同工作，使得开发更加方便和高效。

6.2 在Views中使用JavaScript库

在ASP.NET Core的Razor视图中使用JavaScript库是很常见的，这通常涉及到在HTML中引入相关的库文件，并在页面中使用这些库。下面是一些在Razor视图中使用JavaScript库的例子：

  1. 引入本地的JavaScript库文件
    如果你的项目中有本地存储的JavaScript库文件，你可以通过以下方式在Razor视图中引入它们：
html 复制代码 
<!-- 引入本地的JavaScript文件 -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

上述例子中，~/lib/jquery/dist/jquery.min.js 和 ~/lib/bootstrap/dist/js/bootstrap.bundle.min.js 是相对于项目根目录的路径，你需要根据你项目中的实际文件路径进行调整。

  1. 引入CDN上的JavaScript库

如果你更喜欢使用CDN（内容分发网络）上托管的库文件，可以通过以下方式引入：

html 复制代码 
<!-- 引入CDN上的jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- 引入CDN上的Bootstrap库 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  1. 使用JavaScript库的功能
    引入JavaScript库后，你可以在Razor视图中使用相应的库功能。例如，在Bootstrap中使用弹出框：
html 复制代码 
<!-- 在Razor视图中使用Bootstrap的弹出框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Title</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <p>This is the modal body.</p>
      </div>

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

这个例子中，使用了Bootstrap的弹出框功能，其中的 data-toggle 和 data-target 属性是Bootstrap的JavaScript库提供的功能。

在Razor视图中使用JavaScript库时，确保在引入库文件后，按照库的文档说明使用相应的功能。这有助于保持代码的清晰和可维护性。

七、性能优化

7.1 Views的性能考虑

在ASP.NET Core中，提高视图性能是优化Web应用程序的一个重要方面。以下是一些有助于提高Views性能的考虑因素：

  1. 缓存

    • 输出缓存
      使用输出缓存可以缓存整个视图的输出，避免重复渲染相同的内容。可以在控制器的动作方法上使用 [ResponseCache] 特性，或者在视图中使用 ResponseCache 中间件。
    csharp 复制代码 
    [ResponseCache(Duration = 3600)]
public IActionResult Index()
{
    // 动作方法的输出将被缓存1小时
    return View();
}
    • 片段缓存
      使用片段缓存可以缓存部分视图的输出，适用于只有部分内容需要缓存的情况。
    html 复制代码 
    @{
    var cachedValue = Html.Partial("_PartialView").ToString();
}

@{ 
    <div>
        @await Html.RenderPartialAsync("_PartialView")

        <!-- 使用片段缓存 -->
        <cache expires-after="@TimeSpan.FromHours(1).TotalSeconds.ToString()" vary-by="@cachedValue">
            @await Html.RenderPartialAsync("_PartialView")
        </cache>
    </div>
}

  2. 避免重复查询

    确保在视图中不要执行重复的查询。使用 ViewModel 将必要的数据传递给视图，以避免在视图中执行多次数据库查询。

  3. 视图组件

    使用视图组件来封装可复用的UI组件，以避免在多个视图中重复相同的代码。

csharp 复制代码 
// 在 Views/Shared/Components/MyComponent/Default.cshtml 中定义组件的HTML和逻辑

public class MyComponentViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        // 处理逻辑
        return View();
    }
}

在视图中使用：

html 复制代码 
@await Component.InvokeAsync("MyComponent")
  1. 延迟加载
    对于一些不是必需立即加载的内容，可以考虑使用 JavaScript 进行延迟加载。例如，图片或其他大型媒体资源可以在页面加载完成后再进行加载。
  2. 合理使用 JavaScript 和 CSS
    将JavaScript和CSS放置在页面底部，以减少对页面加载性能的影响。此外，使用压缩和缩小脚本和样式表以减小文件大小。
  3. 视图的结构和布局
    确保视图的结构清晰，布局简单。复杂的嵌套结构可能导致性能下降。
  4. 压缩输出
    在生产环境中，启用输出压缩可以减小传输的数据量，加快页面加载速度。可以在 Startup.cs 中启用压缩中间件。
csharp 复制代码 
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    // ...

    if (env.IsProduction())
    {
        app.UseResponseCompression();
    }

    // ...
}

以上是一些有助于提高ASP.NET Core Views性能的常见策略。具体的优化措施应该根据应用程序的特定需求和性能测试结果来确定。

八、总结

ASP.NET Core是一款强大而灵活的开发框架，结合Razor视图引擎和MVC架构，为构建现代Web应用提供了丰富的工具和最佳实践。通过模型绑定、视图布局和Razor语法，简化了开发流程。合理使用JavaScript库、中间件和依赖注入提高了性能和可维护性。采用MVC和Repository模式实现了清晰的代码组织和数据访问。最佳实践包括RESTful API设计、异常处理、安全性和性能优化，确保了应用程序的健壮性和安全性。这些综合策略帮助构建高效、安全、可扩展的ASP.NET Core应用。

相关推荐
一水鉴天11 小时前
专题讨论 类型理论和范畴理论之间的关系 之2 整体设计中的“闭” 解题和“位”问题 (ima.copilot)
线性代数·矩阵·mvc
新芒14 小时前
亚马逊云科技领跑“Agent”时代：揭示云与AI的下一站
人工智能·科技·microsoft
咖丨喱17 小时前
【对端发送的invitation req中channel list和operating channel的operating class不对应】
数据结构·list·asp.net
cws20040118 小时前
微软系统中AD域用户信息及状态报表命令介绍
开发语言·microsoft·php
简鹿办公18 小时前
微软正式开放 Windows 11 25H2 升级，所有兼容设备均可安装
microsoft·windows 11 25h2
Ttang2319 小时前
【AI篇3】在Java项目中调用大模型API
java·人工智能·microsoft·ai·api
小二·19 小时前
Windows 11 官方系统安装与重装完整教程（2025年最新版）
windows·microsoft
Leinwin19 小时前
智能体驱动业务转型：Microsoft Copilot Studio平台全面升级
人工智能·microsoft·copilot
雨中飘荡的记忆19 小时前
设计模式之门面模式详解
microsoft·设计模式
青衫码上行20 小时前
【JavaWeb学习 | 第18篇】Servlet与MVC
java·学习·servlet·mvc
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）03智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践04React CVE-2025-55182漏洞排查与修复指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06BongoCat - 跨平台键盘猫动画工具07UV安装并设置国内源08打造高效订单处理！ZKmall开源商城的统一履约中心架构解析09本地部署阿里最新开源的Z-Image10Linux下V2Ray安装配置指南