配置 ASP HTML Helper 以防止验证失败时提交表单

Question

我正在学习 ASP.NET Core（在 .NET 5.0 上）。我最近在模型验证中使用了表单 HTML 助手。但似乎有些不对劲。 虽然验证失败，客户端仍然调用action并向服务器发送请求。为什么？

不管是什么原因，我正在寻找一种方法来防止提交操作。我发现 this 帮助我防止提交。但问题是，这样我就无法进行客户端验证。换句话说，我的验证消息没有显示，这个解决方案只是阻止了表单提交。

那么我如何配置 ASP.NET 表单 HTML 助手（或者可能是提交按钮）在客户端验证失败时不提交并仍然显示验证错误信息？

以下是我的部分查看代码：

<fieldset>
    @using(Html.BeginForm())
    {
        @Html.ValidationSummary()

        <p>
            @Html.LabelFor(x => x.Title)
            @Html.EditorFor(x => x.Title)
            @Html.ValidationMessageFor(x => x.Title)
        </p>

        <p>
            @Html.LabelFor(x => x.Body)
            @Html.TextAreaFor(x => x.Body)
            @Html.ValidationMessageFor(x => x.Body)
        </p>

        <p>
            <button type="submit">Create</button>
        </p>
    }
</fieldset>

Answer 1

Although the validation fails, client still calls the action and a request is sent to the server. Why?

问题可能与以下原因有关：

客户端验证脚本未加载。

默认情况下，Asp.net 核心应用程序 Client-side validation 使用 JQuery 验证插件和 jQuery Unobtrusive Validation 库。所以，我们必须添加相关的参考资料。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>

此外，上述脚本在_Layout.cshtml和_ValidationScriptsPartial.cshtml页面中也有引用，您也可以使用这些视图。

例如：Create.cshtml

 @model WebApplication6.Data.Employee

 @{
     ViewData["Title"] = "Create";
     Layout = "~/Views/Shared/_Layout.cshtml";
 }

 <h1>Create</h1>

 <h4>Employee</h4>
 <hr />
 <div class="row">
     <div class="col-md-4">
         @using (Html.BeginForm("Create","Home", FormMethod.Post))
         {
             @Html.ValidationSummary()

             <p>
                 @Html.LabelFor(x => x.EmpName)
                 @Html.EditorFor(x => x.EmpName)
                 @Html.ValidationMessageFor(x => x.EmpName)
             </p>

             <p>
                 @Html.LabelFor(x => x.Description)
                 @Html.TextAreaFor(x => x.Description)
                 @Html.ValidationMessageFor(x => x.Description)
             </p>

             <p>
                 <button type="submit">Create</button>
             </p>
         } 
     </div>
 </div>

 <div>
     <a asp-action="Index">Back to List</a>
 </div>

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

浏览器已禁用JavaScript。

可能浏览器被禁用JavaScript，所以，导致客户端脚本无法运行，尝试检查浏览器设置或尝试使用其他浏览器进行验证。如果该问题与浏览器有关，请尝试启用 JavaScript.

配置 ASP HTML Helper 以防止验证失败时提交表单

Configure ASP HTML Helper to prevent form from submitting when validation fails

asp.net

validation

asp.net-mvc

html-helper

asp.net-core