ASP.NET MVC jQuery Unobtrusive Validation 在两个日期之间进行比较

Question

我正在尝试使用System.ComponentModel.DataAnnotations 验证StartDate 和EndDate，这样结束日期不得早于开始日期。在我的模型中，我将日期定义如下：

public partial class MyModel
{
    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    public DateTime EndDate { get; set; }
}

我还创建了一个视图模型，如下所示：

public class CompareDateVM : IValidatableObject
{

    public MyModel myModel { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext) {

        if (myModel.EndDate < myModel.StartDate) {
            yield return
              new ValidationResult(errorMessage: "End Date cannot be lesser than Start Date.",
                                   memberNames: new[] { "EndDate" });
        }
    }
}

服务器端验证有效，错误消息能够显示在我的查看页面的`@Html.ValidationSummary() 中，但我无法在客户端进行验证。

@model CompareDateVM
<form asp-controller="AddDate" asp-action="Add" method="post">

    <label class="label">Start Date</label>
    <input type="date" asp-for="myModel.StartDate" />
    <span asp-validation-for="myModel.StartDate" class="validation"></span><br /><br />

    <label class="label">End Date</label>
    <input type="date"  asp-for="myModel.EndDate" />
    <!-- This is where the client side validation error message show up, but it does not appear-->
    <span asp-validation-for="myModel.EndDate" class="validation"></span>

    <input type="submit" value="Add Date" />
</form>
<!-- Server side validation works -->
<p>@Html.ValidationSummary()</p>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

如何让<span asp-validation-for="myModel.StartDate" class="validation"></span> 使用 jQuery Unobtrusive Validation 在客户端显示错误消息？

Answer 1

要在 ASP.NET/ASP.NET Core MVC 中获得自定义的非侵入式验证，您需要使用RemoteAttribute，如下所示：

第 1 步：您的模型类应如下所示：

public partial class MyModel : IValidatableObject
{
    [Required]
    public DateTime StartDate { get; set; }

    [Required]
    [Remote(action: "IsEndDateSmallerThanStartDate", controller: "Validation", AdditionalFields = nameof(StartDate), ErrorMessage = "End Date cannot be lesser than Start Date.")]
    public DateTime EndDate { get; set; }

   // This is for server side protection
   public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
   {
       if (EndDate < StartDate)
       {
          yield return new ValidationResult(errorMessage: "End Date cannot be lesser than Start Date.", memberNames: new[] { "EndDate" });
       }
   }
}

第 2 步：然后在验证控制器中：

public class ValidationController : Controller
{
    public JsonResult IsEndDateSmallerThanStartDate(DateTime endDate, DateTime startDate)
    { 
        bool isEndDateGreaterThanStartDate =  endDate > startDate;
        return Json(isEndDateGreaterThanStartDate); // if isEndDateGreaterThanStartDate variable value is true, that means validation is successful, if false that means validation fails.
    }
}

记住您不需要任何 ViewModel，因此请移除 ViewModel。

Step-3 : 那么你的cshtml文件应该如下：

@model MyModel

<form asp-controller="AddDate" asp-action="Add" method="post">
    <!-- Server side validation works -->
    <p>@Html.ValidationSummary()</p>

    <label class="label">Start Date</label>
    <input asp-for="StartDate" class="form-control" />
    <span asp-validation-for="StartDate" class="validation"></span><br /><br />

    <label class="label">End Date</label>
    <input asp-for="EndDate" class="form-control" />
    <span asp-validation-for="EndDate" class="validation"></span>

    <input type="submit" value="Add Date" />
</form>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

希望现在一切都能按预期进行！