Foreach: Razor with Javascript method inside tbody

Question

all.我正在尝试动态创建一个表。所以在 tbody 标签中，我有这段代码，它可以生成所有行。

       <tbody id="body">
            @foreach (FoodkitGestores.Entidades.MenuCantidad m in Model.p.listaMenu)
            {
                <script type="text/javascript">
                    var idMenu = Number(@m.idMenu);
                    var nombre = $("#menu-"+idMenu).find(".item").text();
                    var precio = parseFloat($("#menu-"+idMenu).find(".item").attr("data-precio"));
                    var cantidad = Number(@m.cantidad);
                    var cantidadEntregada = Number(@m.cantidadEntregada);    
                    AgregarMenu(idMenu, nombre, precio, cantidad, cantidadEntregada);            
                </script>
            }
        </tbody>

所以，问题是它没有找到功能"AgregarMenu"。说它没有定义。但它是，我测试了它，它正在工作。

我尝试添加标签，但 tbody 中的 HTML5 不支持它，而且它不起作用。它只是从字面上写"AgregarMenu（idMenu， nombre， precio， cantidad， cantidadEntregada）;"

有什么线索吗？多谢！

编辑：AgregarMenu是一个Javascript方法，位于已经引用的.js文件中。

Answer 1

假设AgregarMenu是一个javascript方法，你需要确保在调用方法的部分之前加载定义方法的脚本。

如果您在外部 javascript 文件中定义了此函数，请确保在 foreach 代码上方包含该函数。可能在您的视图顶部。

尽管这可能会解决您当前的问题，但我建议您执行某种模板逻辑，而不是在循环中多次调用 AggregarMenu mehtod。Tim 的回答是一个不错的选择，或者您可以考虑其他一些模板解决方案。

Answer 2

我建议最好使用数据属性装饰项目并构建单个脚本来迭代项目，从数据属性中提取值并应用函数。实际上，通过在函数定义之外使用不同值重复相同的代码，可以在全局命名空间中重复变量定义。 如果您这样做并确保该方法在 DOM 加载后运行，只要函数在页面上，它就应该既有效又是一个更干净的实现。

<table>
<tbody>
@foreach (FoodkitGestores.Entidades.MenuCantidad m in Model.p.listaMenu)
{
  <tr id="[e-mail]" 
      class="menu" 
      data-id="@m.idMenu"
      data-cantidad="@m.cantidad" 
      data-cantidadEntregada="@m.cantidadEntregada">
        <td class="item" data-precio="35.15">35.15</td>
  </tr>
}
</tbody>
</table>
<script type="text/javascript">
   $(function() {
       $('.menu').each(function() {
           var $this = $(this),
               nombre = Number($this.data('id')),
               parseFloat($this.find(".item").data("precio")),
               cantidad = Number($this.data('cantidad'));
               cantidadEntregada = Number($this.data('cantidadEntregada');    
           AgregarMenu(idMenu, nombre, precio, cantidad, cantidadEntregada);
       });
   });
</script>