Question

问题背景。

我有一个视图，其中包含一个按钮，当点击该按钮时，该按钮会传递＆＃39; p＆＃39;标签和＆＃39; h3＆＃39;标签。这些标签是从corrosposnding控制器传递的模型列表中填充的。

我有一个＆＃39; AddToCart＆＃39;控制器上的方法，它具有从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>

控制器AddToCart方法：

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

问题：

如图所示，控制器方法将两个参数都传递为＆＃39; null＆＃39;。

enter image description here

编辑：

我已经尝试了下面的所有建议，但仍然将这两个参数传递为＆＃39; null＆＃39;。

Answer 1

h3和段落的文字内容不值。将您的ajax调用更改为

data: { name: $('#name').text(), qty: $('#qty').text() },

Answer 2

你确定你的jquery被调用了吗？尝试使用它并查看值是否仍为空：

@Html.ActionLink("Add To Cart", "AddToCart", new { name = Model.Name, qty = Model.Quantity}, new { id = "addToCart" }, new { @class = "btn btn-primary btn-block" })

我假设你想要做的是这个：

http://api.jquery.com/data/

将数据属性添加到链接：

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

在脚本中访问它们：

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

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

Answer 3

您应该使用text（）而不是val（）。 h3和p标签有文字而不是值。所以

$.ajax({
        url: '/HomePage/AddToCart',
        type: 'POST',
        data: { name: $('#name').text(), qty: $('#qty').text() },
    });

Answer 4

删除数据对象后的最后一个逗号并使用text（）尝试

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

Answer 5

好吧，你不能只让val形成非输入元素。由于您没有输入，请尝试使用html。（但是，text没有用，这很奇怪。你有没有任何价值观？）

$("#addToCart").click(function (e) {
    e.preventDefault();
    $.ajax({
        url: '/HomePage/AddToCart',
        type: 'POST',
        data: { name: $('#name').html(), qty: $('#qty').html() }
    });
});

或者，您可以将隐藏的输入放入html并获取其值：

<input type="hidden" id="name-hidden" value="@(Model.ElementAt(0).ProductName)" />
<input type="hidden" id="qty-hidden" value="@(Model.ElementAt(0).productPrice)" />

然后在您的javascript中使用val

$("#addToCart").click(function (e) {
    e.preventDefault();
    $.ajax({
        url: '/HomePage/AddToCart',
        type: 'POST',
        data: { name: $('#name-hidden').val(), qty: $('#qty-hidden').val() }
    });
});

Answer 6

这段代码中有很多东西很时髦，所以我要发布一些你可以直接复制粘贴到一个新的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>

在控制器中：

    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.
    }

Answer 7

正如其他人所说，你应该使用.text（）而不是.val（）。

此外，我们假设您的ViewBag数据正确填充了值。

如果使用这些ID在p和h3标签中填充该数据，则此代码应该有效。你可以尝试的一件事是将它们作为querystring params传递：

$.ajax({
    url: '/HomePage/AddToCart?name=' + $('#name').text() + '&qty=' + $('#qty').text(),
    type: 'POST'
});

JQuery将'null参数传递给MVC控制器方法

7 个答案: