我正在try 实现一个产品信息窗口,其中有一个负责显示库存产品数量的部分视图.库存产品的数量由一个单独的链接表"ProductCount"表示.我需要在不重新加载视图的情况下添加产品数量,并且只重新加载部分视图.为此,我决定使用jQuery AJAX.解题方法是基于这个答案的material :"link".但我遇到了未知的问题:首先,我很难从输入字段中获取值,其次,当我try 执行函数时,出现一条未知的消息 脚本代码:

<script type="text/javascript">
        function addQuantityClicked() {
            var Url = '@Url.Action("QuantityAdd", "Home")';
            $.ajax({
                url: Url,
                type: 'POST',
                data: { idProduct: @Model.Product.Id, quantity: alert($("#qnt").val) }
            })
        }
</script>
@using vp_server.Models.ViewModels
@model vp_server.Models.ViewModels.ProductViewsTransactions
<!DOCTYPE html>
<html>
    <body>
    <label>The quantity at the moment: @Model.Count</label>
        <form>
        <label>Entrance:</label>
            <input type="number" id="qnt" name="quantity" />
            <input type="button" onclick="addQuantityClicked()" id="changeButton" value="Add" />
        </form>

    </body>
</html>
<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/js/jquery-3.5.1.min.js"></script>

我也try 使用document.getElementById("qnt").value,但是.value不是由代码编辑器定义的

Strange message when trying to execute the script个 控制器方法的代码:

[HttpPost]
public async Task<IActionResult> QuantityAdd(int idProduct, int quantity)
{
    using (VapeshopContext db = new VapeshopContext())
    {
        ProductCount? productCount = db.ProductCounts.Where(pc => pc.ProductId == idProduct).FirstOrDefault();
        if (productCount != null)
        {
            productCount.Count += quantity;
        }
        await db.SaveChangesAsync();

        return PartialView();
    }            
}

我删除了alert ,虽然现在消息没有出现,但方法也没有react

我部分更改了JS代码,删除了.ajax以测试脚本,并在.alert中留下了一条测试消息.消息是输出的,但如果返回.ajax,则不会发生任何事情,甚至消息也会输出到.alert 新的JS代码:

<script type="text/javascript">
    $(function () {
        $("#btnPost").click(function () {
            alert("Test")
            $.ajax({
                type: "POST",
                url = "/Home/QuantityAdd",
                data: { "idProduct": @Model.Product.Id, "quantity": $("#qnt").val() }
            })
        })
    })
</script>

<script src="~/js/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/js/jquery-3.5.1.min.js"></script>

推荐答案

我测试您的代码如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
        function addQuantityClicked() {
            var Url = '@Url.Action("QuantityAdd", "Home")';
            $.ajax({
                url: Url,
                type: 'POST',
                
                data: { "idProduct": 1, "quantity":2 }
            });
        }
</script>

结果:

enter image description here

Jquery相关问答推荐

:eq Jquery,我似乎无法显示第一个之后的元素

如何在jQuery中判断粘贴剪贴板中字母输入的增加/减少

jQueryUI 模态对话框不显示关闭按钮 (x)

jquery 淡入淡出元素不显示样式为可见性:隐藏的元素

jQuery 动画滚动

Jquery Ajax,从 mvc.net 控制器返回成功/错误

纯css关闭按钮

为什么 jquery fadeIn() 不能与 .html() 一起使用?

lodash debounce 在匿名函数中不起作用

在 jQuery 中将 JSON 数组转换为 HTML 表

Zepto 和 jQuery 2 有什么区别?

Jquery 和 HTML FormData 返回未捕获的 TypeError:非法调用

复选框值始终为打开

jQuery '如果 .change() 或 .keyup()'

将打开/关闭图标添加到 Twitter Bootstrap 可折叠项(手风琴)

使用 jquery 通过文本设置下拉值

jQuery:如何创建一个简单的叠加层?

jQuery : eq() 与 get()

$.ajax 的成功和 .done() 方法有什么区别

$(document).click() 在 iPhone 上无法正常工作. jQuery