Ненавязчивая проверка ASP.NET MVC jQuery для сравнения двух дат

Question

Я пытаюсь подтвердить StartDate а также EndDate с помощью System.ComponentModel.DataAnnotationsтаким образом, что дата окончания не должна быть меньше даты начала. В моей модели я определил даты следующим образом:

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: Ваш класс Model должен быть следующим:

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.

Шаг 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>

Надеюсь, что теперь все будет работать как положено!