Still learning how to work with View Components...
I currently have some jquery that gets called when the user selects a selection in a drop down control. Based on the user selection the jquery calls a view component with view model passed and then displays the corresponding view in a div. Everything works
great and exactly like I want it, but on the newly displayed view that is in the div, the validation warnings from the view model are already displayed like the form has been submitted already and hasn't passed validation and then when I submit, it will post
even though it should fail due to model validation in some of my tests. I must be missing something. I was hoping to perform validation on the newly displayed view that is in the div before the users makes the final submit. Any help would be appreciated
or if I need to perform validation in a different way please let me know.
Below is my code and I added a link to an image of what the newly displayed view looks like on initial load. You can see model validation errors are already displaying saying to enter a part number even though
the form has not been submitted yet. The select drop down is on the main view. The Part Number and Number of copies controls are on the new view that gets displayed in the div returned by the view component. The validation on those two controls are what
is not working as intended.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
11 Points
14 Posts
Model Validation On a View Component
Oct 08, 2019 07:04 PM|bigmac025|LINK
Hello,
Still learning how to work with View Components...
I currently have some jquery that gets called when the user selects a selection in a drop down control. Based on the user selection the jquery calls a view component with view model passed and then displays the corresponding view in a div. Everything works great and exactly like I want it, but on the newly displayed view that is in the div, the validation warnings from the view model are already displayed like the form has been submitted already and hasn't passed validation and then when I submit, it will post even though it should fail due to model validation in some of my tests. I must be missing something. I was hoping to perform validation on the newly displayed view that is in the div before the users makes the final submit. Any help would be appreciated or if I need to perform validation in a different way please let me know.
Thanks,
Tim
View that has jquery that calls the view component:
The View Component:
Example of one of the views the view component returns:
Contributor
2690 Points
874 Posts
Re: Model Validation On a View Component
Oct 09, 2019 07:22 AM|Rena Ni|LINK
Hi bigmac025,
It would not render js in view component.It is by design,so you need to add js file in your view component cshtml file:
@model WarrantyLabelsViewModel <p>Warranty Standard Case Label (400)</p> <br /> <label asp-for="PartNumber" class="control-label"></label> <input asp-for="PartNumber" type="text" class="form-control"> <span asp-validation-for="PartNumber" class="text-danger" style="width: 200px; display:block;"></span> <br /> <label asp-for="NumberOfCopies" class="control-label"></label> <input asp-for="NumberOfCopies" type="text" value="1" style="width: 75px" ; class="form-control"> <br /> <br /> <div class="form-group"> <input type="submit" value="Print Label(s)" class="btn btn-primary" /> </div> @{await Html.RenderPartialAsync("_ValidationScriptsPartial");} <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script> <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
Best Regards,
Rena