$@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)

给了我一个特定的数字，我想将该数字显示到 我的 if 在以下部分中

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

所以当我点击按钮时，我会得到 item.Salario 在桌子上给我的数字。

我该怎么做？

Answer 1

我在您的代码中发现了一些问题。

首先，你有p 元素和id="demo"，它在你的循环中。这意味着您的代码将生成多个具有相同Id 属性值的p 元素。那是无效的 HTML 标记！ ID 应该是唯一的。

您还在循环内定义myFunction 函数定义！运行您的代码并检查页面的视图源代码，看看这就是您想要的。我们是否需要定义此方法 N 次？所有行的行为都是相同的，只有 Salario 的值不同:)

你可以做的是，你可以保留你想在按钮的 HTML5 数据属性中传递的值，然后使用不显眼的 JavaScript 连接按钮上的点击事件。单击按钮时，您可以使用this 获取对单击按钮的引用，从数据属性中读取值并将其用于计算。要更新当前行的p 元素，可以使用jQuery closest 方法和find 方法等相关方法。

这是一个使用 jQuery 库进行 DOM 操作的工作示例。

@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 属性。我还在p 标记中添加了result 属性，我将使用它在我的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);

    });
});