从剃刀文件中定义的href中调用Javascript函数

Question

所以我有这个功能cart.remove(itemid)，它使用ajax调用从购物车中删除一个项目。 cart对象是在其自己的JavaScript文件中定义的，它的功能是可访问的，并且remove()函数可以正常工作以按预期移除项目。点击下面的链接后，弹出提醒，确认是否确实要删除该项目。如果是，则从购物车中移除该物品。

@if (Model.Count > 0) 
{ 
    foreach (var item in Model.Items) 
    { 
     <div><a title="Remove item from cart" href="javascript:cart.remove(@(item.ItemID));">Remove Item</a></div> 
    } 

} 

现在，由于不同类型的购物车中的物品，对于用户更加友好的用户界面的复杂性，我需要确认，删除项警报文本有所不同，这取决于是项目点击。我在模型中定义了一个函数GetRemoveItemAlertText(int itemid)，它返回适当的文本。我将该文本包装在json对象中，以便在浏览器状态栏中当某人悬停在链接上时，文本不会显示为remove()函数的参数之一。

javascript remove()函数已重新定义为remove(itemid, alerttext)以显示自定义删除文本，而不是每次都显示相同的文本。没有其他更改该功能;它仍然会显示一个提醒，并在用户点击yes来确认时删除该项目。这是我在尝试使用自定义警报文本删除的项目：

@if (Model.Count > 0) 
{ 
    foreach (var item in Model.Items) 
    { 
     var alert = Model.GetRemoveItemAlertText(item.ItemID); 
     <script type="text/javascript"> 
      function removeItem_@(item.ItemID)() { 
       var bodytext = "@UriEscapeDataString(alertText)"; 
       var alerttext = { 
        bodytext: bodytext 
       }; 
      cart.remove(@(item.ItemID), alerttext); 
      } 
     </script> 
     <div><a title="Remove item from cart" href="javascript:cart.removeItem_@(item.ItemID)();">Remove Item</a></div> 
    } 

} 

由于JavaScript函数就是一个循环中定义的名称需要每次都不同，因此在功能名称中的itemid。它应该抓取自定义删除项目文本，然后调用cart.remove()，就像之前在href定义中完成的那样。 问题是此函数removeItem_@(item.ItemId)()未被调用。即使我只是把alert()或console.log()放在函数中，代码也不会触发。无论如何要完成这个？我也尝试通过使用绑定到<span>' or`上的类的单击监听器来调用该函数。有什么建议么？通过查看页面源，我可以清楚地看到每个购物车的当前项目都有自己的删除项目功能，但由于某些原因，代码无法访问。

Answer 1

试试这个关于大小，当然，所有这些都可以用jQuery做容易得多，如果你想一个更好的解决方案：

@if (Model.Count > 0) 
{ 
    foreach (var item in Model.Items) 
    { 
     <div><a title="Remove item from cart" id="@item.ItemID" hreaf="javascript:return RemoveItem(@item.ItemID);" data-message="@Model.GetRemoveItemAlertText(item.ItemID)">Remove Item</a></div> 
    } 
} 

<script> 

    function RemoveItem(itemId) 
    { 
    var element = document.getElementById(itemId.toString()); 
    var alerttext = element.getAttribute('data-message'); 

    return cart.remove(@(item.ItemID), alerttext); 
    } 

</script> 

更好，如果我们可以使用jQuery：

@if (Model.Count > 0) 
{ 
    foreach (var item in Model.Items) 
    { 
     <div><a title="Remove item from cart" href="#" class="cart-item" data-itemid="@item.ItemID" data-message="@Model.GetRemoveItemAlertText(item.ItemID)">Remove Item</a></div> 
    } 
} 

<script> 

$(document).ready(function(){ 

    $('.cart-item').click(function(e){ 
     e.stopProgagation(); 
     cart.remove($(this).data('itemid'), $(this).data('message')); 
    }); 

}); 

</script>