$@Html.DisplayFor (дает мне номер на столе, я хочу использовать это число, чтобы IF давало мне это значение

Question

это мой код, я использую таблицу, и эта таблица дает мне определенное число, скажем, 1000, в моем if, я хочу иметь возможность использовать это сохраненное число, чтобы при нажатии на кнопкумоя переменная ('total') будет равна 1000, я не знаю, как ее получить, я попробовал item.Salario, Model.Salario, и она не будет работать, я не знаю, возможно ли это вообще

@model IEnumerable<Planilla.Models.Planillas>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Planillas</h2>
<p>
@Html.ActionLink("Agregar Planilla", "Nuevo", null, new { @class = "btn btn- 
success" })
</p>
<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Empleado.Nombre)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Salario)
    </th>


    <th></th>
</tr>


@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Empleado.Nombre)
        </td>
        <td>
            $@Html.DisplayFor(modelItem => item.Salario)
        </td>


        <td>
            @Html.ActionLink("Edit", "Modificar", new { id = item.id }, new 
 { @class = "btn btn-primary" }) |

                <button onclick="myFunction()">Calcular </button>

                <p id="demo"></p>

                <script>
                    function myFunction() {
                        var Salario = item.Salario;

                      var total = Salario;
                        var mtotal;
                        if (total >0) {
                            mtotal = "su total es " + total;
                        } else {
                            mtotal = "Salario tiene que ser mayor que 0";
                        }
                        document.getElementById("demo").innerHTML = mtotal;
                    }
                </script>
            </td>
        </tr>
    }
</table>

В основном

   $@Html.DisplayFor(modelItem => item.Salario)

Дает мне определенное число, я хочу отобразить это число на моем, если в следующей части

function myFunction() {
                        var Salario = item.Salario;

Так что, когда янажмите на кнопку, и я получу номер этого элемента. Саларио дает мне на стол.

Как мне это сделать?

Answer 1

Мало проблем, которые я заметил в вашем коде.

Прежде всего, у вас есть элемент p с id="demo", который находится внутри вашего цикла. Это означает, что ваш код сгенерирует более одного p элемента с одинаковым значением атрибута Id. Это неверная разметка HTML! Идентификаторы должны быть уникальными.

Вы также определяете определение функции myFunction внутри цикла! Запустите свой код и проверьте источник просмотра страницы и убедитесь, что это то, что вам нужно. Нужно ли определять N раз, как этот метод? Поведение одинаково для всех ваших строк, отличается только значение Salario :)

Что вы можете сделать, так это сохранить значение, которое вы хотите передать, в атрибуте данных HTML5 кнопки, а затем подключить событие click к кнопке, используя ненавязчивый JavaScript. Когда кнопка нажата, вы можете использовать this, чтобы получить ссылку на нажатую кнопку, прочитать значение из атрибута данных и использовать его для расчета. Чтобы обновить элемент p для текущей строки, вы можете использовать относительные методы, такие как метод jQuery closest и метод find.

Вот рабочий пример, в котором для манипулирования DOM используется библиотека jQuery.

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Empleado.Nombre)
        </td>
        <td>
            $@Html.DisplayFor(modelItem => item.Salario)
        </td>
        <td>
              <button data-salario="@item.Salario" calculate>Calcular </button>
              <p result></p>
        </td>
    </tr>
}

Вы видите, что я установил атрибут data-salario для кнопок, и его значение является свойством Salario элемента. Я также добавил атрибут result в тег p, который я буду использовать для получения этого элемента в моем селекторе jQuery (некоторым людям нравится добавлять класс css для этого, но я этого не делаю). Я сделал то же самое для кнопки (добавлен атрибут calculate, но мы также можем использовать атрибут data-salario.

$(function () {

    // Listen to the click event of any buttons with a `calculate` attribute
    $("button[calculate]").click(function (e) {

        var $this=$(this);

        //Read the value from hml5 attribute
        var value=$this.data("salario");

        var mTotal="Total : "+ value;
        // you can add if your IF condition here to update mTotal 

        // First get the outer TD,
        // Then get the p tag with result attribute
        // Then update the text with your mTotal variable value
        $this.closest("td").find("p[result]").text(mTotal);

    });
});