cshtml onclick按钮事件并传递一个值

时间:2019-03-01 15:11:49

标签: javascript c# razor umbraco

我一直在寻找解决方案,我有一个按钮功能

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">

我在控制台中获得了该值并显示了“ Pressed Pressed”(按钮已按下)消息,但是我的断点没有被触发,并且警报没有被触发。

我能问一下s.ajac和$ .ajax之间的区别是什么,除了后者找不到URL。

请注意,我也在控制器中更改了控制器名称

3 个答案:

答案 0 :(得分:0)

  

未捕获的ReferenceError:在以下位置未定义项目   HTMLButtonElement.onclick

您的按钮元素正在传递商品ID作为AddProduct的参数。错误告诉您变量item不存在或不在当前范围内。

答案 1 :(得分:0)

将您的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>

答案 2 :(得分:0)

找到了另一种方法。我不完全理解所有内容,但我明白了要点。

在控制器调用中包装按钮,其中id是控制器功能的名称。意味着不必从一种代码类型转换为另一种代码类型。

从2个输入标签中检索值

csHtml

observeEvent

那么控制器就是

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