RazorPages Page Remote not working on model

Question

as per https://www.mikesdotnetting.com/article/343/improved-remote-validation-in-razor-pages I followed the tutorial and implemented the PageRemote. However it does not work if applied to a property of a model and I use the model as property.

public class Draft
{
    public int Id { get; set; }
    [PageRemote(ErrorMessage = "Invalid data", AdditionalFields = "__RequestVerificationToken", HttpMethod = "post", PageHandler = "CheckReference")]
    public string Reference { get; set; }

}

[BindProperty]
public Draft Draft { get; set; }

public JsonResult OnPostCheckReference()
{            
    var valid = !Draft.Reference.Contains("12345");
    return new JsonResult(valid);
}

on my page

<tab>
    <tab-item icon="fas fa-arrow-left" url="@Url.Page("../Index")"></tab-item>
    <tab-item icon="fas fa-list" url="@Url.Page("Index")"></tab-item>
    <tab-item icon="fas fa-plus" is-active="true"></tab-item>
</tab>
<form method="post">
    <card>
        <card-header icon="fas fa-plus" title="Draft"></card-header>
        <card-body>

            <input asp-for="Draft.Reference" />
            <span asp-validation-for="Draft.Reference" class="text-danger"></span>

        </card-body>
        <card-footer>
            <button class="btn btn-success"><i class="fas fa-plus"></i> Adicionar </button>
        </card-footer>
    </card>
</form>
@section Scripts{

    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>

}

Daniel Leach · Answer 1 · 2020-06-23T19:32:02.337

5

Remote validation on nested model properties doesn't allow you to specify additional fields on a parent object. The __RequestVerificationToken is always on the root of the model. The source for jquery.validate.unobtrusive.js is looking for fields prefixed with *. and prefixes the model name to them. The asp-for tag helper is adding *. to the beginning of the fields.

You can circumvent this prefixing of *. by manually specifying the attribute in html and removing AdditionalFields from the attribute.

PageRemoteAttribute:

public class Draft
{
    public int Id { get; set; }
    [PageRemote(ErrorMessage = "Invalid data", HttpMethod = "post", PageHandler = "CheckReference")]
    public string Reference { get; set; }

}

Html:

<input asp-for="Reference" data-val-remote-additionalfields="__RequestVerificationToken" />

edited Jun 23 '20 at 19:32

answered Jun 23 '20 at 19:02

Daniel Leach

5,517
4
18
32

Thank you! This is by far the easiest way I have seen to tackle the key issue. – chungonion Oct 06 '20 at 03:08
Hello. Thanks for this answer. But I have another problem and can't find any info on that. What If the developer needed to add the Draft.ID as a parameter to the PageRemote attribute? My case is very similar, as I also have a View model and an inner property to validate, but it also requires another property. Taking this case as example, I've tried passing the id parameter with AdditionalFields = "Draft.ID" or even AdditionalFields = "ID", but it is not being posted together with the Draft.Reference when the post handler is triggered – Eduardo Almeida Apr 26 '21 at 16:02

score 4 · Accepted Answer · answered Dec 16 '19 at 08:04

Remote validation on nested model properties is not straightforward. The framework prefixes all additional fields with the name of the model, so request verification fails, resulting in a 400 error.

The work around is to separate the field that you want to validate remotely from the sub-model, and make it a first class property of the PageModel instead. Then, if ModelState is valid, assign the value to the nested model.

public class Draft
{
    public int Id { get; set; }

    public string Reference { get; set; }

}

[BindProperty]
public Draft Draft { get; set; }

[BindProperty, PageRemote(ErrorMessage = "Invalid data", AdditionalFields = "__RequestVerificationToken", HttpMethod = "post", PageHandler = "CheckReference")]
public string Reference {get;set;}

public JsonResult OnPostCheckReference()
{            
    var valid = !Reference.Contains("12345");
    return new JsonResult(valid);
}

Then in the form:

<input asp-for="Reference" />
<span asp-validation-for="Reference" class="text-danger"></span>

I see, i tried this before just to test and it worked but i wasn't aware this was the case of the framework. Thanks for clearing it up — Jackal, Dec 16 '19 at 08:33

RazorPages Page Remote not working on model

2 Answers2

Linked