Model Validation On a View Component [Answered]RSS

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

• • Reply
  Rena Ni

  Participant

  1060 Points

  350 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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.