Проверка ASP.NET поля ajax

Question

Какой самый простой способ изменить цвет текстового поля в форме ASP .NET MVC в соответствии с только что введенным значением ДО отправки формы.

Используемый цвет возвращается запросом БД.

Например:

Запрос возвращает красный цвет, если число, введенное в поле, меньше количества, зарегистрированного для элемента в БД.

Спасибо

Answer 1

Вы можете сделать это, как в примере ниже, используя jQuery:

//bind a function to the blur even of the text field
$("#the-imput-control").blur(function () {
     var value = this.val();
     //send the value to the server and then process the result.
     $.getJSON("yourUrl", { key: value }, function(data) {
         //return a json object with a property "color"
         //and use its value to set the text field's color
         $("#the-imput-control").css("color", data.color);
     });
     //you can of course use another ajax function depending on your needs.
});

Answer 2

Если это не создает какого-либо риска для безопасности, было бы лучше кэшировать доступное количество для продуктов, а не идти на сервер для проверки. Таким образом, пользовательский интерфейс будет более отзывчивым - и пользовательский опыт будет лучше. Итак, в основном,

// JS
var availableQuantities = [10, 15, 30];
$(".the-imput-control").blur(function () {
     var value = $(this).val();

     var productIndex = $(this).parent().children().index(this); // sort of

     $(this).toggleClass('invalid', (availableQuantities[productIndex] < value));
});

// CSS
.invalid { color: red; }

Answer 3

Вы бы хотели, чтобы событие нажималось для кнопки отправки или для изменения количества, чтобы получить количество продукта.

Вы также можете загрузить цвет в начале, но запас может измениться во время ввода пользователя.

Например

1. Пользователь загружает форму заказа, количество на складе: 4, возможно, вы установили оранжевый цвет, потому что он низкий ...
2. пользователь заполняет форму, некоторые другие пользователи заказывают всего 3, 1 остается на складе
3. пользователь хочет заказать 2 товара.
4. пользователь нажимает кнопку "Отправить", ваше событие проверяет количество и отображает сообщение / меняет цвет текстового поля

Как я понял, у вас не будет постбэка, если сумма в дБ ниже, чем заказанная сумма .... но учтите, что у пользователей может не быть включен javascript, вы должны также реализовать на стороне сервера.

Лично я бы сделал это на стороне сервера, потому что на стороне клиента это просто дополнительная функциональность, на которую нельзя положиться.