使用Razor Pages进行模型验证

Question

我有一个位于页面底部的表单。当服务器端的模型验证失败时，返回Page（）会让我回到页面顶部，这非常不方便，因为用户必须向下滚动到表单才能看到验证错误。我的问题是：1。我可以重定向到联系表格div ID吗？ 2.最好的方案是，如果模型验证可以异步完成，那么只有部分页面刷新。那可能吗？ （这在使用UpdatePanel的Web窗体中很容易完成）。

我感谢您分享的任何信息。

雅各

Answer 1

首先尝试在客户端验证，以防止不必要的回发。您可以使用属性来设置验证：

using System.ComponentModel.DataAnnotations;

public class ForgotPasswordViewModel()
{
    [Required]
    [EmailAddress]
    public string Email { get; set; }
}

在视图中检查Modelstate：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> ForgotPassword(ForgotPasswordViewModel model)
{
    if (ModelState.IsValid)
    {

当然客户端是不够的，所以如果跳过客户端验证，服务器会确保模型验证。

滚动到某个位置的一种方法是使用锚点。锚是客户端方式，用于为文档中的部分添加书签。通常你会看到这样的东西：

<a href"home#contact">Contact</a>

通过单击链接，您将滚动到主文档中的contact书签。你可以为帖子做同样的事情：

<div id="contact">
    <form method="post" action="home#contact">
        @Html.AntiForgeryToken()

    </form>
</div>

如果出现错误，页面将自动滚动到表单，因为在客户端上设置了#contact哈希。假设是在成功的情况下您重定向到另一个视图。这是不使用javascript滚动的唯一方法。并且因为javascript验证不起作用...

请注意，如果您使用标记帮助程序，则会自动添加.Net Core AntiForgery。但由于我没有使用它，我必须自己添加。

还有其他选项涉及javascript或一些服务器端重定向，但我认为这是一个简单的解决方案。

我不知道部分页面刷新是否是最佳解决方案。我认为这取决于。有很多关于如何发布异步的例子。检查此链接：https://www.w3schools.com/jquery/ajax_ajax.asp

Answer 2

也许远程验证？

“当您需要根据服务器上的数据验证客户端上的数据时，远程验证是一项很好的功能。例如，您的应用可能需要验证电子邮件或用户名是否已被使用......”https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation

Answer 3

我找到了适合我的解决方案：

@if (Model.validationError)
    {
        <text>
        document.getElementById('contact').scrollIntoView();
        </text>

    }