.NET Core MVC中库存请求数量超可用量时如何返回同页展示校验错误

1. 调整控制器OrderItem动作逻辑 #

在校验不通过的分支，先向ModelState添加自定义错误信息，重构页面需要的Item模型后返回原视图即可，完整代码如下：

//处理用户提交订单的Action
public async Task<IActionResult> OrderItem(int? customerID, int? invetoryID, int quantityReq)
{
    if (customerID == null || invetoryID == null)
    {
        return NotFound();
    }
    Customer custData = await _context.Customers.FindAsync(customerID);
    var intData = await _context.Inventories.FindAsync(invetoryID);

    if (quantityReq <= intData.QuantityAvailable && quantityReq > 0)
    {
        InventoryOrder io = new InventoryOrder();
        io.OrderQuantity = quantityReq;
        io.InventoryId = (int)invetoryID;
        _context.Add(io);
        await _context.SaveChangesAsync();

        intData.QuantityAvailable = intData.QuantityAvailable - quantityReq;
        _context.Update(intData);
        await _context.SaveChangesAsync();  
        return RedirectToAction("Index", "Inventories", new { id = customerID });              
    }
    else
    {
        // 分情况添加错误提示
        if(quantityReq > intData.QuantityAvailable)
        {
            ModelState.AddModelError("Inventory.QuantityReq", $"需求数量超过可用库存，当前可用数量为{intData.QuantityAvailable}");
        }
        if(quantityReq <= 0)
        {
            ModelState.AddModelError("Inventory.QuantityReq", "需求数量必须大于0");
        }
        // 重构返回视图需要的模型，保留用户输入的数量
        var model = new Item
        {
            CustomId = (int)customerID,
            Inventory = intData
        };
        model.Inventory.QuantityReq = quantityReq;
        // 返回原页面，携带模型和错误信息
        return View("AddtoOrder", model);
    }
}

2. 调整AddtoOrder视图代码 #

需要修改提交表单的字段绑定，增加错误提示展示：

@model JAXSurplusMouseApp.Models.Item

@{ 
    ViewData["Title"] = "Edit";
}

<h4>Add to Order</h4>
<hr />
<!-- 全局错误提示可以放在这里 -->
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row">
    <div class="col-md-4">
        <form asp-action="AddtoOrder">
           <div class="form-group">
                <label asp-for="@Model.Inventory.Name" class="control-label"></label>
                <input asp-for="@Model.Inventory.Name" class="form-control" readonly />
            </div>
            <div class="form-group">
                <label asp-for="@Model.Inventory.QuantityAvailable" class="control-label"></label>
                <input asp-for="@Model.Inventory.QuantityAvailable" class="form-control" readonly />
            </div>
            <div class="form-group">
                <label asp-for="@Model.Inventory.RoomNumber" class="control-label"></label>
                <input asp-for="@Model.Inventory.RoomNumber" class="form-control" readonly />
            </div>
        </form>
        <form method="post"
              asp-controller="Inventories"
              asp-action="OrderItem">
            <div class="form-group">
                <label asp-for="@Model.Inventory.QuantityReq" class="control-label">Quantity Required</label>
                <!-- 改用标签助手绑定字段，类型设为number更合理 -->
                <input asp-for="@Model.Inventory.QuantityReq" class="form-control" type="number" min="1" />
                <!-- 对应字段的错误提示 -->
                <span asp-validation-for="@Model.Inventory.QuantityReq" class="text-danger"></span>
            </div>
            <input type="hidden" asp-for="@Model.CustomId" />
            <input type="hidden" asp-for="@Model.Inventory.InventoryId" />
            <button type="submit" class="btn btn-primary"><u>Order</u></button>
        </form>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

改动说明 #

• 用asp-for标签助手绑定字段，自动处理name、value属性，避免手动拼写错误
• 增加了字段级别的错误提示标签asp-validation-for，精准展示对应字段的错误
• 调整了验证摘要的位置，也可选择只保留字段级错误提示
• 输入框类型改为number且设置min="1"，前端先做一层基础校验，减轻后端压力

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