ASPDotNet 四、视图

四、视图

视图是交付给用户的应用的实际输出。它是他们从屏幕上访问你的应用时实际看到的内容。所有的组件，包括菜单、输入元素、对话框，以及用户看到的一切都只来自视图。如果您在访问应用时没有提供良好的用户体验，用户将不会关心您的应用有多好。因此，视图在构建 ASP 时起着至关重要的作用。净 MVC 应用。

在本章中，我们将涵盖以下主题:

视图引擎和剃刀视图引擎的目的
剃刀视图引擎编程和不同的编程结构
布局在 ASP.NET Core 及其特性
HTML 帮助
局部视图
标签助手

视图引擎和 Razor 视图引擎

第一章，ASP 简介.NET Core，浏览器只能理解 HTML、CSS 和 JavaScript。视图引擎的目的是从您的视图生成 HTML 代码，并将其发送到浏览器，以便它能够理解内容。主要有两种不同类型的视图引擎——razor 视图引擎和 Webform 视图引擎。尽管这两个视图引擎都是使用 ASP.NET MVC，你可以使用任何自定义视图引擎。

Razor 视图引擎

Razor 视图引擎是 ASP 中默认的和推荐的视图引擎.NET Core，以及以后，这可能是你安装 ASP 时唯一跳出来的视图引擎。净 MVC。

你可以在 Razor View 中混合使用 c#代码和 HTML 代码，而且 Razor View 引擎足够智能，能够区分这两种代码，并生成预期的输出。在某些情况下，我们可能需要提供额外的信息给 Razor View 以产生适当的结果。剃刀代码块以@符号开始，不需要关闭@。

在 Razor View 引擎中编程

在 Razor View 引擎中编程就像在 c#中编程一样。不同之处在于，在 Razor View 引擎中，你的 c#代码会和 HTML 混合在一起，以产生想要的 HTML 输出。

Razor 视图中的变量

您可以在 razor 块中声明一个变量，并使用@符号来使用该变量。

注意事项

对于本章中的所有示例，我们只给出视图的代码示例。

让我们通过一个例子来讨论这个问题。

创建一个Controllers文件夹和一个名为HomeController的控制器。
创建一个名为Views的文件夹,子文件夹称为Home,和一个视图文件名为Index.cshtml通过右键单击上下文菜单并选择添加 | 新项目和MVC Razor 视图从列表中【显示】。

HomeController.cs文件将有以下代码:

public class HomeController : Controller
{
  // GET: /<controller>/
  public IActionResult Index()
  {
    return View();
  }
}

接下来是更新后的 Razor View，我们将在其中声明一个变量并使用它。前五行和后两行是简单的 HTML 元素。

我们将集中在粗体的行上。然后，我们将使用@创建一个 Razor 块，并在其中声明一个变量。 Razor 块以右花括号结束。代码片段Value:被认为是简单的 HTML 文本。由于我们想要使用 razor 变量值，我们将使用@i来指示 razor 视图引擎i不是一个正常的 HTML 文本; 这是一个剃刀结构，并将得到相应的对待。完整的 HTML 代码如下:

<html>
  <head>
    <title> Views demo</title>
  </head>
  <body>

 @{

 int i = 5; 

 } 

     Value: @i 
  </body>
</html>

当你运行应用时，你会看到以下输出:

Variables in Razor View

请注意，当您访问 razor 变量时，需要使用@符号。如果没有这个，Razor View 引擎将i视为文本而不是表达式。

下面的截图是你访问没有@符号的变量时得到的结果:

Variables in Razor View

for 循环

在 Razor View 中，你可以使用 c#中可用的大多数编程结构。下面这段代码是for循环结构，我们循环五次并打印变量名:

@{
   for (int i = 0; i < 5; i++)
   {
     <li>@(i+1)</li>
   }
 }

以下是需要注意的几点:

由于 for 循环是剃刀代码，我们应该用@符号将循环括起来，以表明下面的代码是剃刀代码，而不是普通的 HTML。
每当我们使用 HTML 元素或标签时，Razor View 引擎就会回到 HTML 模式。如果你想在 HTML 标签中使用任何 Razor 表达式，你需要再次包含@符号来告诉 Razor 视图引擎后面的代码是一个 Razor 代码，而不是一个 HTML 元素。这就是我们在前面的表达式中再次使用@符号的原因，即使在父根级剃刀代码中也是如此。

视图的完整代码如下:

<html>
  <head>
    <title> Views demo</title>
  </head>
  <body>
    <ul>
    @{
       for (int i = 0; i < 5; i++)
       {
         <li>@(i+1)</li>
       }
     }
    </ul>
  </body>
</html>

while 循环

下面这段代码是相同循环的while循环实现。请注意，大胆的表达式增加了变量 i。我们不会使用@符号，因为它不在 HTML 元素中:

@{
   int i = 0;
   while(i<5)
   {
     <li>@(i + 1)</li>

 i++; 

   }
 }

foreach 循环

Razor View 中的foreach循环和 c#中的foreach循环是一样的。在下面的代码中，我们将初始化一个整数列表，遍历该列表并将其作为列表项打印:

<ul>
  @{
     List<int> integers = new List<int>
     {
       1,2,3,4,5
     };
     foreach (int i in integers)
     {
       <li>@i</li>
     }
   }
</ul>

if 条件

在下面的代码中，我们将检查变量的值是否小于 10。如果它小于 10，我们将打印i is less than 10，否则，我们将显示i is greater than 10。您可能想知道为什么我们必须包含text标签以及它的目的是什么。由于我们在 Razor 视图代码块中，文本i is less than 10将被认为是 Razor 表达式，但它不是。

这个text标签是用来指示 Razor 视图引擎，不管text标签后面是什么，都被认为是文本，而不是 Razor 表达式:

@{
   int i = 5;
   if (i < 10)
   {
     <text>i is less than 10</text>
   }
   else
   {
     <text>i is greater than 10</text>
   }
 }

布局

在前面讨论的所有示例中，我们已经在单个文件中完成了完整的 View 编码。这将导致灵活性的缺乏和可重用性的降低。

考虑以下网页结构，其中顶部部分包含公司标志或横幅，侧面部分包含网站各个部分的链接。 内容部分随页面的不同而变化。

Layout

如果我们在单个视图中编码完整的内容，我们可能必须在每个页面中复制Top Section和Side Section。如果我们想要更改侧节中的任何内容，我们将必须更改所有文件。这清楚地表明单个 View 文件并不是最好的解决方案。

在这种情况下，布局可以发挥作用。布局定义了可以在所有网页中重用的网站结构。布局甚至不需要有像顶部部分或侧面部分的东西; 它甚至可以包含一个简单的 HTML 结构，其中可以包含公共内容，而正文内容将从单个视图呈现。

让我们构建第一个布局。为了使用布局，你需要具备以下三点:

通知布局文件的名称——该信息应该在_ViewStart.cshtml中可用。按照惯例，所有共享文件的名称都以下划线开头，并且该文件直接位于Views文件夹下。
创建布局文件——按照惯例，文件的名称是_Layout.cshtml，它将位于Shared文件夹中。所有共享内容，比如部分视图，也可以在这里找到。分部视图将在本章后面讨论。
Create the content View file—this View file is almost same as the earlier View files that we created so far with only one difference; only page-specific content will be available in this file, and this means that you'll not have any html , head , or title tags here.

在创建_ViewStart.cshtml、_Layout.cshtml和特定于页面的 View 文件之后，文件夹结构将与前面的快照类似。

创建 _ViewStart.cshtml

右键单击Views文件夹，在Context菜单中选择Add New Item。然后在添加新项目对话框中选择MVC 视图起始页，如下图所示:

Creating _ViewStart.cshtml

当您点击Add按钮时，它将创建一个包含以下内容的文件:

@{
   Layout = "_Layout";
 }

创建 _Layout.cshtml

在Views文件夹中创建一个名为Shared的文件夹。然后，右键单击Shared文件夹，在Context菜单中选择Add New Item，如下截图所示:

Creating _Layout.cshtml

当您点击Add按钮时，它将创建_Layout。 cshtml包含以下内容:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>

@RenderBody() 

</div>
</body>
</html>

前面的布局文件是一个简单的 HTML 内容，包含两个 Razor 表达式。 @ViewBag 标题用于显示从控制器传递过来的标题信息，而@RenderBody是一个 Razor 表达式，它调用特定于页面的 View，并在那里合并该内容。

添加特定页面视图

在添加视图之前，我们需要在HomeController文件中添加一个动作方法，我们将从该方法中调用特定于页面的视图。

我们添加一个名为Index2的操作方法，如下所示:

public IActionResult Index2()
{
  ViewBag.Title = "This is Index2";
  return View();
}

ViewBag用于将信息从控制器传递到视图。在这里，我们将Title信息从操作方法传递到视图。

现在，右键单击Views文件夹，选择Add|New Item，选择MVC View Page，将文件保存为Index2.cshtml。

在生成的视图中，我添加了简单的Hello文本。此文本将在布局页面的主体中呈现。 View 文件的完整代码如下:

@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
 …
 }
 Hello. This text will be rendered in body of the layout page

一切都准备好了。运行应用并在浏览器中键入 URLhttp://localhost:50132/Home/Index2。请注意，当您从 PC 上运行应用时，本地主机后的端口号可能会有所不同。

Adding a page-specific View

正如所料，您将看到前面图片中的文本。然而，我们的重点不是文本。它是关于生成的 HTML 内容的结构。

按Ctrl+U查看源代码(适用于 Windows 下的 Chrome 浏览器)。你会看到以下 HTML 内容:

Adding a page-specific View

顶部的内容(html、head、body,div开放标签)和底部的内容(html,head,body,div结束标记)来自布局文件和文本来自特定于页面视图。

生成 HTML

第一章，ASP 简介.NET Core，浏览器只能理解 HTML、CSS 和 JavaScript，而不管你使用何种技术来构建 web 应用。在用 ASP 构建应用时，这是正确的.NET MVC 也是如此。

大多数应用获得用户输入，处理输入，然后将所需信息存储在数据库中，以便以后检索它们。在 web 应用的上下文中，Form HTML 元素用于获取用户输入。

下面是在 ASP 中生成 HTML 元素的几种方法.NET Core:

HTML 帮助
标签助手

HTML helper 是帮助生成 HTML 元素的服务器端方法，这些元素可以被浏览器理解。 HTML 助手是生成 HTML 元素的主要方法，直到 ASP。净 MVC 5。

标签助手，在 ASP 中引入.NET Core，也产生 HTML 元素。我们将在本章后面的章节中讨论标记帮助程序，它看起来就像 HTML 元素，在其中添加属性以将它们标识为标记帮助程序。使用 Tag 助手而不是 HTML 助手的优点是用户界面设计者/工程师不需要担心 Razor 代码。它们只是使用 HTML 元素和其他属性进行编码。

在讨论 HTML 帮助程序和标签帮助程序之前，让我们先回过头来讨论一下为什么我们需要它们。

让我们考虑一个简单的表单，如下图所示，我们希望在其中获取用户的姓名和年龄。如果用户输入她的年龄，我们将显示You are eligible to vote!。如果没有，则显示You are not eligible to vote now:

Generating HTML

下面是显示上述简单表单的 HTML 代码:

<form>
  <table>
    <tr>
      <td>
        <label for="txtName">Name</label>
      </td>
      <td>
        <input type="text" id="txtName" />
      </td>
    </tr>
   <tr>
     <td>
       <label for="txtAge">Age</label>
     </td>
     <td>
      <input type="text" id="txtAge" />
     </td>
   </tr>
   <tr>
     <td colspan="2">
       <input type="submit"  />
     </td>
   </tr>
  </table>
</form>

这种直接编码 HTML 元素的方法既耗时又容易出错。例如，在前面的表单中，标签和输入 HTML 元素引用相同的元素(第一组中的txtName和第二组中的txtAge)。如果我们手工编写 HTML 元素，在构建 HTML 元素时可能会出现打字错误。

HTML 助手

HTML 帮助程序是为您生成 HTML 的服务器端方法。我们可以使用 HTML 帮助程序生成相同的表单，如下所示(分别生成 HTMLform元素、@Html.Label和@Html.TextBox元素):

@using (Html.BeginForm())
 {
   <table>        
     <tr> 
       <td>@Html.Label("Name")</td>
       <td>@Html.TextBox("txtName")</td>
     </tr>
     <tr>
       <td>@Html.Label("Age")</td>
       <td>@Html.TextBox("txtAge")</td>
     </tr>
     <tr>
       <td colspan="2"><input type="submit" value="Submit" /></td>
     </tr> 
   </table>
}

HTML Helpers

您可能想知道，既然可以手动编写 HTML 代码，为什么还需要使用 HTML 帮助程序。当我们将模型从控制器传递到视图时，事情会变得更加复杂。使用 HTML 帮助程序，我们可以直接从Models文件中构建form元素，这样它们就可以从您正在使用的Models文件中选取名称。

例如，让我们创建一个名为Models的文件夹和一个名为Person的类。这个类将作为一个模型，如下面的截图所示:

HTML Helpers

Person类只是一个 POCO(普通的旧 c#对象)类，它将充当一个模型。这个类的完整代码如下:

public class Person
{
  public int PersonId { get; set; }
  public string Name { get; set; }
  public int Age { get; set; }
}

让我们创建一个名为ValidateAge的新操作方法。在这个方法中，我们将创建一个空的Person类，并将模型传递给视图。我们还将在ViewBag中创建一个名为Title的动态属性，以便在 View 中显示此值:

[HttpGet]
public IActionResult ValidateAge()
{
  ViewBag.Title = "Validate Age for voting";
  Person person1 = new Person();
  return View(person1);
}

在视图中，使用以下 HTML 帮助程序创建form:

@model Chapter4.Models.Person
@using (Html.BeginForm("ValidateAge", "Home", FormMethod.Post))
 {
   <table>
     <tr>
       <td>@Html.LabelFor(Model => Model.Name) </td>
       <td>@Html.TextBoxFor(Model => Model.Name) </td>
     </tr>
     <tr>
       <td>@Html.LabelFor(Model => Model.Age)</td>
       <td>@Html.TextBoxFor(Model => Model.Age)</td>
     </tr>
     <tr>
       <td colspan="2"><input type="submit" value="Submit" /></td>
     </tr>
   </table>
}

在第一行中，我们告诉视图，我们正在传递类型为Person类的 Model。这使您能够使用 Model 的强类型，也就是说，当您键入 Model 和一个点时，智能感知将为您提供Person类的所有属性

在第二行中，我们使用重载的BeginFormHTML 帮助程序，它接受三个参数——动作方法名称、控制器名称和Form方法。

简单地说，当用户提交表单时，信息应该传递给控制器所提到的操作。

在LabelFor和TextBox中，对于 HTML 帮助程序，我们只是传递模型属性(名称和年龄); 它会自动查询和获取 Model 属性，并构建相应的 HTML 元素。这是使用 HTML 帮助程序的主要优点之一。如果不使用 HTML 帮助程序，这个过程可能会变得复杂。

现在，让我们用同样的方式写出各自的POST动作方法。在下面的POST动作方法中，我们根据表单中输入的年龄，将动态属性设置为Message。

[HttpPost]
public IActionResult ValidateAge(Person person1)
{
  if(person1.Age>=18)
  {
    ViewBag.Message = "You are eligible to Vote!";
  }
  else
  {
    ViewBag.Message = "Sorry.You are not old enough to vote!";
  }
  return View();
}

需要注意的是，GET和POST动作方法都是指同一个视图——ValidateAge.cshtml。将以下内容添加到表单元素上方的 View 中:

@if(ViewBag.Message!=null)
 {
   <b>@ViewBag.Message</b>
 }

一旦用户提交表单，POST操作方法将在ViewBag中设置动态Message属性。但是，当视图作为GET请求的一部分呈现时，此属性的值将为空。如果值不为空，则在页面顶部插入消息。

当你运行应用时，你会得到以下输出:

HTML Helpers

局部视图

分部视图只是可以在应用中重用的视图。分部视图可以被认为是可插入的可重用块，您可以在任何地方调用它，并显示分部视图的内容。

考虑下面的网页结构——它与我们之前使用的布局页面相同，但有一些变化。 Latest Newsblock 添加到Side Section中，Loginblock 添加到Top Section中。这些区块不限于Top Section或Side Section，可以在您的应用的任何地方使用，包括您的Content Section，如下图所示:

Partial View

这些 Partial view 不限于静态内容，可以包含form元素。在上面的截图中，Latest News分部视图包含文本内容，登录分部视图包含form元素，用于获取电子邮件 ID 和密码。

分部视图的位置-框架不限制分部视图的位置。但是，按照惯例，如果您的分部视图将只被您的控制器使用，您可以在特定于控制器的视图文件夹中创建该分部视图。例如，如果您的分部视图将只在HomeController文件中使用，您可以在Views\Home文件夹中创建该分部视图。

让我们看看如何创建并使用分部视图。

正如前面讨论的，分部视图就像普通视图一样。我们创建分部视图的方式和创建普通视图的方式一样。

右键单击Shared文件夹，选择添加|新项目。按照约定，像所有共享内容一样，分部视图的名称也将以“_”(下划线)开头，如下截图所示:

Partial View

提示

我们创建这个分部视图的假设是，它可以从应用的任何地方使用。

在生成的 Partial View 中，我添加了以下简单的静态内容—一个文本和一个简单的表:

<b>This content and below table is coming from partial view</b>
<table border="1"> 
  <tr>
    <th>Employee No</th>
    <th>Employee Name</th>
  </tr>
  <tr> 
    <td>10012</td>
    <td>Jon Skeet</td>
  </tr>
  <tr>
    <td>10013</td>
    <td>Scott Guthrie</td>
  </tr>
</table>

调用局部视图

可以使用@Html.PartialHTML helper 调用分部视图。

在本例中，我们将从Index2.cshtml文件调用分部视图。传递的参数将是部分文件的名称。它将通过该名称搜索分部视图，并将该完整内容作为Index2.cshtml文件的一部分呈现。

Index2.html文件内容如下:

Hello. This text will be rendered in body of the layout page<br/> <br/> <br/>

@Html.Partial("_PartialHelloWorld")

现在，运行应用并访问 URLhttp://localhost:50132/Home/Index2。你会看到以下输出:

Calling the Partial View

查看组件

视图组件是在 ASP 中引入的一个新特性.NET Core，它们几乎类似于分部视图，但更强大。当你使用分部视图时，你有对控制器的依赖。然而，当您使用ViewComponent属性时，您不必依赖于 Controller，因此我们将建立关注点分离，并具有更好的可测试性。尽管仍然支持现有的 Partial View HTML helper，但在使用。net Core 时，当您想要显示可重用的信息片段时，最好使用 View 组件。

创建 View 组件

您可以使用以下任何一种方法创建一个ViewComponent:

通过派生ViewComponent属性来创建一个类
用[ViewComponent]属性修饰一个类，或者从具有[ViewComponent]属性的类派生它
您可以通过创建以后缀ViewComponent属性结尾的类来使用该约定

无论您选择什么选项，这个ViewComponent都应该是公共的、非嵌套的、非抽象的类。

与控制器一样，你也可以在ViewComponent属性中使用依赖注入(通过构造函数)。由于ViewComponent属性与 Controller 生命周期是分开的，因此您可能无法使用ViewComponents中的动作过滤器。

有一个名为Invoke(或InvokeAync，即Invoke的异步对等体)的方法，它将返回IComponentViewResult接口。这个方法类似于控制器返回视图的动作方法。

让我们创建一个ViewComponent属性。

在项目中创建一个名为ViewComponents的新文件夹和一个名为SimpleViewComponent的新类，如下截图所示:

Creating a View component

我们创建的SimpleViewComponent文件如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

namespace Chapter4.ViewComponents
{
  public class SimpleViewComponent :ViewComponent
  {
    public IViewComponentResult Invoke()
    {
      var data = GetSampleData();
      return View(data);
    }
    /// <summary>
    /// This is a simple private method to return some dummy data
    /// </summary>
    /// <returns></returns>

    private List<string> GetSampleData()
    {
      List<string> data = new List<string>();
      data.Add("One");
      data.Add("Two");
      data.Add("Three");
      return data;
    }
  }
}

我们只有两个方法，一个用于填充数据，另一个是用于渲染视图的Invoke方法。

一旦您创建了ViewComponent属性，您将需要在Views\_ViewImports.cshtml文件中包含ViewComponent名称空间，以便ViewComponents属性可以用于所有视图。下面高亮显示的代码片段被添加到视图:

@using Chapter4
@using Chapter4.Models

@using Chapter4.ViewComponents 

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

我们已经创建了ViewComponent，并让所有视图都可以使用它们。 HomeController文件中的一个简单操作方法只返回视图:

public ActionResult Sample()
{
return View();
}

在关联的视图中，我们可以调用如下代码片段所示的组件:

<p>
  This is a sample web page <br/>
  <div>
    @Component.Invoke("Simple")
  </div> 
</p>

当你调用组件时，它会在以下两个文件夹中搜索:

Views\<controller_name>\Components\<view component name>\<view name>文件夹
Views\Shared\Components\<view_component_name>/<view_name>文件夹

视图组件的默认视图名是Default，这使得视图的文件名为Default.cshtml。所以我们需要在Views\Shared\Simple\Default.cshtml文件夹中创建Default.cshtml文件，如下截图所示:

Creating a View component

在ViewComponent文件的 View(Default.cshtml文件)中，我们只是在模型中迭代项目，并将它们作为无序列表项显示，如下代码所示:

@model IEnumerable<string>

<h3> Sample list</h3>
<ul>
  @foreach(var item in Model)
  {
    <li>@item</li>
  }
</ul>

当您运行应用并访问 URL(http://localhost:50132/Home/Sample)时，您应该会看到以下输出:

Creating a View component

第一行这是一个示例 web 页面，来自父视图文件(sample.cshtml)，而随后的列表来自ViewComponent属性。

ViewComponent属性通常在视图中引用。但是，如果您想直接从控制器调用ViewComponent，您可以这样做。

我已经调用了Sample动作方法来直接调用 SimpleViewComponent，而不是通过其他视图调用它，如下所示:

public ActionResult Sample()
{
  return ViewComponent("Simple");
  //return View();
}

Creating a View component

因此，与旧的 HTML 部分视图相比，这些ViewComponents具有更多的灵活性和特性，比如依赖注入。这确保了ViewComponents是单独测试的。

标签助手

标签助手是 ASP 的一个新特性。核心网; 它们帮助生成 HTML 元素。在 HTML 助手中，我们将编写一个 c# /Razor 代码来生成 HTML。这种方法的缺点是许多前端工程师不知道 c# /Razor 代码。它们使用纯 HTML、CSS 和 JavaScript。标记助手看起来就像 HTML 代码，但具有服务器端呈现的所有特性。您甚至可以根据需要构建自定义的 Tag Helper。

让我们看看如何使用标签助手。为了使用 Tag helper，您需要安装Microsoft.AspNet.Mvc.TagHelpersNuGet 包。

选择View|Other Windows|Package Manager Console打开Package Manager Console窗口，如下图所示:

Tag Helpers

您可以在包管理器控制台窗口中输入以下命令安装TagHelpers方法:

Install-Package Microsoft.AspNet.Mvc.TagHelpers -Pre

当您输入该命令时，将出现以下响应:

Tag Helpers

一旦安装了TagHelpers包，我们将需要调用ViewImports文件，我们将在其中添加TagHelpers指令，以便 Tag Helpers 对我们的视图可用。

右键单击Views文件夹，在上下文菜单中选择添加新项目选项; 您将看到以下屏幕:

Tag Helpers

在_ViewImports.cs文件中添加以下内容。前两行告诉 ASP.NET MVC 中包含必要的名称空间。最后一行告诉 ASP.NET MVC 包括Microsoft.AspNet.Mvc.TagHelpers中所有可用的TagHelpers。第一个参数表示 TagHelper 的名称。我们已经使用了*，这意味着我们可能想要使用所有的 Tag Helpers。第二个参数表示TagHelpers将可用的程序集:

@using Chapter4
@using Chapter4.Models
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

当我们直接在Views文件夹下创建_ViewImports.cshtml文件时，如下截图所示，所有视图都可以使用标签助手:

Tag Helpers

如果我们将_ViewImports.cshtml文件包含在Home文件夹下，那么 Tag Helpers 将只对Home文件夹下的 Views 可用。

让我们在HomeController文件中添加一个简单的操作方法Index3，在关联的视图中，我们将使用 Tag Helpers，如下代码所示:

public IActionResult Index3()
{
  ViewBag.Title = "This is Index3";
  Person person = new Person();
  return View(person);
}

用下面的代码为Index3操作方法添加相应的 View(Index3.cshtml文件):

@model Chapter4.Models.Person
<form asp-controller="Home" asp-action="Index3"> 
  <table>
    <tr> 
      <td><
labelasp-for

="Name"></
label

></td>
      <td><input asp-for="Name" /></td> 
    </tr>
    <tr>
      <td><
labelasp-for

="Age"></
label

></td>
      <td><
inputasp-for

="Age" /></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="Submit" /></td>
    </tr> 
  </table>
</
form

>

以下是在前面的代码中使用标签助手时需要注意的一些事情:

所有表单元素看起来就像标准的 HTML 元素，只是在属性上做了一些更改。这使得前端开发人员可以独立工作，无需学习 HTML/Razor 代码，从而更容易实现所关注的分离。
前一个视图的第一行指示了从控制器传递给视图的模型数据的类型。
Form 元素有两个属性asp-controller和asp-action，分别表示控制器名称和动作方法名称。
Label 和输入标记帮助程序就像 HTML 元素一样，只是有一个额外的asp-for属性。这些属性的值表示模型属性。在为这些属性输入值时，你可以利用智能感知。

创建自定义标签助手

ASP.NET Core 提供了许多内置的 Tag Helpers 来帮助您为许多场景创建必要的 HTML 元素。然而，这个过程不是全面的，是彻底的。有时，您可能希望对生成的 HTML 元素进行一些更改，或者您可能希望创建一个具有新属性的 HTML 元素，或者完全创建一个新的 HTML 元素。您不受限于只使用 ASP 中现有的标记帮助程序.NET Core 应用。如果现有的标签助手不适合您的需要，您可以创建自己的标签助手。让我们创建一个简单的 Tag Helper 来创建一个电子邮件链接:

<a href="mailto:mugil@dotnetodyssey.com">

有两种方法可以创建 Tag Helpers 来实现ITagHelper接口或继承TagHelper类。 TagHelper类有一个Process方法，您可以重写该方法来编写自定义的标记助手。类还具有TagHelperOutput参数，您可以使用该参数编写和生成所需的输出 HTML。因此，最好通过继承TagHelper类来创建 Tag Helpers。

我们的目标是编写一个自定义的电子邮件标签助手，以便当有人使用这个标签助手(即<email mailTo="mugil@greatestretailstore.com"></email>)时，它应该转换为以下代码行:

<a href="mailto:mugil@greatestretailstore.com">Drop us a mail</a>

下面是在 ASP 中创建自定义标记 Helper 时需要执行的步骤.NET Core 应用。

创建一个名为TagHelper的文件夹，并添加一个名为EmailTagHelper.cs的新项。按照惯例，所有的 Tag Helpers 类都应该以TagHelper结尾，尽管我们可以重写该惯例。

Creating custom Tag Helpers

一旦你创建了文件，你将需要覆盖Process方法来生成所需的 HTML 输出:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Razor.TagHelpers;

namespace Chapter4.TagHelpers
{
  public class EmailTagHelper : TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      string emailTo= context.AllAttributes["mailTo"].Value.ToString();
      output.TagName = "a";
      output.Attributes["href"] = "mailto:" + emailTo;
      output.Content.SetContent("Drop us a mail");
    }
  }
}

上述代码中使用的参数解释如下:

参数将为您提供在 Tag Helper 中提供的所有信息。例如，在<emailmailTo="mugil@greatestretailstore.com"></email>标签 Helper 中，您可以从context参数中获得mailTo属性及其关联值。在前面的Process方法的第一行中，我们将获得mailTo属性值，并使用该值在生成的 HTML(锚标记)中创建一个属性。
参数output的类型是TagHelperOutput，它用于生成所需的 HTML 输出。
参数output.Content.SetContent将设置锚标记显示的文本。

我们已经创建了电子邮件标签助手。现在，我们必须让它对视图可用，这样我们才能在视图中使用标签 Helper。编辑Views\_ViewImports.cshtml以包含TagHelpers的名称空间，并添加相关的TagHelpers。在下面的_ViewImports.cshtml文件中，我们添加了粗体显示的内容:

@using Chapter4
@using Chapter4.Models

@using Chapter4.TagHelpers 

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" 

@addTagHelper "*, Chapter4"

下面一行中的“*”符号告诉视图引擎在Chapter4命名空间中包含所有的 TagHelpers:

@addTagHelper "*, Chapter4"

例如，以下一行将只包含EmailTagHelper，因此它对我们的视图可用:

@addTagHelper "Chapter4.TagHelpers.EmailTagHelper, Chapter4"

让我们在主控制器中创建一个简单的操作方法。在关联操作方法的视图中，我们将使用电子邮件标签助手:

public IActionResult AboutUs()
{
  return View();
}

以下是前文AboutUs动作方法的观点:

<h3>About Us</h3>
We are one of the biggest electronics retail store serving millions of people across the nation. blah.blah. blah <br/>

If you want to hear great offers from us 
<email mailTo="mugil@greatestretailstore.com"></email>

当您运行应用并访问http://localhost:50132/Home/AboutUsURL 时，您将看到以下输出:

Creating custom Tag Helpers

在这里，我们创建了一个锚标记，其属性为mailto，而 email 值为href属性值。

我已经打开了Developer Tools窗口(按F12来做这个，然后选择DOM Explorer选项卡)来查看生成的 HTML。

总结

在本章中，您学习了什么是视图引擎，以及如何使用 Razor 视图引擎构建视图。我们还讨论了在 Razor 中可以用来生成所需 HTML 输出的不同编程结构。然后，您学习了布局以及如何在 ASP 的所有页面上提供一致的站点结构。净 MVC 应用。稍后，我们通过一个例子讨论了如何使用分部视图促进可重用性。最后，您学习了如何使用 Tag Helpers 来生成干净的 HTML。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/33488.html

ASPDotNet 查看更多书籍

《ASP.NET MVC 编程学习手册》

分类

最近更新

ASPDotNet 四、视图

四、视图

视图引擎和 Razor 视图引擎

Razor 视图引擎

在 Razor View 引擎中编程

Razor 视图中的变量

注意事项

for 循环

while 循环

foreach 循环

if 条件

布局

创建 _ViewStart.cshtml

创建 _Layout.cshtml

添加特定页面视图

生成 HTML

HTML 助手

局部视图

提示

调用局部视图

查看组件

创建 View 组件

标签助手

创建自定义标签助手

总结

留言

联系客服

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET MVC 编程学习手册》

ASPDotNet 四、视图

四、视图

视图引擎和 Razor 视图引擎

Razor 视图引擎

在 Razor View 引擎中编程

Razor 视图中的变量

注意事项

for 循环

while 循环

foreach 循环

if 条件

布局

创建 _ViewStart.cshtml

创建 _Layout.cshtml

添加特定页面视图

生成 HTML

HTML 助手

局部视图

提示

调用局部视图

查看组件

创建 View 组件

标签助手

创建自定义标签助手

总结

留言

联系客服

ASPDotNet 查看更多书籍