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

【问题标题】：cshtml onclick button event and pass a valuecshtml onclick按钮事件并传递一个值
【发布时间】：2019-03-01 15:11:48
【问题描述】：

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

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 中按下按钮时出现以下错误

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick

控制器

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

我想我错过了一些愚蠢的简单但我看不到它

Following 拥有 cmets

感谢自己已将代码更改为

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”消息，但是我的断点没有被触发并且警报 dosnt 被触发。

请问s.ajac和$.ajax有什么区别，除了后者找不到url。

请注意，我也更改了控制器中的控制器名称

【问题讨论】：

您必须在 onclick 事件中使用它之前定义“item”。另一方面，我现在不知道您使用的是哪个 Umbraco 版本，但我建议您使用 Umbraco.Field("#USN Shop Add to Basket Listing") 来获取您的字典项目。

标签： javascript c# razor umbraco

【解决方案1】：

未捕获的引用错误：项目未定义在 HTMLButtonElement.onclick

您的按钮元素将项目 ID 作为参数传递给 AddProduct。错误告诉您变量 item 不存在或超出当前范围。

【讨论】：

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

【讨论】：

对不起，没有意识到这是用 umbraco 标记的。忽略，因为我不熟悉这可能会如何改变事情。

【解决方案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)
{
......
}

【讨论】：