JQuery将'空参数传递给MVC控制器方法答案

【问题标题】：JQuery passing 'null parameters to MVC controller methodJQuery将'空参数传递给MVC控制器方法
【发布时间】：2015-01-25 08:49:06
【问题描述】：

问题背景。

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

我在控制器上有一个“AddToCart”方法，该方法将参数从视图中的 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.
 }

问题：

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

编辑：

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

【问题讨论】：

你可以查看这个答案，希望对你有帮助stackoverflow.com/questions/10757001/…
您只需要使用text() 而不是val() 如果您在其他（正确）答案中指出的那样不起作用，那么这里还有其他问题。一个可能是Model.ElementAt(0).ProductSummary 的奇怪用法你是从一个集合中渲染它吗（即你用Model.ElementAt(1)... 等重复上面的代码，在这种情况下你有无效的html，你需要更改这个html 并使用相对选择器（不是黑客）

标签： javascript jquery ajax asp.net-mvc asp.net-mvc-4

【解决方案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>

在控制器中：

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

【讨论】：

非常感谢 C Bauer 这终于解决了我的问题。如果允许，我会在 22 小时内奖励你！再次非常感谢！
很高兴帮助我的朋友！
@user1352057，您对无效的 html 有什么不理解？

【解决方案2】：

h3 和段落的文本内容没有价值。将您的 ajax 调用更改为

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

【讨论】：

感谢您的回复。我试过使用 .text() 方法，它仍然在传递 null 的
如果您在脚本中放置断点，视图上的 $('#name').text() 的值是多少？

【解决方案3】：

你确定你的 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>

【讨论】：

这将是做需要做的最干净的方式。该链接已经可以访问名称和数量 - 为什么要通过 jQuery 将其附加到数据集来使其复杂化？
@C Bauer 感谢您的回复。这确实有效，但返回一个空视图。我使用 Ajax 方法的原因是我可以将数据发布到 AddToCart 方法，而不会出现空白视图问题。如果有一种方法可以在不使用 ActionLink 返回空白视图的情况下做到这一点，那就太好了。
我一直在绞尽脑汁想出最好的方法，我唯一能想到的就是在你的按钮上添加两个数据属性，其中包含模型名称和数量，然后调用 $( this).data("name") 和 $(this).data("quantity")。
@C Bauer 再次感谢您的意见。可悲的是，这仍然没有解决问题。

【解决方案4】：

你应该使用 text() 而不是 val()。 h3 和 p 标签有文本而不是值。所以

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

【讨论】：

【解决方案5】：

删除数据对象后的最后一个逗号并使用 text() 试试

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

【讨论】：

感谢您的回复。 .text() 仍然传递“空值”。

【解决方案6】：

好吧，你不能只得到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() }
    });
});

【讨论】：

【解决方案7】：

正如其他人所说，您应该使用 .text() 而不是 .val()。

此外，我们假设这些值是从您的 ViewBag 数据中正确填充的。

如果使用这些 ID 在您的 p 和 h3 标记中填充该数据，则此代码应该可以工作。您可以尝试的一件事是将它们作为查询字符串参数传递：

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

【讨论】：