Model Validation On a View Component[Answered] RSS

1 reply

Last post Oct 09, 2019 07:22 AM by Rena Ni

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

bigmac025

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.

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.

https://imgur.com/hnhd0Sn

Thanks,

Tim

View that has jquery that calls the view component:

@model OnTarget.Models.Warranty.WarrantyLabelsViewModel

@{
    ViewData["Title"] = "Warranty Labels";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
    public string GetAntiXsrfRequestToken()
    {
        return Xsrf.GetAndStoreTokens(Context).RequestToken;
    }
}

<input type="hidden" id="RequestVerificationToken"
       name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">

<br />

<h1>Generate Warranty Labels</h1>

<br />

<div class="row">
    <div class="col-md-10">
        <form asp-action="WarrantyLabels" id="partialformAjaxWithComponent" method="post" asp-controller="Warranty">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-5">

                            <label asp-for="SelectedClassID" class="control-label"></label>
                            <select asp-for="SelectedClassID" asp-items="@Model.LabelClasses" class="form-control" id="selectedClassID" onchange="loadComponentView()" style="height: 60px;">
                                <option selected>Select Label Class</option>
                            </select>

                            <br />

                            <span asp-validation-for="SelectedClassID" class="text-danger" style="width: 500px; display: block;"></span>

                            <br /><br />

                            <div id="divLabelClass"></div>

                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    
    function loadComponentView() {

        var paramsFromForm = {};
        $.each($("#partialformAjaxWithComponent").serializeArray(), function (index, value) {
            paramsFromForm[value.name] = paramsFromForm[value.name] ? paramsFromForm[value.name] || value.value : value.value;
        });

        var componentData = {};

        componentData.standardValidation = paramsFromForm;

        var selection = document.getElementById('selectedClassID');
        componentData.selectedClassID = selection.value;

        
        $.ajax({
            url: window.location.origin + "/Warranty/LoadWarrantyLabelsViewComponent",
            type: "post",
            dataType: "json",
            beforeSend: function (x) {
                if (x && x.overrideMimeType) {
                    x.overrideMimeType("application/json;charset=UTF-8");
                };
                x.setRequestHeader('RequestVerificationToken', document.getElementById('RequestVerificationToken').value);
            },
            data: componentData,
            complete: function (result) {
                $("#divLabelClass").html(result.responseText);
            }
        });
    };

</script>

The View Component:

using Microsoft.AspNetCore.Mvc;
using OnTarget.Models.Warranty;

namespace OnTarget.ViewComponents
{
    public class WarrantyLabelsViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke(WarrantyLabelsViewModel warrantyLabelsViewModel)
        {

            string SelectedView  = "Default";

            if(warrantyLabelsViewModel.SelectedClassID == 400)
            {
                SelectedView = "LabelClass400";
            }
            else if (warrantyLabelsViewModel.SelectedClassID == 401)
            {
                SelectedView = "LabelClass401";
            }
            else
            {
                SelectedView = "Default";
            }

            return View(SelectedView, warrantyLabelsViewModel);
        }
    }
}

Example of one of the views the view component returns:

@model OnTarget.Models.Warranty.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">
<span asp-validation-for="NumberOfCopies" class="text-danger" style="width: 500px; display:block;"></span>

<br />
<br />

<div class="form-group">
    <input type="submit" value="Print Label(s)" class="btn btn-primary" />
</div>

Rena Ni

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

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

‹ Previous Thread|Next Thread ›