How do you deal with Razor Pages PageRemote validation on 'loaded' data (e.g edit ViewModel Page)? - ajax

Question

I am probably missing the obvious, but nevertheless a little stuck with PageRemote validation. Like a lot of us, I am following Mike’s helpful tutorial on the subject: https://www.mikesdotnetting.com/article/343/improved-remote-validation-in-razor-pages
I won’t copy his code here, as it is easy to follow, and works exactly as demonstrated. Great for a ‘Create User’ page!
My problem is though, when applying it to an ‘Edit User’ page, then I have hit a couple snags. In the OnGet() I load the ‘User’ from a QueryString, and populate the form, including the remote validated field. If I touch no fields, and straight away hit the submit button, it doesn’t trigger the submit’s OnPostSubmit() handler, but the PageRemote’s validation OnPost() instead (as presumably the field is dirty, even if the user didn’t do it).
So how do I make sure the submit button fires as expected, in this scenario? According to my break point, it never fires the OnPostSubmit() handler, in this scenario.
Following this scenario, that PageRemote’s OnPost returns ‘true’ (as nothing changed, and everything is still valid), but something else seems to be going on, as a SelectList that is normally loaded OnGet() is now empty, and means the form is now not complete. If before I click the submit button, I enter any of the form’s fields, and force the PageRemote to normally fire, my SelectList is fine. The loss of loaded SelectList values being lost, is only when the PageRemote fires when immediately clicking submit without touching any fields. Why does it behave differently? Surely I am not suppose to be reloading data in this PageRemote validation OnPost() handler, especially in the normal scenario’s, I don’t have to…
I hope this makes sense, and I hope I have not upset anyone by not putting any code up. I am happy to edit my questions with some code, but it is 99% as in Mike’s article. The only difference I have, is populating the ViewModel and SelectList OnGet().
EDIT for code:
#page
#model Redbook.Pages.Test.EditAccountModel
#{
ViewData["Title"] = "EditAccount";
}
<h1>EditAccount</h1>
<form method="post" id="frmUserDetails">
<div class="form-group">
<label class="pt-1">Email</label>
<input id="txtEmail" type="email" inputmode="email" class="form-control" asp-for="Email">
<span class="text-danger" asp-validation-for="Email"></span>
</div>
<div class="form-group">
<label class="pt-1">User Select Option</label>
<select class="form-control" asp-for="UserSelectListOption" asp-items="Model.UserSelectListOptions"></select>
<span class="text-danger" asp-validation-for="UserSelectListOption"></span>
</div>
<button id="btnContinue" type="submit" asp-page-handler="Continue" class="btn btn-outline-info">
Save
</button>
</form>
#section Scripts
{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
#await Html.PartialAsync("_ValidationScriptsPartial")
<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>
}
CodeBehind
public class EditAccountModel : PageModel
{
[Required(ErrorMessage = "Email Address Required")]
[EmailAddress(ErrorMessage = "Invalid Email Address")]
[PageRemote(
ErrorMessage = "Email/User already in use.",
AdditionalFields = "__RequestVerificationToken",
HttpMethod = "post",
PageHandler = "CheckEmail"
)]
[BindProperty]
public string Email { get; set; }
[Required(ErrorMessage = "User Select List Option Required")]
[BindProperty]
public int UserSelectListOption { get; set; }
public SelectList UserSelectListOptions { get; set; }
public async Task<IActionResult> OnGet()
{
//Normally would pass param (querystring) to load 'user' to edit, but this is just a test!
await Task.CompletedTask;
Email = "joe.bloggs#test.com";
UserSelectListOption = 2;
//Our user form needs a drop down option.
LoadSelectList();
return Page();
}
public async Task<IActionResult> OnPostContinueAsync()
{
if (!ModelState.IsValid)
{
LoadSelectList();
return Page();
}
//Normally we would do something here (e.g get UserID), but again, this is just a test!
await Task.CompletedTask;
//We dont hit this when we first hit submit, unless we pass focus to the 'Email' control first.
//Instead 'OnPostCheckEmail' is triggered only
//Not only that, but when that happens, 'UserSelectListOptions' is empty, so we fail the required validation for that control.
//If we do touch the 'Email' control before submission, validation triggers normally,
//It doesn't affect 'UserSelectListOptions'
//Then we do hit this point successfully.
return Page();
}
public JsonResult OnPostCheckEmail()
{
var existingEmails = new[] { "jane#test.com", "claire#test.com", "dave#test.com" };
var valid = !existingEmails.Contains(Email);
return new JsonResult(valid);
}
public void LoadSelectList()
{
List<SelectListOption> selectListOptions = new List<SelectListOption>();
selectListOptions.Add(new SelectListOption(1, "Option1"));
selectListOptions.Add(new SelectListOption(2, "Option2"));
selectListOptions.Add(new SelectListOption(3, "Option3"));
UserSelectListOptions = new SelectList(selectListOptions, "OptionID", "OptionName");
}
public class SelectListOption
{
public SelectListOption(int optionID, string optionName)
{
this.OptionID = optionID;
this.OptionName = optionName;
}
public int OptionID { get; set; }
public string OptionName { get; set; }
}
}

Answer 1

The "[PageRemote ...]" example didn't work with my bound viewModel; so I created some script to onblur put the email text into my asp-for viewMode.Email input; that way onsubmit, my viewModel.Email has the email value already
enter code here
<input class="viewEmail-input" asp-for="viewModel.Email" />
...
<input asp-for="Email" placeholder="Email" class="email-input" />
$(document).ready(function () {
$('.email-label').on("blur", function () {
var value = $('.email-input').val();
$('.viewEmail-input').val(value);
});
});
I also put my PageRemote into a seperate common cshtml file so more than one razor page can call the same code RemoteValidation_cshtml_cs
Then modified the PageRemote as follows:
enter code here
[PageRemote(
ErrorMessage = "Email Address already exists",
AdditionalFields = "__RequestVerificationToken",
HttpMethod = "post",
PageHandler = "CheckEmail",
PageName = "RemoteValidation"
)]
[Required, EmailAddress]
[RegularExpression(#"^[a-zA-Z0-9_.+-]+#[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$", ErrorMessage = "Invalid Email format")]
[BindProperty]
public string Email { get; set; }
Finally, I notice that there was a database call everytime a character was typed in or deleted from the email input textbox; to prevent this I created a quick routine to verify the passed in email was actually an email address before checking the database; for now, it still checks after typing "c" "o" and "m", but that's only three calls instead of dozens.
enter code here
public async Task<JsonResult> OnPostCheckEmail(string email)
{
// In order to not call the database, check if email is valid email before calling database
// Have to return true... so error is not shown to user; other validation will catch it on submit.
if (!IsValidEmailFormat(email)) return new JsonResult(true);
var user = await _userManager.FindByEmailAsync(email);
if (user == null)
{
return new JsonResult(true);
}
return new JsonResult($"Email { email } is already in use");
}
private bool IsValidEmailFormat(string email)
{
String AllowedChars = #"^[a-zA-Z0-9_.+-]+#[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$";
if (Regex.IsMatch(email, AllowedChars))
{
return true;
}
return false;
}
}