Foreach:在tbody中使用Javascript方法的Razor

时间:2014-02-23 01:34:07

标签: c# javascript html5 razor

所有。 我正在尝试动态创建一个表。所以在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文件中。

2 个答案:

答案 0 :(得分:1)

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

如果您在外部javascript文件中定义了此功能,请确保包含 ABOVE 您的foreach代码。可以在视图的顶部。

即使这可能会解决您当前的问题,我建议您做一些模板逻辑,而不是在循环内多次调用AggregarMenu mehtod。蒂姆的答案是一个很好的选择,或者您可以研究其他一些模板解决方案。

答案 1 :(得分:1)

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

<table>
<tbody>
@foreach (FoodkitGestores.Entidades.MenuCantidad m in Model.p.listaMenu)
{
  <tr id="menu-@m.idMenu" 
      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>