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

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

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

请注意：默认情况下，提交表单时，它将发布到当前页面表单的控制器的操作方法中。所以这意味着，即使我们没有使用 asp-controller 和asp-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"/>

上面的代码,会生成一个带有id 和 name 属性的 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 保留版权
感谢您对我的支持

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