ASP.NET Core Razor Pages Model State Is Not Valid & Model data is empty

Question

I am new to ASP.NET core razor pages & while practising I am facing a problem related to ViewModel Binding in Core2.1 Razor Pages. When I post form data then it shows ModelState is invalid with empty data.

Here is my Razor Page-

<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>

I am using Jquery to Submit the form as we are using a predefined submit hyper link of jquery-steps(jquery-steps.com), unable to change it to button. Here is my jquery submit button code, which is working-

$(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();
    }
}

But My ModelState.IsValid returns false & with out data in ViewModel. Despite posting data in fields, field data is not available on PageModel including Invalid ModelState. My questions is about what is causing this issue is it the issue with jJquery form submission or I am missing something?

kmatyaszek kmatyaszek · Accepted Answer · 2019-01-08T11:37:49

Input tag helper generates id and name HTML attributes for the expression name specified in the asp-for attribute.

E.g:

<input asp-for="Email" />

generates:

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

You should remove name attribute from input element.

Also, you are missing editor for property 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>
...

ASP.NET Core Razor Pages Model State Is Not Valid & Model data is empty

2 Answers