ASP.NET Core Razor 页面模型状态无效且模型数据为空

Question

我是 ASP.NET 核心剃须刀页面的新手，在练习时我遇到了与 Core2.1 剃须刀页面中的 ViewModel 绑定相关的问题。当我发布表单数据时，它显示 ModelState 对于空数据无效。

这是我的 Razor 页面-

<form id="KycForm" method="post"  class="validate-modern wizard-wrap wizard-simple" enctype="multipart/form-data">
    <div class="wizard-head d-none">
        <h5>Step 1</h5>
        <span>Personal Details</span>
    </div>
    <div class="wizard-content">
        <div class="row">
            <div class="col-md-6">
                <div class="input-item input-with-label">
                    <label class="input-item-label">Email <span class="text-danger">*</span></label>
                    <input class="input-bordered  required" asp-for="Email" type="text" data-msg="Required" name="dob" min="1920-01-01" max="2009-12-12">
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div><!-- .input-item -->
            </div>
            <div class="col-md-6">
                <div class="input-item input-with-label">
                    <label class="input-item-label">First Name <span class="text-danger">*</span></label>
                    <input class="input-bordered  required" asp-for="FirstName" type="text" data-msg="Required" name="dob" min="1920-01-01" max="2009-12-12">
                    <span asp-validation-for="FirstName" class="text-danger"></span>
                </div><!-- .input-item -->
            </div>
            <div class="col-md-6">
                <div class="input-item input-with-label">
                    <label class="input-item-label">Last Name <span class="text-danger">*</span></label>
                    <input class="input-bordered  required" asp-for="FirstName" type="text" data-msg="Required" name="dob" min="1920-01-01" max="2009-12-12">
                    <span asp-validation-for="FirstName" class="text-danger"></span>
                </div><!-- .input-item -->
            </div>
            <div class="col-12">
                <h5 class="font-mid">Upload Here Your Passport Copy</h5><p></p>
                <div class="gaps-2x"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="input-item input-with-label">
                            <div class="relative">
                                <em class="input-file-icon fas fa-upload"></em>
                                <input type="file" asp-for="UploadPOIF" class="input-file required" data-msg="Required" id="filePass">
                                <label for="filePass">Choose a file</label>
                            </div>
                        </div>                                                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

我正在使用 Jquery 提交表单，因为我们使用的是 jquery-steps(jquery-steps.com) 的预定义提交超链接，无法将其更改为按钮。 这是我的 jquery 提交按钮代码，它正在工作-

$(function () {
    $('a[href="#finish"]').click(function () {
        $('form#KycForm').submit();
    });
});

PageModel-

public class TestModel : PageModel
{
    [BindProperty]
    public IFormFile UploadPOIF { get; set; }

    [BindProperty, Required, EmailAddress, StringLength(256, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 4)]
    public string Email { get; set; }

    [BindProperty, Required]
    public string FirstName { get; set; }

    [BindProperty, Required]
    public string LastName { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        if (ModelState.IsValid)
        {
            await UploadPhoto();
        }
        return Page();
    }
}

但我的 ModelState.IsValid 返回 false & 而 ViewModel 中没有数据。 尽管在字段中发布数据，但 PageModel 上的字段数据不可用，包括 Invalid ModelState。我的问题是关于导致此问题的原因是 jJquery 表单提交的问题还是我遗漏了什么？

Answer 1

输入标签助手为asp-for 属性中指定的表达式名称生成id 和name HTML 属性。

例如：

<input asp-for="Email" />

生成：

<input id="Email" name="Email" />

您应该从 input 元素中删除 name 属性。

另外，您缺少属性 LastName 的编辑器。

...
<div class="row">
    <div class="col-md-6">
        <div class="input-item input-with-label">
            <label class="input-item-label">Email <span class="text-danger">*</span></label>
            <input class="input-bordered  required" asp-for="Email" type="text" data-msg="Required" min="1920-01-01" max="2009-12-12">
            <span asp-validation-for="Email" class="text-danger"></span>
        </div><!-- .input-item -->
    </div>
    <div class="col-md-6">
        <div class="input-item input-with-label">
            <label class="input-item-label">First Name <span class="text-danger">*</span></label>
            <input class="input-bordered  required" asp-for="FirstName" type="text" data-msg="Required" min="1920-01-01" max="2009-12-12">
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div><!-- .input-item -->
    </div>
    <div class="col-md-6">
        <div class="input-item input-with-label">
            <label class="input-item-label">Last Name <span class="text-danger">*</span></label>
            <input class="input-bordered  required" asp-for="LastName" type="text" data-msg="Required" min="1920-01-01" max="2009-12-12">
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div><!-- .input-item -->
    </div>
    <div class="col-12">
        <h5 class="font-mid">Upload Here Your Passport Copy</h5><p></p>
        <div class="gaps-2x"></div>
    </div>
</div>
...

Answer 2

在您的模型中，您已指定字段验证，例如必填、长度检查和电子邮件地址。这些使您的模型无效，请删除这些或满足它们的条件。