cshtml onclick按鈕事件並傳遞一個值

Question

我一直在尋找解決方案，我有一個按鈕功能

HTML

<button class="snipcart-add-item btn c8-bg c5-text" onclick="AddProduct(item.Id)">

    @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Listing")
</button>

item.id具有值，因為它可以在我嘗試繞過的原始代碼中使用

Java腳本是

function AddProduct(ptr) {
    $('select').on('click', function () {
        s.ajac({
            url: '/CartSurface/ProductAddToCart',
            data: "{'productId':ptr}",
        }).done(function () {
            alert('Added');
        });
    });
    console.log("Button Pressed")
}

當在console.log中按下按鈕時，出現以下錯誤

未捕獲的ReferenceError：在HTMLButtonElement.onclick中未定義項目

調節器

public static void ProductAddToCart(int productId)
{
  ......
}

我想我已經錯過了一些簡單的事情，但我看不到

關注自己的評論

謝謝自己已將代碼更改為

function AddProduct(value) {
        $('select').on("click", function () {
            s.ajac({
                url: '/IBDCartSurface/ProductAddToCart',
                data: "{'productId': value}",
            }).done(function () {
                alert('Added');
            });
        });
        console.log(value);
        console.log("Button Pressed");
    }

<button class="snipcart-add-item btn c8-bg c5-text" onclick="AddProduct(value)" value="@item.Id">

我在控制台中獲得了該值，並收到了“ Button Pressed”消息，但是我的斷點沒有被觸發，而警報沒有被觸發。

我可以問s.ajac和$ .ajax之間有什么區別，除了后者找不到URL。

注意我也更改了控制器中的控制器名稱

Answer 1

未捕獲的ReferenceError：在HTMLButtonElement.onclick中未定義項目

您的按鈕元素正在傳遞商品ID作為AddProduct的參數。 錯誤告訴您變量item不存在或不在當前范圍內。

Answer 2

將您的JS更改為：

document.on("click", "#buttonId", function(){
    data = $(this).attr("data-id");
    s.ajac({
        url: '/CartSurface/ProductAddToCart',
        data: "{'productId': data}",
    }).done(function () {
        alert('Added');
    });
}

然后將您的html更改為

<button class="snipcart-add-item btn c8-bg c5-text" id="buttonId" data-id="item.id">
    @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Listing")
</button>

Answer 3

找到了不同的方法來做。 我不完全理解所有內容，但我明白了要點。

將按鈕包裝在控制器調用中，其中id是控制器功能的名稱。 意味着不必從一種代碼類型轉換為另一種代碼類型。

從2個輸入標簽中檢索值

CSHTML

using (Html.BeginUmbracoForm<IBDCartSurfaceController>("SiteWideAddToBasket", null, new { @class = "form", role = "form" }))
{
  <input type="hidden" id="productPageId" name="productPageId" value="@item.Id" />
  <input type="hidden" id="productPrice" name="productPrice" value="@item.ProductCurrentPrice" />
  <button class="snipcart-add-item btn c8-bg c5-text" id="addToBasket" type="submit">
    @umbraco.library.GetDictionaryItem("USN Shop Add to Basket Listing")
  </button>
}

然后控制器是

[HttpPost]
public ActionResult SiteWideAddToBasket(int productPageId, decimal productPrice)
{
......
}