从 Razor 文件中定义的 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>
    }

}

现在，由于购物车中不同类型商品的复杂性，为了获得更加用户友好的 UI，我需要根据点击的商品不同的确认删除商品警报文本。我在模型中定义了一个函数GetRemoveItemAlertText(int itemid)，它返回适当的文本。我将该文本包装在一个 json 对象中，以便当有人将鼠标悬停在浏览器状态栏中的链接上时，该文本不会作为 remove() 函数的参数之一可见。

javascript remove() 函数已重新定义为 remove(itemid, alerttext) 以显示自定义删除文本，而不是每次都显示相同的文本。该功能没有其他变化；如果用户单击“是”进行确认，它仍会显示警报并删除该项目。这是我尝试删除带有自定义警报文本的项目：

@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` 上的类的单击侦听器来调用该函数。有什么建议么？通过查看页面源代码，我可以清楚地看到，购物车的每个当前商品都定义了自己的 remove-item 函数，但由于某种原因，代码无法访问。

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>