ASP.NET Core Razor Pages 教程六 处理表单

处理表单

任何成功的电子商务网站都需要能够处理订单。如果你没有客户的联系方式和送货地址就很难做到这一点。网站收集这类信息的方式是使用表单。

在本节中，你将向 Order 页面添加一个表单，同时还将向表单中添加验证，以确保信息的收集是有效和完整的。

准备工作

首先，添加以下的样式声明到 wwwroot/css 中的 site.css 文件：

label[for="OrderQuantity"]{
  padding-left: 15px;
}

#OrderQuantity{
  margin: 0 15px;
  max- 100px;
}

.order-calc{
  display: inline-block;
  margin: 0 10px;
}

.input-validation-error, .input-validation-error:focus {
  background: #ffccba;
  color: #d63301;
}

.form-control.input-validation-error:focus{
  border-color: #d63301;
  box-shadow: 0 0 0 0.2rem rgba(255, 123, 123, 0.5);
}
      
.field-validation-error {
  color: #be3e16;
}

.validation-summary-errors {
  color: #be3e16;
}

前三种风格纯粹是装饰性的。最后四种样式将有助于轻松地识别字段验证错误的位置。现在，将以下突出显示的行添加到 Order.cshtml.cs 文件中：

using System;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
using Bakery.Data;
using Bakery.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Bakery.Pages
{
    public class OrderModel : PageModel
    {
        private BakeryContext db;

        public OrderModel(BakeryContext db) => this.db = db;

        [BindProperty(SupportsGet =true)]
        public int Id { get; set; }
        public Product Product { get; set;}
        [BindProperty, EmailAddress, Required, Display(Name="Your Email Address")]
        public string OrderEmail { get; set; }
        [BindProperty, Required(ErrorMessage="Please supply a shipping address"), Display(Name="Shipping Address")]
        public string OrderShipping { get; set; } 
        [BindProperty, Display(Name="Quantity")]
        public int OrderQuantity { get; set; } = 1;

        public async Task OnGetAsync() => Product = await db.Products.FindAsync(Id);
    }
}

额外的 using 指令使用 DataAnnotations 命名空间。这个命名空间包含许多的属性，其中一些属性用于装饰已添加到 PageModel 的属性。OrderEmail 属性应用了 DataAnnotation 属性（以及 BindProperty属性）：

• EmailAddress - 电子邮件地址-它验证字符串是否与电子邮件地址的模式匹配
• Required - 指定的值是必需的
• Display - 允许您自定义属性在 UI 中使用的值

其中两个属性在验证中发挥作用，稍后你就可以看到了。OrderQuantity 属性分配的默认值为 1。

添加表单

在 Order.cshtml 的底部添加以下几行:

<form method="post">
    <div class="row">
        <div class="col-3">
            <img src="~/Images/Products/Thumbnails/@Model.Product.ImageName" class="img-fluid img-thumbnail" alt="Image of @Model.Product.Name"/>
        </div>
        <div class="col-9">
            <ul class="orderPageList" data-role="listview">
                <li>
                    <div>
                        <p class="description">@Model.Product.Description</p>
                    </div>                
                </li>
                <li class="email">
                    <div class="form-group">
                        <label asp-for="OrderEmail"></label>
                        <input asp-for="OrderEmail" class="form-control form-control-sm" />                
                        <span asp-validation-for="OrderEmail"></span>
                    </div>
                </li>
                <li class="shipping">
                    <div class="form-group">
                        <label asp-for="OrderShipping"></label>
                        <textarea rows="4" asp-for="OrderShipping" class="form-control form-control-sm"></textarea>               
                        <span asp-validation-for="OrderShipping"></span>
                    </div>
                </li>
                <li class="quantity">
                    <div class="form-group row">
                        <label asp-for="OrderQuantity" class="col-1 col-form-label"></label>
                        <input asp-for="OrderQuantity" class="form-control form-control-sm"/>
                        x
                        <span class="order-calc" id="orderPrice">@Model.Product.Price.ToString("f")</span>
                        =
                        <span class="order-calc" id="orderTotal">@Model.Product.Price.ToString("f")</span>
                        <span asp-validation-for="OrderQuantity"></span>
                    </div>
                </li>
            </ul>
            <p class="actions">
                <input type="hidden" asp-for="Product.Id" />
                <button class="btn btn-danger order-button">Place Order</button>
            </p>
        </div>
    </div>
</form>


@section scripts{
<script type="text/javascript">
    $(function () {
        var price = parseFloat($("#orderPrice").text()).toFixed(2),
            total = $("#orderTotal"),
            orderQty = $("#OrderQuantity");

        orderQty.on('change', function () {
            var quantity = parseInt(orderQty.val());
            if (!quantity || quantity < 1) {
                orderQty.val(1);
                quantity = 1;
            } else if (quantity.toString() !== orderQty.val()) {
                orderQty.val(quantity);
            }
            total.text("$" + (price * quantity).toFixed(2));
        });
    });
</script>
}

表单使用标记帮助器来呈现标签，输入和验证消息。 目标输入元素的标记助手特别强大。 PageModel 属性传递给输入标记助手上的 asp-for 属性。 然后，输入标记帮助程序根据属性呈现正确的 name 属性，以便模型绑定可以无缝地工作。 分配给属性的任何值都将分配给输入。 输入的 type 属性是根据属性的数据类型生成的。

表单本身也将由标记帮助器作为目标，它将确保呈现请求验证令牌。

代码以JavaScript块结尾，根据订购的商品数量计算总价。 <script> 标记放在名为 scripts 的 @section 块中，该块被小心地放置在布局页面中，以便在其他站点范围的脚本(包括脚本块所依赖的 jQuery)下面呈现其内容。

接下来，您需要一个处理程序方法来处理表单。将以下内容添加到 Order.cshtml.cs 文件中:

public async Task<IActionResult> OnPostAsync()
{
    Product = await db.Products.FindAsync(Id);
    if(ModelState.IsValid){
        return RedirectToPage("OrderSuccess");
    }
    return Page();
}

目前，这个方法所做的只是检查 ModelState.IsValid。 这确保模型绑定特性得到满足， 所有提交的值都通过验证检查， 并且所有需要的值都存在。 如果验证中有任何错误， 则向 ModelState 对象添加条目，并重新显示当前页面(return page())。 如果提交是有效的， 用户将被重定向到 OrderSuccess 页面， 接下来您将添加该页面。

此模式称为 Post-Redirect-Get（PRG），旨在最大程度地减少双重发布导致重复提交的可能性。

如果表单中存在错误，则会再次显示该页面，验证标记帮助程序将显示验证错误的详细信息。

现在使用以下命令将 OrderSuccess 页面添加到应用程序：

dotnet new page --name OrderSuccess --output Pages --namespace Bakery.Pages

使用以下的代码来替换 OrderSuccess.cshtml 文件的内容：

@page
@model Bakery.Pages.OrderSuccessModel
@{
}
<ol id="orderProcess">
    <li><span class="step-number">1</span>Choose Item</li>
    <li><span class="step-number">2</span>Details &amp; Submit</li>
    <li class="current"><span class="step-number">3</span>Receipt</li>
</ol>
<h1>Order Confirmation</h1>

现在是测试表单是否正常工作和处理的时候了。输入 dotnet run 启动应用程序，然后导航到 https://localhost:5001。选择 Lemon Tart 产品，并确保表单显示正确:

现在，在不输入电子邮件或送货地址的情况下按下 Place Order 按钮， 这样您就可以测试验证了。 两个字段都应该变成粉红色，错误消息应该出现在它们下面:

您可以执行进一步的测试，比如删除 Quantity 框中的值， 或者在电子邮件输入中输入一个随机字符串。 每次提交表单后， 错误消息都会出现。

添加客户端验证

此时，所有验证都在服务器上执行。表单被发布，整个页面被重新呈现以向用户提供反馈。在开发站点时，您并不会真正注意到这种往返，因为客户机和服务器在同一台机器上。然而，在实际应用程序中，在用户收到任何反馈之前可能会有一些延迟。在客户端验证将为用户提供即时反馈。

在客户机上验证应该只被看作是对用户的一种礼貌。它永远不应该取代服务器端验证。对于具有少量 HTML/JavaScript 知识的人来说，绕过客户端验证是非常容易的。

Razor Pages 默认包含客户端验证(Client side validation)，但需要启用它。 您可以通过在页面中包含 jQuery Validation 和 jQuery Unobtrusive Validation 库来实现。 包含这些脚本的代码已在名为 _ValidationScriptsPartial.cshtml 的部分中提供，该部分位于 Pages/Shared 文件夹中。 要包含它，只需将部分标记助手添加到 Order.cshtml 中的脚本部分，如下面突出显示的代码行所示：

@section scripts{
<partial name="_ValidationScriptsPartial"></partial>
<script type="text/javascript">
    $(function () {
        var price = parseFloat($("#orderPrice").text()).toFixed(2),
            total = $("#orderTotal"),
            orderQty = $("#OrderQuantity");

        orderQty.on('change', function () {
            var quantity = parseInt(orderQty.val());
            if (!quantity || quantity < 1) {
                orderQty.val(1);
                quantity = 1;
            } else if (quantity.toString() !== orderQty.val()) {
                orderQty.val(quantity);
            }
            total.text("$" + (price * quantity).toFixed(2));
        });
    });
</script>
}

现在，如果您尝试提交缺少值的表单，则会显示错误，而不会将表单实际发布到服务器。 如果您提供满足验证的值，您应该进入 OrderSuccess 页面：

接要

在本节中，您已经使用标记助手创建了一个表单，并添加了服务器端和客户端验证。您已经成功地测试了表单。到目前为止，您还没有对发布的值做任何有意义的事情。在下一节中，您将使用已发布的值来构造电子邮件并发送它。