javascript - JQuery 将“null 参数传递给 MVC Controller 方法”

Question

问题背景。

我有一个 View ，其中包含一个按钮，单击该按钮时会传递“p”标记和“h3”标记的内容。这些标签是从相应 Controller 传递的模型列表中填充的。

我在 Controller 上有一个“AddToCart”方法，该方法具有从 View 中的 Ajax JQuery 函数传递给它的参数。

问题:

下面显示了 JQuery Ajax 调用和 cshtml 标记。 理想情况下，我想将内容传递给函数。目前，我根据标签的 ID 从标签获取信息。

查看标记:

<h3 class="panel-title boldFeatures" id="name">@(Model.ElementAt(0).ProductName)</h3>

 <div class="panel-body">
      <img src="~/Images/LionToy.png" class="img-circle" id="featuresImages" alt="Work">
      <p>@(Model.ElementAt(0).ProductSummary)</p>
      <p id="qty">@(Model.ElementAt(0).productPrice)</p>

  @Html.ActionLink("Add To Cart", "AddToCart", null, new { id = "addToCart" }, new { @class = "btn btn-primary btn-block" })

Ajax 函数:

  <script>
    $("#addToCart").click(function (e) {

        e.preventDefault();
        $.ajax({
            url: '/HomePage/AddToCart',
            type: 'POST',
            data: { name: $('#name').val(), qty: $('#qty').val() },
        });
    });
    </script>

Controller AddToCart方法:

 public void AddToCart(string name, string qty)
 {
    //Add to cart logic.
 }

问题:

如图所示， Controller 方法将两个参数都作为“null”传递。

编辑:

我已尝试了下面的所有建议，但两个参数仍然作为“null”传递。

Answer 1

这段代码中有很多东西很奇怪，所以我将发布一些你可以直接复制粘贴到新的 mvc 项目中的东西，它会立即工作:

试试这个:

查看代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#addToCart").click(function (e) {
            e.preventDefault();
            alert($(this).data("name"));
            $.ajax({
                url: '@Url.Action("AddToCart")',
                type: 'POST',
                data: { name: $(this).data("name"), qty: $(this).data("quantity") },
            });
        });
    });
</script>

<h3 class="panel-title boldFeatures" id="name">@(Model.ElementAt(0).ProductName)</h3>

<div class="panel-body">
    <img src="~/Images/LionToy.png" class="img-circle" id="featuresImages" alt="Work">
    <p>@(Model.ElementAt(0).ProductSummary)</p>
    <p id="qty">@(Model.ElementAt(0).ProductPrice)</p>

        <input type="button" data-name="@Model.ElementAt(0).ProductName" data-quantity="@Model.ElementAt(0).Quantity" value="Add to Cart" id="addToCart" />
</div>

在 Controller 中:

    public void AddToCart(string name, string qty)
    {
        //Add to cart logic.
        string qname = name + qty; //put a breakpoint here and you'll see name is populated.
    }