CODEWITHSUNDEEP
asp.net-corerazorerror-handlingrazor-pagesfluentvalidation
Zorev Gnoz
Zorev Gnoz

Reputation: 251

Fluent Validation in Razor Page

Based on this page I am trying to make a razor page that used fluent validation. It seemed to have checked but I'm not sure why the error message will not display.

Here is what I have done so far:

cshtml.cs:

CreateCommandValidator CreateValidator = new CreateCommandValidator();
var createCheck = CreateValidator.Validate(NewItem);
foreach (ValidationFailure fail in createCheck.Errors)
{
     ModelState.AddModelError(fail.PropertyName, fail.ErrorMessage);
}
return Page();

cshtml:

<label class="col-form-label">Name</label>
<input asp-for="NewItem.Name" type="text" class="form-control mb-2"/>
<span asp-validation-for="NewItem.Name" class="text-danger"></span>

CreateCommandValidator:

RuleFor
     (Item => Item.Name)
     .NotEmpty().WithMessage("The name cannot be empty")
     .Length(1, 100);

The ValidationFailure is able to detect the error message but not sure why it won't be displayed out on the page. Any ideas why? Thanks in advance!

Upvotes: 4

Views: 3645

Answers (2)

Rena
Rena

Reputation: 36705

The ValidationFailure is able to detect the error message but not sure why it won't be displayed out on the page. Any ideas why?

That is because your key name of data-valmsg-for is NewItem.Name.

Your cshtml file below:

<span asp-validation-for="NewItem.Name" class="text-danger"></span>

would generate the html in the browser like below:

<span data-valmsg-for="NewItem.Name" class="text-danger field-validation-valid" data-valmsg-replace="true"></span>

1.The first way,you could change the key name like below:

ModelState.AddModelError("NewItem.Name", fail.ErrorMessage);

2.The second way,if you do not want to add the key name manually,you could install FluentValidation.AspNetCore package and change your code like below:

CreateCommandValidator CreateValidator = new CreateCommandValidator();
var createCheck = CreateValidator.Validate(NewItem);

//AddToModelState(ModelStateDictionary modelState, string prefix);
createCheck.AddToModelState(ModelState, "NewItem");

return Page();

Upvotes: 5

shobhit vaish
shobhit vaish

Reputation: 951

You need to have scripts for unobtrusive validation if they are not already there.

Example

View(cshtml):

@{
    ViewData["Title"] = "Log in";
}
<section>
    <div class="container">

    </div>
</section>


@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
            crossorigin="anonymous"
            integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A=">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"
            crossorigin="anonymous"
            integrity="sha256-9GycpJnliUjJDVDqP0UEu/bsm9U+3dnQUH8+3W10vkY=">
    </script>
}

The shared layout(_Layout.cshtml) should have scripts section

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


 </head>
<body>
    <div class="main-container">
        @RenderBody()
    </div>



    @RenderSection("Scripts", required: false)


</body>
</html>

Upvotes: 0

Related Questions