验证 Ajax POST 请求的数据

Question

我有一个订单输入页面和一个对应的 ViewModel（简化示例）：

public class OrderCreateViewModel
{
    [Required]
    [StringLength(100)]
    public string Remark { get; set; }

    [Required]
    [StringLength(50)]
    public string AddressCity { get; set; }
}

此模型用于创建视图：

@model MyNamespace.OrderCreateViewModel

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false)
    @Html.EditorFor(model => model.Remark)
    @Html.EditorFor(model => model.AddressCity)
    <input type="submit" value="Create order" name="saveButton" />
}

控制器中 POST 请求的 Create 动作是：

[HttpPost]
public ActionResult Create(OrderCreateViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        // Save order in DB
        return RedirectToAction("Index");              
    }
    return View(viewModel);
}

顺序（必填字段和字符串长度）在客户端（使用不显眼的 Javascript、jQuery 验证）和服务器端 (ModelState.IsValid) 进行验证。

现在，我在页面上添加了第二个按钮，目的是将Address（在示例中为AddressCity）保存在主表中。这应该发生在 Ajax POST 请求中（使用 jQuery）：

<input id="buttonAddAddress" type="button" value="Add address" />

单击事件处理程序与此按钮挂钩，该按钮读取与地址相关的输入字段的内容（示例中仅AddressCity）并向服务器发送 POST 请求：

$("#buttonAddAddress").click(function () {
    var address = JSON.stringify({
        City: $('#AddressCity').val()
    });

    $.ajax({
        type: 'POST',
        url: '@Url.Action("AddAddress")',
        data: address,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        ...
    });
});

控制器对此请求有相应的 POST 动作：

[HttpPost]
public ActionResult AddAddress(Address address)
{
    // Create address in database
    return Json(true);
}

Address 是辅助类型：

public class Address
{
    public string City { get; set; }
    // ...
}

此代码无法验证 AddressCity 是否是必需的，并且不能超过 50 个字符。

问题：如何向此 Ajax POST 请求添加验证 - 客户端和服务器端验证？我不知道如何在客户端执行此操作。在服务器端，我想避免明显的琐碎解决方案来重复验证属性的含义（如if (!string.IsNullOrEmpty(address.City) && address.City.Length <= 50) ... 等）并在可能的情况下利用现有的验证属性。

Answer 1

对于服务器：

public class Address
{
    [Required]
    [StringLength(50)]
    public string City { get; set; }
}

对于客户端，由于您使用的是 AddressCity 字段，它已经具有与从主视图模型应用的相同的验证规则。

但既然我猜你会告诉我这不是 DRY，好吧，OOP 来救援：

public class AddressViewModel
{
    [Required]
    [StringLength(50)]
    public string City { get; set; }
}

和你的主视图模型：

public class OrderCreateViewModel: AddressViewModel
{
    [Required]
    [StringLength(100)]
    public string Remark { get; set; }
}

以及您各自的控制器操作：

[HttpPost]
public ActionResult Create(OrderCreateViewModel viewModel)
{
    ...
}

[HttpPost]
public ActionResult AddAddress(AddressViewModel address)
{
    ...
}