Аннотации данных из DTO не проверяются в представлении - PullRequest
0 голосов
/ 15 октября 2018

Я использую ядро ​​.NET с шаблонной платформой и у меня проблемы с проверкой данных на стороне клиента.Насколько я понимаю, аннотации данных, используемые в DTO, проверяются на стороне сервера.Я ищу способ выполнить эту проверку на стороне клиента, и я подумал, что я мог бы просто использовать его, создав объект этого DTO в моих моделях представления и используя проверку модели представления, как я привык делать это с .NETядро.

Что я пытаюсь сделать:

Я пытаюсь получить подтверждение данных в моей форме, используя аннотации данных из DTO.Моя модель представления содержит объект DTO в качестве свойства и использует его в своей форме.Кажется, он выполняет проверку, поскольку не будет отправлять, пока все не будет правильно, однако он не будет показывать никакой проверки, КРОМЕ проверки для ввода по электронной почте;и я не уверен, почему он будет делать это для электронной почты и ничего больше.

Вот мое представление

<form asp-action="AddEmergencyContactPost" method="post" id="addEmergencyContactForm" role="form">
<div class="row clearfix">
  <div class="col-sm-12">
    <div class="form-group form-float">
      <div class="form-line">
        <input asp-for="EmergencyContact.PhoneNumber" type="tel" class="validate form-control">
        <label asp-for="EmergencyContact.PhoneNumber" class="form-label"></label>
        <span asp-validation-for="EmergencyContact.PhoneNumber" class="text-danger"></span>
      </div>
    </div>
  </div>
</div>
</form>

Вот мое свойство DTO и то, как модель представления использует объект

//DTO property
[Required]
[StringLength(10, MinimumLength = 10, ErrorMessage = "Invalid Phone Number")]
public string PhoneNumber { get; set; }

//View Model
public CreateEmergencyContactDto EmergencyContact { get; set; }

А вот javascript, который обрабатывает запрос

$("#addEmergencyContactForm").on("submit",
        function (e) {
            e.preventDefault();
            debugger;
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (data) {
                    if (data.result === "success") {
                        swal({
                            title: "Emergency Contact Added",
                            icon: "success"
                        }).then(function () {
                            location.reload();
                        });

                    } else {
                        swal({
                            title: "Please Enter the Correct Type of Data",
                            icon: "warning"
                        }).then(function () {
                            location.reload();
                        });
                    }
                    _$modal.modal("toggle");
                }
            });
        });

Что я уже пробовал:

Пока яя попытался добавить тип к помощнику по тегу 'tel' и вернуть представление, если состояние модели недопустимо.Я также попытался сделать объект в модели представления обязательным, но при этом устанавливаются только обязательные теги для всех полей (и по какой-то причине выполняется только проверка для одного поля за раз).Ниже приведен рисунок, показывающий, как проверяется электронная почта, но ничего не происходит.enter image description here

Я также пытался использовать jquery validate, но всякий раз, когда я проверяю, верна ли форма, она всегда возвращает true, несмотря ни на что.Я также попытался установить флаги проверки явно, но затем я получаю сообщение об ошибке, показанное ниже enter image description here

Вот код, который я использовал для добавления явной проверки.

$(this).validate({
                rules: {
                    EmergencyContact.PhoneNumber: {
                        required: true,
                        minlength: 10,
                        phoneUS: true
                    }
                },
                messages: {
                    EmergencyContact.PhoneNumber{
                    required: "Please Enter A Phone Number",
                    phoneUS: "Please Enter A Valid Phone Number",
                    minLength: "Please Enter A Valid Phone Number"

                }
            }
        });

Итак, есть ли способ выполнить эту проверку на стороне клиента с помощью этих помощников аннотаций данных?И если нет, то какой будет самый простой способ выполнить проверку на стороне клиента для моей формы, которая содержится в моем индексе, а не частично?Заранее благодарим за любую помощь, которую вы можете оказать.

РЕДАКТИРОВАТЬ : Вот шаблон запуска, который я использую из шаблона

enter image description here

1 Ответ

0 голосов
/ 03 ноября 2018

Мое понимание проверки модели представления было немного неправильным.Я думал, что это обеспечит проверку на стороне клиента, но вместо этого он обеспечит проверку на стороне сервера.Отображаемая проверка произошла из проверки браузера.


Для проверки на стороне клиента я использовал parsley , который проверял мои данные с помощью помощников по тегам.


Для проверки на стороне сервера я использовал некоторые функции Boilerplate, чтобы выдать ошибку как Json, а затем отобразить ошибку, используя Toastr .Пример этого следующий.Это будет мой метод контроллера, который я вызываю для сохранения формы

if ()
{
    throw new UserFriendlyError("Message");
}

И тогда я буду иметь дело с ошибкой в ​​вызове ajax

error: function(jqXHR){
    abp.notify.error(jqXHR.responseJSON.error.message);
}

Я уверен, что естьлучшие способы сделать это, но пока это то, что я нашел, работает лучше всего для меня.


РЕДАКТИРОВАТЬ:

Как указал @aaron, если бы я использовал abp.ajax, ошибка будет отображаться автоматически.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...