ASP.NET MVC-使用视图模型时的客户端验证

本文关键字：客户端 验证 模型 视图 NET MVC- ASP | 更新日期: 2023-09-27 18:19:50

我有一个非常简单的ASP.NET MVC网站，用户可以在这里浏览产品并进行预购。要放置它，他们必须指定名称和电子邮件地址。控制器看起来像这样：

[HttpGet]
public ActionResult Product(string id)
{
    return View(new ProductViewModel(id));
}
[HttpPost]
public ActionResult Product(PreOrderProductCommand command)
{
    if (ModelState.IsValid)
    {
        command.Process();
        return View("ThankYou");
    }
    else
        return Product(command.Id);
}

ProductViewModel包含各种产品信息（名称、说明、价格等），而PreOrderProductCommand仅包含3个string属性：Id、Name和Email。现在我想使用jquery.validate启用Name和Email的客户端验证，但不知道如何实现。网上所有的教程都说我必须使用这样的代码：

@Html.ValidationMessageFor(model => model.Email)

但问题是，我的视图有ProductViewModel作为模型，而这个类没有属性Email。此属性及其验证逻辑位于PreOrderProductCommand中。

在这种情况下，实现客户端验证的正确方法是什么？我错过了什么？

ASP.NET MVC-使用视图模型时的客户端验证

您需要将Email属性添加到ProductViewModel中。具有以下属性：

[DisplayName("Email")]
[Required(ErrorMessage = "Please enter email")]
public string email { get; set; }

然后将此模型传递到HttpPost控制器

并从内部填充命令类，即

[HttpPost]
public ActionResult Product(ProductViewModel model)
{
PreOrderProductCommand command = new PreOrderProductCommand();
command.Id = model.id;    
command.Email = model.email;
if (ModelState.IsValid)
{
    command.Process();
    return View("ThankYou");
}
else
    return Product(command.Id);
}

否，对于客户端验证，您应该将Email属性添加到ProductViewModel中。

这是因为HtmlHelpers根据ViewModel属性上方的Attributes在输入中创建data-validation属性，然后jquery.validate检查此属性。

您的服务器端验证之所以有效，是因为它使用了不同的机制。在将请求属性绑定到您的模型（在您的案例中为PreOrderProductCommand模型）后，它会检查服务器上的验证属性。捆绑是根据属性名称进行的，所以如果你有正确的名称，一切都会好起来。

唯一的其他方法是使用所需的验证属性手动创建标记。（在你的视图中，我指的是纯html）但我不推荐它。

相关文章：