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

本文关键字：href 调用 Javascript 函数 定义 Razor 文件 | 更新日期: 2023-09-27 17:58:37

所以我有一个函数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`上的类的click监听器来调用该函数。有什么建议吗？通过查看页面源代码，我可以清楚地看到，购物车的每个当前项目都定义了自己的移除项目功能，但由于某种原因，代码无法访问。

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

试试这个尺寸，当然，如果你想要更好的解决方案，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>
相关文章：