Question

我有一个非常简单的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。现在，我想使用Name启用Email和jquery.validate的客户端验证，但无法弄清楚如何实现它。网上的所有教程都说我必须使用这样的代码：

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

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

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

Answer 1

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

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

您的服务器端验证工作因为它使用不同的机制。它将请求属性绑定到模型后（在您的PreOrderProductCommand模型中）检查服务器上的验证属性。根据属性的名称进行补贴，所以如果你有正确的名字，一切都应该没问题。

唯一的另一种方法是使用您需要的验证attridute手动创建标记。（我的意思是你的视图中的简单html）但我不推荐它。

Answer 2

您需要将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);
}

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

2 个答案: