Как изменить атрибуты объекта @html на основе значения

#javascript #c# #asp.net-mvc-5

#javascript #c# #asp.net-mvc-5

Вопрос:

У меня есть представление редактирования в MVC5 / C #. В этом представлении есть @html .Текстовое поле, содержащее целое число. Если это целое число меньше нуля, я хотел бы изменить текстовое поле на жирное и красное. И измените какой-нибудь другой html-объект (атрибуты) — например, выпадающий список, который будет заблокирован.

Я просмотрел некоторые материалы с помощью JScript, но это очень ново для меня. И я не совсем могу туда попасть. Даже не уверен, что JScript — это правильный путь.

Вот мой html / вид текстового поля, которое содержит целое число.

         <div class="form-group">
        @Html.LabelFor(model => model.UnitsOrdered, (string)"Units Remaining ", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBox("Remaining", null, new { @class = "form-control", Value = ViewBag.Total, @readonly = "readonly" })
        </div>
    </div>
  

Если «Осталось» меньше нуля, я бы хотел, чтобы текст шрифта в «Оставшемся» был красным и выделен жирным шрифтом. Я также хотел бы сделать выпадающий список «CheckOpen» заблокированным или доступным только для чтения. (Это предотвратит обработку заказа пользователями при отрицательном балансе)

Я запутался в JScript относительно того, как управлять атрибутами html-объектов и как находить их по идентификатору.

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

             <!-- Begin JScript for negative balance-->
            <script>
            $( document ).ready(function() {

             });

            </script>
        <!-- End JScript for Negative Balance-->
  

С помощью комментариев (ниже) я смог выполнить то, что мне было нужно.

Я добавил сюда несколько стилей css:

 <style>
.pos {
    color: black;
    font-weight: normal;
}

.neg {
    color: red;
    font-weight: bold;
}
  

И это был мой последний Jscript, который сработал

             <!-- Begin JScript for negative balance-->
            <script>
                $(document).ready(function () {

                    var remaining = $('#Remaining').val();


                    if (remaining > -1) {
                        $("#Remaining").addClass("pos");
                        $('select[name=CheckOpen]').prop('disabled', false);

                    } else {
                        $("#Remaining").addClass("neg");

                        $('select[name=CheckOpen]').prop('disabled', true);

                    }                                   
             });

            </script>
        <!-- End JScript for Negative Balance-->
  

При этом текст становится красным и выделенным жирным шрифтом, если значение int меньше 0, и отключается дополнительный выпадающий список. Если значение int равно 0 или больше, текст остается черным, а дополнительный выпадающий список остается включенным.

Спасибо!!!

Комментарии:

1. @Html.TextBox(«Remaining» ../ создает элемент с идентификатором=»Remaining» var remaining = $(‘#Remaining’).val(); вернет значение для текстового поля. $(‘#Remaining’).addClass(‘myStyle’), чтобы изменить текст на жирный красный. $(‘#Remaining’).removeClass(‘myStyle’), чтобы удалить оформление жирным красным шрифтом. Пожалуйста, попытайтесь решить с помощью этой информации и обновите свой вопрос.

2. Еще одна подсказка… $(‘#Осталось’).on(‘изменить’, функция() { // изменить стиль здесь });

3. Обратите внимание, что JScript — это ныне несуществующая реализация JavaScript. В наши дни вам лучше просто вызывать JavaScript или ECMAScript. Кроме того, вы можете захотеть заглянуть в фреймворк проверки, чтобы вам не приходилось создавать свой собственный: learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started /…

4. С помощью подсказок, предоставленных @daddygames, и еще нескольких поисковых запросов в Google я смог заставить это работать. Спасибо! Я обновлю вопрос выше, чтобы любой, кто хочет сделать подобное, мог найти ответ.