IFormFile 上的 C# Razor 页面必需属性仅在单击时有效

Question

这里的目标是让 input="file" Required 验证属性在点击之前起作用。现在，当我要上传 select 文件时，我必须单击才能要求验证才能工作。结果我必须双击提交。

index.cshtml.cs

  [Required(ErrorMessage = "File is required.")]
  [BindProperty]
  [Display(Name = "File")]
  public IFormFile Upload { get; set; }

index.cs

@page
@model IndexModel
@{

   ViewData["Title"] = "Data uploader";
}

@if (Model.Success)
{
   <div class="alert alert-success alert-dismissible">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       Failas įkeltas.
   </div>
}
@if (Model.Error)
{
   <div class="alert alert-danger alert-dismissible">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       @Model.ErrorMessage
   </div>
}
<div class="panel-body py-4 bg-light">
   <div class="container col-lg-8 floated_elements">
       <div class="h4 text-center py-3">Data update</div>
       <form method="post" class="needs-validation" enctype="multipart/form-data" novalidate>
           <div class="form-group row mb-3">
               <label asp-for="Upload" class="col-sm-2 col-form-label"></label>
               <div class="col-sm-10">
                   <div class="custom-file">
                       <input type="file" asp-for="Upload" class="custom-file-input" accept=".zip" />
                       <label class="custom-file-label">Select file</label>
                       <span asp-validation-for="Upload"></span>
                   </div>
               </div>
           </div>
           <button class="btn btn-primary float-right" type="submit">Submit</button>
       </form>
   </div>
</div>

@section Scripts {

   @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
   <script>
       $(document).ready(function () {
           if ($(".custom-file span").hasClass('field-validation-error')) {
               if (!$(".custom-file-input").hasClass('is-invalid')) {
                   $(".custom-file-input").addClass("is-invalid")
               }
           }
       }
       );
       window.setTimeout(function () {
           $(".alert-success").fadeTo(500, 0).slideUp(500, function () {
               $(this).remove();
           });
       }, 2000);

       $(document).ready(function () {
           $('.custom-file-input').on("change", function () {
               var fileName = $(this).val().split("\").pop();
               $(this).next('.custom-file-label').html(fileName);
           });
       });

   </script>

}

Answer 1

单击 button 而不填充任何字段违反了模型上的 [Required] 属性。 ModelState 无效。显示验证错误消息以供查看。如果不提交，验证将无效。

解决方案 1

创建 client-side JavaScript 表单验证。

解决方案 2

对于您的情况，有一个简单的解决方案。添加 $("#update").click(); 以触发验证。

Codes of Js

<script>
        $(document).ready(function () {

            $("#update").click();

            if ($(".custom-file span").hasClass('field-validation-error')) {
                if (!$(".custom-file-input").hasClass('is-invalid')) {
                    $(".custom-file-input").addClass("is-invalid")
                }
            } 
        }

为了更好的用户体验，我优化了输入change事件的代码。

            $('.custom-file-input').on("change", function () {
                var fileName = $(this).val().split("\").pop();
                $(this).next('.custom-file-label').html(fileName);
                $(".custom-file-input").removeClass("is-invalid");
                if (fileName == '')
                    $(".custom-file-input").addClass("is-invalid")
            });

IFormFile 上的 C# Razor 页面必需属性仅在单击时有效

C# Razor page required attribute on IFormFile works only when clicking away

c#

asp.net-mvc

validationattribute

asp.net-core

razor-pages