.NET Core MVC中如何将表单输入值传递到路由参数（非Ajax）

没问题，咱们来搞定这个需求——不用jQuery/Ajax，也能让"加入购物车"按钮获取用户输入的数量值，而不是固定的1。

首先得理清楚：你原来用的asp-route-ItemCount="1"是页面渲染时就固定死的，没法实时跟着用户输入的数量变化。所以咱们换个思路，利用HTML表单的原生提交机制，把数量输入框作为表单的一部分，让它的值随表单一起提交给控制器。

具体修改步骤 #

1. 给数量输入框加name属性：这样表单提交时，输入框的值会被自动作为表单数据发送到控制器
2. 移除按钮上的静态路由参数：删掉asp-route-ItemCount="1"，因为咱们不再用路由传数量了
3. 确保控制器能接收参数：调整AddToCart方法，让它能接收动态的数量值

修改后的完整视图代码 #

@model IEnumerable<Shop.Models.Product>

@foreach (var item in Model)
{
    <form method="post" asp-controller="Product" asp-action="AddToCart">
        <!-- 用隐藏字段传递产品ID和名称，也可以继续用路由参数，两种方式都可行 -->
        <input type="hidden" asp-for="@item.ID" name="ProductId" />
        <input type="hidden" asp-for="@item.Name" name="ProductName" />
        
        <div class="col-md-4 col-sm-4">
            <div class="card">
                <img class="card-img-top" src="@item.Image" alt="Card image">
                <div class="card-body">
                    <span class="card-title">@item.Name<b>: </b></span>
                    <b class="card-text">$@item.Price</b>
                    <p class="card-text">@item.Description</p>
                    <!-- 给输入框添加name属性，让表单能捕获它的值 -->
                    <input type="number" min="1" max="10" class="form-control" value="1" 
                           placeholder="Please enter quantity" name="ItemCount" />
                    <!-- 移除静态的asp-route-ItemCount参数 -->
                    <button class="btn btn-primary btn-block">Add to Cart</button>
                </div>
            </div>
        </div>
    </form>
}

如果你更习惯用路由参数传递产品ID和名称，也可以保留按钮上的路由属性，像这样写按钮：

<button asp-controller="Product" asp-action="AddToCart" 
        asp-route-ProductId="@item.ID" 
        asp-route-ProductName="@item.Name"
        class="btn btn-primary btn-block">Add to Cart</button>

对应的控制器方法示例 #

[HttpPost]
public IActionResult AddToCart(int productId, string productName, int itemCount)
{
    // 这里写你的添加到购物车逻辑，比如存入Session或数据库
    // 示例：
    // var cart = HttpContext.Session.Get<List<CartItem>>("Cart") ?? new List<CartItem>();
    // cart.Add(new CartItem { ProductId = productId, Name = productName, Quantity = itemCount, Price = ... });
    // HttpContext.Session.Set("Cart", cart);
    
    return RedirectToAction("Index"); // 重定向到购物车页或商品列表页
}

为什么这个方案可行？ #

• 完全依靠HTML表单的原生提交机制，不需要任何JavaScript，符合你的需求
• 浏览器会自动收集所有带name属性的表单控件值，一起发送到控制器
• ASP.NET Core的模型绑定会自动把表单字段的值映射到控制器方法的参数上（参数名和表单字段名大小写不敏感）

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