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)，以显示自定义删除文本，而不是每次都显示相同的文本。该功能没有其他变化;如果用户单击“是”确认，它仍会显示警报并删除该项目。这是我尝试使用自定义警报文本删除项目：

@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>

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

1 个答案: