c# - 从 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>
    }

}

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

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

@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()在函数内部，代码永远不会触发。无论如何要做到这一点？我还尝试通过使用绑定(bind)到 <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>