Razor Pages远程验证配置求助：PageRemote属性位置及触发问题

一、[PageRemote]属性的正确位置 #

必须将[PageRemote]标记在ItemModel类的FromLocation属性上方，而非PageModel中的Item属性上。远程验证是针对具体模型字段的校验，而非整个模型对象。

示例代码：

public class ItemModel
{
    [PageRemote(ErrorMessage = "Invalid Location",
        HttpMethod = "post",
        PageHandler = "CheckLocation")]
    public string FromLocation { get; set; }
    // 其他属性...
}

二、触发验证的关键配置检查 #

1. 输入框绑定必须精准 #

页面中的输入框需正确绑定到Item.FromLocation，同时要配套验证消息标签，否则无法触发远程请求或显示验证提示：

<input asp-for="Item.FromLocation" class="form-control" />
<span asp-validation-for="Item.FromLocation" class="text-danger"></span>

2. 后台方法参数名需匹配 #

框架默认会传递属性名对应的参数（即FromLocation），你的后台方法参数string location不匹配，需修改为string fromLocation（大小写不严格区分，但保持一致更稳妥）：

public async Task<JsonResult> OnPostCheckLocation(string fromLocation)
{
    LocationModel ValidLocation = await LocationModel.CreateAsync(fromLocation);
    var valid = !ValidLocation.Location.Equals("XXX");
    return new JsonResult(valid);
}

3. 确保CSRF令牌正常传递 #

因为使用POST方法，Razor Pages默认会校验防CSRF令牌：

• 如果是表单提交，确保页面包含<form>标签（自动生成令牌）；
• 如果是单独输入框，需手动添加@Html.AntiForgeryToken()，保证远程请求能携带令牌通过校验。

4. 脚本加载顺序不能错 #

_ValidationScriptsPartial.cshtml中的脚本必须按以下顺序加载，否则验证逻辑会失效：

<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/jquery-validation/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

5. 用浏览器控制台排查问题 #

打开F12控制台，查看是否有JS报错或请求异常：

• 404错误：说明PageHandler路径配置错误；
• 400错误：大概率是CSRF令牌缺失或不匹配；
• 200但验证不生效：检查返回的JSON是否为布尔值（true/false）。

三、完整可运行示例参考 #

ItemModel类 #

public class ItemModel
{
    [PageRemote(ErrorMessage = "Invalid Location",
        HttpMethod = "Post",
        PageHandler = "CheckLocation")]
    public string FromLocation { get; set; }
}

PageModel类 #

public class YourPageModel : PageModel
{
    [BindProperty]
    public ItemModel Item { get; set; } = new ItemModel();

    public async Task<JsonResult> OnPostCheckLocation(string fromLocation)
    {
        LocationModel validLocation = await LocationModel.CreateAsync(fromLocation);
        bool isValid = !validLocation.Location.Equals("XXX");
        return new JsonResult(isValid);
    }
}

Razor页面（.cshtml） #

@page
@model YourPageModel

<form method="post">
    <div class="form-group">
        <label asp-for="Item.FromLocation"></label>
        <input asp-for="Item.FromLocation" class="form-control" />
        <span asp-validation-for="Item.FromLocation" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

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

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