c# asp.net mvc - 从带有参数的 html.actionlink 调用脚本函数答案

【问题标题】：c# asp.net mvc - calling script function from html.actionlink with a parameterc# asp.net mvc - 从带有参数的 html.actionlink 调用脚本函数
【发布时间】：2016-02-20 13:10:27
【问题描述】：

我有以下代码 -

@model MyFirstProject.Models.Product

<script type="text/javascript">
    function AtC(prodid) {
        var url = "/Shopping/AddToCart/";
        $.post(url, { pID: prodid });
    }
</script>

<table style="background-color:gray; padding:20px;">
    <tr>
        <td>
            <h3 align="center">@Model.Title</h3>
            <p align="center" style="color:white">@Model.UploadDate.Day.@Model.UploadDate.Month.@Model.UploadDate.Year</p>
            <p align="center">@Model.ShortDescription</p>
        </td>        
    </tr>
    <tr>
        <td>@Html.ActionLink("Add to cart", "Index", "Shopping", null, new {onclick = "AtC()", @style="color: White;" })</td>
        <td>@Html.ActionLink("Show product details", "ProductDetails", new {pID = Model.ProductID}, new { @style = "color: White;" })</td>
    </tr>
</table>

我需要向 AtC 函数发送一个 int：Model.ProductID。我已经尝试了几种方法来修复它，但没有任何效果。请帮忙，因为我不知道该怎么办。

更新谢谢 pλul' 这正是我所需要的！我的问题解决了！

【问题讨论】：

尝试写javascript:AtC();取而代之的是“索引”、“购物”。让我快速编辑一下：现在发生的事情是您要访问一个链接而不是激活 javascript 函数（您正在同时执行这两项操作）并且此页面移动正在干扰您的函数运行
这会起作用：new {onclick = "AtC(" + @Model.ProductID + ")" 虽然使用 ActionLink 没有任何意义，因为您没有对 ActionLink 做任何事情除了添加 onclick 处理程序

标签： javascript c# asp.net-mvc razor onclick

【解决方案1】：

这应该可行。

@Html.ActionLink("Add to cart", "Index", "Shopping", null, 
                     new { onclick = "AtC("+Model.ProductID+")", @style = "color: red;" })

我个人更喜欢使用不显眼的 javascript，这样我的标记就不会直接调用 javascript 方法。为此，我们将在链接中添加一个 Id。

由于您发布到 Shopping/AddToCart 方法，因此您可以在构建操作链接时使用这 2 个。

@Html.ActionLink("Add to cart", "AddToCart", "Shopping", new {@id=Model.ProductID},
                                          new { @id="addToCart", style = "color: green;" })

现在在javascript中监听id为“addToCart”的锚标签的点击事件，然后做你的ajax发布

$(function(){

   $("a#addToCart").click(function(e){
      e.preventDefault();
      $.post($(this).attr("href"),function(response){
          console.log(response);
      });    
   });

});

如果你想发送额外的信息，你可以将它们作为 html5 数据属性保存在你的链接中，并根据需要使用它

@Html.ActionLink("Add to cart", "AddToCart", "Shopping", new { @id = Model.ProductID},
                  new { @id = "addToCart",data_size="large", style = "color: green;" })

在您的 javascript 中，您可以阅读这些附加信息

$("a#addToCart").click(function(e){
    e.preventDefault();

    var d = { Size : $(this).data("size");
    $.post($(this).attr("href"),d,function(response){
          console.log(response);
    });    
});

【讨论】：