Author Image

admin

6月前 571

使用表单标记助手 Form tag helpers 提交学生信息

本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core 与 EntityFramework Core》目录
视频课程效果更佳:跨平台开发实战掌握 ASP.NET Core 与 EntityFramework Core

Form tag helpers 提交学生信息

在我们之前的系列视频中,我们讨论了 A 标签,Img 和 environment 的 taghelper 。在本章节中,我们将讨论 ASP.NET Core 中的 Form Tag Helpers,它们可以帮助我们创建表单。

场景描述

我们使用以下常用 taghelper 在 ASP.NET Core 中创建表单:

  • Form Tag Helper
  • Label Tag Helper
  • Input Tag Helper
  • Select Tag Helper
  • Textarea Tag Helpe

我们还有 Validation Tag Helpe。我们将在即将发布的视频中讨论表单验证和模型绑定。

在本视频结束时,我们希望使用 Form Tag Helper 创建表单,并使用 Bootstrap 4 对其进行样式设置。完成"创建学生信息"如下图所示。

创建员工

Form Tag Helper 表单标记助手

要创建表单,我们使用

taghelper, 需要注意的是,我们使用 asp-controllerasp-action taghelper。这两个 taghelper 指定控制器和在提交表单时必须将表单数据发布到指定的操作方法上。我们希望在提交表单时发出 POST请求,因此我们将 method 属性设置为post

<form asp-controller="home" asp-action="create" method="post"></form>

在客户端浏览器上呈现表单时,上面的代码会生成以下 HTML。正如您在提交表单时从生成的 HTML 中看到的那样,它将被发布到 HomeControllerindex()方法中,编译后打开源代码 可以看到渲染出来的 html 代码。

<form method="post" action="/home/create"></form>

请注意:默认情况下,提交表单时,它将发布到当前页面表单的控制器的操作方法中。所以这意味着,即使我们没有使用 asp-controllerasp-action taghelper 指定控制器和操作方法,表单仍将被发布到 HomeController 的 index()方法中,但是我建议大家写的时候还是做到显示声明。

Input Tag Helper 文本框标记助手

Input Tag Helper 将 HTML <input>元素绑定到 Razor 视图中的模型表达式。

在我们的例子中,我们想要一个表单来创建一个新学生。因此,我们的 Create.cshtml 视图的模型是 Student 类。我们需要使用 model 指令。

@model Student

为了能够获取学生姓名,我们需要一个文本框。我们希望文本框绑定到 Student 模型类的 Name 属性。我们通过使用 input taghelper 的asp-for属性将其值设置为 Student 模型类的 Name 属性。 请注意,我们会获得智能提示。如果我们在 Student 类上将属性名称表单 Name 更改为 FullName,并且我们不更改分配给 TagHelper 的值,则会出现编译器错误。

<input asp-for="Name"/>

上面的代码,会生成一个带有idname 属性的 input 元素。请注意,它们的值均为 Name

<input type="text" id="Name" name="Name" value=""/>

Name 属性是必需的,它是用来在提交表单时,将输入元素的值映射到模型类的对应属性。这是通过 ASP.NET Core 中称为模型绑定的过程完成的。我们将在下一个视频中讨论模型绑定。

Label Tag Helper 标签标记助手

Label Tag Helper 会生成带有 for 属性的标签。属性链接与它相关的输入元素的标签进行绑定。请考虑以下示例。

<label asp-for="Name"></label> <input asp-for="Name"/>

上面的代码生成以下 HTML。

<label for="Name">Name</label>
<input type="text" id="Name" name="Name" value=""/>

Label 标签链接到 input标签,因为这两种标签的属性和 input标签的 id 属性具有相同的值(Name)。所以这意味着当我们点击 Label 标签时,相应的 input 标签会收到焦点。

同样,以下代码生成 Label 和 input 入元素以获取学生的电子邮件。

<label asp-for="Email"></label> <input asp-for="Email"/>

Select Tag Helper 选择器标记助手

生成 select 标签及其关联的选项元素。在我们的例子中,我们希望 select 显示主修科目列表。 最后,我们需要一个 Select 标签和一个带有主修科目选项列表的选择元素,如下所示。

<label for="Major">主修科目</label>

<select id="Major" name="Major">
  <option value="0">一年级</option>
  <option value="1">二年级</option>
  <option value="2">三年级</option>
</select>

主修科目的 select 元素的选项内容可以像上面的示例中那样进行硬编码,也可以来自枚举或数据库表。我们还没有连接数据库。因此,对于我们的示例,让我们从枚举中获取选项。

我们在 Models 文件夹中创建一个 MajorEnum.cs 枚举类。

namespace StudentManagement.Models
{
    public enum MajorEnum
    {
        None,
        FirstGrade,
        SecondGrade,
        GradeThree
    }
}

修改Models文件夹中 Student.cs 文件中的 Student 类

Major 属性数据类型为 MajorEnum 。

Create.cshtml 视图中,添加以下代码

<label asp-for="Major"></label>
<select
  asp-for="Major"
  asp-items="Html.GetEnumSelectList<MajorEnum>()"
></select>

注意,我们使用 asp-items 标签帮助程序和 Html.GetEnumSelectList<MajorEnum>() 来获取 select 元素的选项。

上面的代码生成以下 HTML :

<label for="Major">Major</label>
<select
  data-val="true"
  data-val-required="The Major field is required."
  id="Major"
  name="Major"
  ><option value="0">None</option>
  <option value="1">FirstGrade</option>
  <option value="2">SecondGrade</option>
  <option value="3">GradeThree</option>
</select>

Create.cshtml - 基本的 html 代码

@model Student @{ ViewBag.Title = "创建学生信息"; }

<form asp-controller="home" asp-action="create" method="post">
  <div>
    <label asp-for="Name"></label>
    <input asp-for="Name"/>
  </div>

  <div>
    <label asp-for="Email"></label>
    <input asp-for="Email"/>
  </div>

  <div>
    <label asp-for="Major"></label>
    <select
      asp-for="Major"
      asp-items="Html.GetEnumSelectList(typeof(MajorEnum))"
    ></select>
  </div>

  <button type="submit">创建</button>
</form>

上面的代码将会生成一下的 html 代码:

<form method="post" action="/home/create">
  <div>
    <label for="Name">Name</label>
    <input type="text" id="Name" name="Name" value=""/>
  </div>

  <div>
    <label for="Email">Email</label>
    <input type="text" id="Email" name="Email" value=""/>
  </div>

  <div>
    <label for="Major">Major</label>
    <select
      data-val="true"
      data-val-required="The Major field is required."
      id="Major"
      name="Major"
      ><option value="0">None</option>
      <option value="1">FirstGrade</option>
      <option value="2">SecondGrade</option>
      <option value="3">GradeThree</option>
    </select>
  </div>

  <button type="submit">创建</button>
</form>

Create.cshtml - 加上 Bootstrap 进行 css 优化的代码

@model Student @{ ViewBag.Title = "创建学生信息"; }

<form asp-controller="home" asp-action="create" method="post" class="mt-3">
  <div class="form-group row">
    <label asp-for="Name" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <input asp-for="Name" class="form-control" placeholder="Name"/>
    </div>
  </div>
  <div class="form-group row">
    <label asp-for="Email" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <input asp-for="Email" class="form-control" placeholder="Email"/>
    </div>
  </div>

  <div class="form-group row">
    <label asp-for="Major" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <select
        asp-for="Major"
        class="custom-select mr-sm-2"
        asp-items="Html.GetEnumSelectList<MajorEnum>()"
      ></select>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">创建</button>
    </div>
  </div>
</form>

你是否有一个疑问呢?我这里都是 英文,我们是中国人,应该显示为中文。这个呢,我们在后面的课程中实现。

下一节课:模型绑定

文章说明

如果您觉得我的文章质量还不错,欢迎打赏,也可以订阅我的视频哦
未得到授权不得擅自转载本文内容,52abp.com 保留版权
感谢您对我的支持

关注微信公众号:角落的白板报

公众号:角落的白板报