logo标签列表

使用JQuery向MVC控制器方法传递'null'参数

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4
3

问题背景：

我有一个视图，其中包含一个按钮，当按钮被单击时，会传递“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>

Controller AddToCart方法：

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

问题：

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

enter image description here

enter image description here

编辑：

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

你可以检查这个答案，希望能对你有所帮助。http://stackoverflow.com/questions/10757001/get-text-from-h3-element-without-getting-text-from-child-elements-of-h3 - Daniel Gpe Reyes
你只需要使用 text() 而不是 val()。如果这个方法不能像你在其他（正确的）答案中所指示的那样工作，那么就有其他问题了。其中一个可能是奇怪地使用了 Model.ElementAt(0).ProductSummary。你是从集合中呈现这个吗（例如，你正在重复上面的代码与 Model.ElementAt(1)... 等等），在这种情况下，你有无效的 HTML，并且你需要更改这个 HTML 并使用相对选择器（而不是 hack）。 - user3559349
7个回答
2

和段落有文本内容而不是值。将您的ajax调用更改为

data: { name: $('#name').text(), qty: $('#qty').text() },
谢谢您的回复。我已经尝试使用.text()方法，但仍然传递了null值。 - user1352057
如果您在脚本中设置了断点，那么视图中的$('#name').text()的值是多少？ - Matt Bodily
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>
这将是完成需要的工作的最清晰的方式。该链接已经可以访问名称和数量 - 为什么要让jQuery将其附加到数据集中而使它变得复杂呢？ - Tommy
@C Bauer 谢谢您的回复。这确实可以工作，但会返回一个空视图。我使用Ajax方法的原因是为了将数据POST到AddToCart方法，并避免出现空白视图问题。如果有一种方法可以在使用ActionLink时不返回空白视图，那就太好了。 - user1352057
我一直在思考最好的方法，唯一想到的办法就是在按钮上添加两个数据属性，分别包含模型名称和数量，并调用$(this).data("name")和$(this).data("quantity")。 - C Bauer
@C Bauer 再次感谢您的建议。不幸的是，这仍然没有解决问题。 - user1352057
2

这段代码存在一些问题，因此我将提供一份你可以直接复制粘贴到新的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，这终于解决了我的问题。当 SO 允许我时，我会在 22 小时后授予您奖金！再次感谢！ - user1352057
很高兴能帮助我的朋友！ - C Bauer
@user1352057，你不理解什么是无效的HTML吗？ - user3559349
1

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

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

移除数据对象之后的最后一个逗号，并使用text()。

尝试

<script>
$("#addToCart").click(function (e) {
    e.preventDefault();
    $.ajax({
        url: '/HomePage/AddToCart',
        type: 'POST',
        data: { name: $('#name').text(), qty: $('#qty').text() }
    });
});
</script>
感谢您的回复。.text() 仍然传递了“nulls”。 - user1352057
1

好的，你不能仅从非输入元素中获取 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() }
    });
});
0
如其他人所说，您应该使用.text()而不是.val()。
此外，我们假设值从您的ViewBag数据正确填充。
如果这些数据在具有这些ID的p和h3标记中填充，则此代码应该有效。您可以尝试的一件事是将它们作为查询字符串参数传递：
$.ajax({
    url: '/HomePage/AddToCart?name=' + $('#name').text() + '&qty=' + $('#qty').text(),
    type: 'POST'
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接