JQuery將'null參數傳遞給MVC控制器方法

Question

問題背景。

我有一個視圖，其中包含一個按鈕，單擊該按鈕時會傳遞'p'標簽和'h3'標簽的內容。 這些標簽是從corrosposnding控制器傳遞的模型列表中填充的。

我在控制器上有一個'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.
 }

問題：

如圖所示，控制器方法將兩個參數都傳遞為'null'。

編輯：

我已經嘗試了下面的所有建議，但仍然將這兩個參數作為'null'傳遞。

Answer 1

h3和段落的文字內容不值。 將你的ajax調用更改為

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

Answer 2

你確定你的jquery被調用了嗎？ 嘗試使用它並查看值是否仍為null：

@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'
});