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字段，因此它将具有与从主视图模型应用的验证规则相同的验证规则。

但是，因为我猜你会告诉我这不是干的，嗯，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)
{
    ...
}

验证Ajax POST请求的数据

1 个答案: