ASP.NET Core MVC视图调用Action传参失败：商品页添加购物车问题

问题描述 #

开发电商网站商品详情页（SingleProduct.cshtml，绑定Product模型）时，点击“添加到购物车”按钮，需要将@Model.ProductId和用户输入的商品数量传递至ProductController的feedback Action，但使用asp-route-方式传参未成功。

核心问题原因 #

1. 请求方式不匹配：按钮用<a>标签默认发起GET请求，但控制器feedback方法标记了[HttpPost]，导致请求被拒绝。
2. 参数绑定错误：asp-route-quantity=quantity中的quantity是字符串字面量，Razor渲染时会直接传递"quantity"而非输入框的实际值，无法动态获取用户输入。
3. 表单未被利用：已经在<form>标签中指定了POST请求和目标控制器/Action，但却用<a>标签跳转，没有通过表单提交传递输入框参数。

解决方案 #

方案一：使用表单提交按钮（推荐） #

修改视图中的表单部分，将<a>标签替换为表单提交按钮，同时添加隐藏字段传递ProductId：

<form asp-controller="Product" asp-action="feedback" method="post">
    <!-- 隐藏字段传递ProductId，与控制器参数名id对应 -->
    <input type="hidden" name="id" value="@Model.ProductId" />
    <div class="quantity-content">
        <div class="left-content">
            <h6>No. of Orders</h6>
        </div>
        <div class="right-content">
            <div class="quantity buttons_added">
                <input type="button" value="-" class="minus">
                <!-- 输入框name与控制器参数quantity一致，确保模型绑定 -->
                <input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="" inputmode="">
                <input type="button" value="+" class="plus">
            </div>
        </div>
    </div>
    <div class="total">
        <h4>Total: $210.00</h4>
        <!-- 替换a标签为submit按钮，保留原有样式类 -->
        <div class="main-border-button">
            <button type="submit" class="btn btn-link p-0 text-decoration-none">Add To Cart</button>
        </div>
    </div>
</form>

表单提交时，会自动将隐藏字段的id和输入框的quantity以POST方式传递到feedback方法，控制器可正常接收参数。

方案二：保留标签样式，用JS处理提交 #

若需保留<a>标签的样式，可通过JavaScript动态获取参数并发起POST请求：

1. 修改<a>标签：

<div class="main-border-button">
    <a id="addToCartBtn" href="javascript:void(0)">Add To Cart</a>
</div>

2. 添加JavaScript代码：

<script>
    document.getElementById('addToCartBtn').addEventListener('click', function() {
        // 获取商品ID和数量
        const productId = @Model.ProductId;
        const quantity = document.querySelector('input[name="quantity"]').value;
        
        // 动态创建表单
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/Product/feedback';
        
        // 添加id参数
        const idInput = document.createElement('input');
        idInput.type = 'hidden';
        idInput.name = 'id';
        idInput.value = productId;
        form.appendChild(idInput);
        
        // 添加quantity参数
        const quantityInput = document.createElement('input');
        quantityInput.type = 'hidden';
        quantityInput.name = 'quantity';
        quantityInput.value = quantity;
        form.appendChild(quantityInput);
        
        // 添加ASP.NET Core防伪造令牌（必填，避免400错误）
        const tokenInput = document.createElement('input');
        tokenInput.type = 'hidden';
        tokenInput.name = '__RequestVerificationToken';
        tokenInput.value = document.querySelector('input[name="__RequestVerificationToken"]').value;
        form.appendChild(tokenInput);
        
        // 提交表单
        document.body.appendChild(form);
        form.submit();
    });
</script>

该方式通过JS动态构造表单，模拟POST请求传递参数，同时兼容原有的按钮样式。

额外注意事项 #

确保控制器feedback方法的参数名与表单元素的name属性完全一致（id对应name="id"，quantity对应name="quantity"），ASP.NET Core模型绑定才能正确匹配参数值。

内容的提问来源于stack exchange，提问作者CemalBaba