MVC5 客户端验证未启动答案

【问题标题】：MVC5 Client Side Validation not kicking inMVC5 客户端验证未启动
【发布时间】：2017-04-04 08:25:12
【问题描述】：

所以我在 Stack Overflow 上解决了很多问题，并验证了我能想到的几乎所有内容，但我无法让客户端验证正常工作。我不知道我做错了什么。

为了缩短问题，删除了原始代码，因为下面提供了一个更简化的示例。

编辑：

我正在编辑这个问题，试图消除混乱并找到问题的根源。因此，为了让这个变得非常简单，这是我在我的项目中所做的：

第 1 步：创建一个新的 TestController

public class TestController : Controller
{
    [HttpGet, AllowAnonymous]
    public ActionResult Index()
    {
        return View(new TestViewModel());
    }

    [HttpPost, AllowAnonymous, ValidateAntiForgeryToken]
    public ActionResult Index(TestRequestModel requestModel)
    {
        if (!@ModelState.IsValid)
        {
            return new TestViewModel
            {
                Email = requestModel.Email
            };
        }
        return View();
    }
}

第 2 步：创建一个新的 TestView

@model MyProject.Models.TestViewModel
@{
    ViewBag.Title =  "User Console Home";
}

@using (Html.BeginForm("Index", "Test", FormMethod.Post, new {@class = "form-horizontal", role = "form"}))
{
    @Html.ValidationMessageFor(m => m.Email)
    @Html.LabelFor(m => m.Email)
    @Html.TextBoxFor(m => m.Email)
}

第 3 步：创建一个新的 TestRequestModel

public class TestRequestModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

第 4 步：创建一个新的 TestViewModel

public class TestViewModel
{
    public string Email { get; set; }
}

第 5 步：确保 Web.Config 包含正确的键

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

第 6 步：确保我的 _Layout.cshtml 包含正确的 javascript 文件

<!DOCTYPE html>
<html>
<head>
    <script src="/JQuery/jquery-2.2.3.js"></script>
    <script src="/JQuery/jquery-ui-1.11.4.js"></script>
    <script src="/JQuery/jquery.validate.js"></script>
    <script src="/JQuery/jquery.validate.unobtrusive.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

将我的项目与具有客户端验证功能的全新项目进行比较，代码几乎完全相同

我错过了什么？开箱即用，我不需要编写适配器来获得必需或电子邮件地址属性工作。我觉得我缺少一个设置或一段代码，我就是不知道是什么。

【问题讨论】：

你的 GetClientValidationRules() 方法是否被击中？
@StephenMuecke 据我所知不是。我在上面设置了一个断点并重建了网站，以确保它没有被击中。但是，服务器端验证运行良好。
您已经完全改变了问题，但 Reza Aghaei 是正确的 - 视图中的模型是 TestViewModel，它没有应用于其 Email 属性的任何验证属性，因此没有 @为该属性生成了 987654330@ 属性，因此不会向 jquery.validate 添加任何规则，只需将 [Required] 和 [EmailAddress] 属性添加到 TestViewModel 中的 Email 属性，您将获得客户端验证。

标签： c# asp.net-mvc validation asp.net-mvc-5 client-side-validation

【解决方案1】：

您用于视图的模型是TestViewModel

@model MyProject.Models.TestViewModel

但是您没有使用验证属性修饰TestViewModel 的Email 属性，因此将您的视图模型更改为：

public class TestViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }
}

注意：客户端验证将用于您使用TestViewModel 创建的渲染视图。因此，要启用客户端验证，您需要使用验证属性来装饰其属性。这些验证与您用作POST 操作的输入的TestRequestModel 没有任何关系。你在TestRequestModel上设置的属性会在模型绑定时将数据发布到服务器后被命中。

【讨论】：

你说的有道理，今晚我会测试你的理论并回复它是怎么回事。
它对我不起作用，我将在周末再次使用一个干净的示例进行更多测试，因为我只在我的常规模型上进行了测试。
没问题，如果您按照启用客户端验证的步骤进行操作，它将起作用。别担心。您的代码的主要问题是我在回答中提到的。
您写的完全正确，但是，就我而言，这只是问题的一半。在上面的快速示例中，我没有显示我正在使用接口，我在原始问题中就有这个问题（我在编写示例时删除了该部分）。接口由视图引用。因此，即使我将属性添加到具体的 ViewModel 类中，它仍然无法正常工作，因为 Interfae View Model 没有这些属性。为了解决我的问题，我也必须在接口上添加属性。
我在编辑之前没有阅读这篇文章。我自己没有测试接口，好点。我也会用接口测试它，我可以:)

【解决方案2】：

您的代码在一个新项目中为我工作。我刚刚更改了 TestViewModel 模型。其他代码相同。您发送给return view(model) 查看的模型和您在视图中使用的模型（即@model MyProject.Models.TestViewModel）应该相同客户端验证工作。

public class TestViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }
    }

您可以像我一样更改 TestViewModel 或在视图中使用 TestRequestModel 并将索引方法的返回语句更改为 return View(new TestRequestModel()) ;

如果它不起作用，请将您的 js 文件直接拖到您的页面中并测试 js(s) 是否正在加载。

【讨论】：

谢谢你，但是，你写的不一定是真的。您可以通过像我在客户端验证中那样指定电子邮件来重复使用电子邮件等验证。实际上，我曾一度让该代码工作，我只是不知道到底发生了什么变化使其停止工作。
我已更新我的问题以消除自定义验证中的混乱