ASP.NET Core PageRemote远程验证多参数传递问题

问题原因 #

1. AdditionalFields未正确包含需要传递的所有字段（缺少FromLocation），且未指定字段的前缀（页面中模型属性是Item.XXX，而非直接的XXX）。
2. 后端方法的模型绑定未处理前缀问题，导致无法正确接收ItemNumber和FromLocation的值。
3. 前端缺少ItemNumber和FromLocation的输入框（或未用asp-for生成正确的name属性），远程验证无法获取这些字段的值。

具体修改步骤 #

1. 修正PageRemote特性配置 #

在Quantity属性的PageRemote特性中，更新AdditionalFields，包含两个字段并指定前缀：

public class ItemModel
{
    public string ItemNumber { get; set; } = string.Empty;
    public string FromLocation { get; set; } = string.Empty;
       
    [Required, Range(0.001, 9999999999), 
        DisplayName("Qty"), 
        PageRemote(ErrorMessage = "Invalid Quantity", 
        HttpMethod = "post", 
        PageHandler = "CheckQuantity", 
        // 指定带前缀的字段，多个字段用逗号分隔
        AdditionalFields = "Item.ItemNumber,Item.FromLocation")]
    public decimal Quantity { get; set; }   
}

注意：前缀Item.对应页面模型中绑定的属性名（假设你的页面模型有public ItemModel Item { get; set; }），如果前缀不同需对应修改。

2. 确保前端存在正确的输入框 #

必须在表单中添加ItemNumber和FromLocation的输入框，并用asp-for生成正确的name属性：

<!-- ItemNumber输入框 -->
<td>
    <label asp-for="Item.ItemNumber" class="control-label"></label>
</td>
<td>
    <input asp-for="Item.ItemNumber" class="form-control" />
    <span asp-validation-for="Item.ItemNumber" class="text-danger"></span>
</td>

<!-- FromLocation输入框 -->
<td>
    <label asp-for="Item.FromLocation" class="control-label"></label>
</td>
<td>
    <input asp-for="Item.FromLocation" class="form-control" />
    <span asp-validation-for="Item.FromLocation" class="text-danger"></span>
</td>

<!-- Quantity输入框保持不变 -->
<td>
    <label asp-for="Item.Quantity" class="control-label"></label>
</td>
<td>
    <input asp-for="Item.Quantity" class="form-control" />
</td>
<td>
    <span asp-validation-for="Item.Quantity" class="text-danger"></span>
</td>

此时前端生成的Quantity输入框的data-val-remote-additionalfields会包含__RequestVerificationToken,Item.ItemNumber,Item.FromLocation。

3. 修正后端方法的模型绑定 #

由于前端传递的参数带Item.前缀，需要在方法参数上添加[Bind(Prefix = "Item")]来正确绑定：

public async Task<JsonResult> OnPostCheckQuantity([Bind(Prefix = "Item")] ItemModel item)
{
    ItemCheck quantityCheck = await ItemCheck.CheckQuantityAsync(
        item.ItemNumber, 
        item.FromLocation);

    if (quantityCheck.Quantity < item.Quantity) // 修正原代码拼写错误：Qauntity → Quantity
    {
        return new JsonResult("Quantity is greater than available for that location.");
    }
    else
    {
        return new JsonResult(true);
    }
}

验证效果 #

当离开Quantity输入框时，前端会自动将ItemNumber、FromLocation和Quantity的值一起传递到后端OnPostCheckQuantity方法，模型绑定后item对象的三个属性都会有正确的值，即可完成验证逻辑。

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