Как привязать выбранный элемент из списка выбора к условию if в представлении бритвы

Question

Я реализую проект с asp. net ядром. У меня есть представление «Правка», код которого выглядит следующим образом:

 @model CSDDashboard.Models.ApplicantViewModel
 <script src="~/lib/jquery/dist/jquery.min.js"></script>

 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js">      </script>

<script>
    $(document).ready(function () {
  @*  $(".person").show(); *@
    @* $(".legal").hide();  *@
    $('#applicantvm_ApplicantType').change(function () {
        var value = $(this).val();
        if (value == '1') {
            $(".person").show();
            if ($(".legal").show()) {
                $(".legal").hide();
            }
        } else { 
            $(".legal").show();
            if ($(".person").show()) {
                $(".person").hide();
            }
        }
    });
    });
    </script>


   @{
ViewData["Title"] = "Edit";
 }

 <h1>Edit</h1>

 <h4>applicant</h4>
 <hr />
<div class="row">
<div class="col-md-4">
    <form asp-action="Edit">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="applicantvm.ApplicantId" />
        <div class="form-group">
            <label asp-for="applicantvm.ApplicantType" class="control-label"></label>
            <select asp-for="applicantvm.ApplicantType" class="form-control" asp-items="ViewBag.ApplicantType"></select>
            <span asp-validation-for="applicantvm.ApplicantType" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="applicantvm.Address" class="control-label"></label>
            <input asp-for="applicantvm.Address" class="form-control" />
            <span asp-validation-for="applicantvm.Address" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="applicantvm.Description" class="control-label"></label>
            <input asp-for="applicantvm.Description" class="form-control" />
            <span asp-validation-for="applicantvm.Description" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="applicantvm.Name" class="control-label"></label>
            <input asp-for="applicantvm.Name" class="form-control" />
            <span asp-validation-for="applicantvm.Name" class="text-danger"></span>
        </div>
        @if (Model.applicantvm.ApplicantType == 2)
        {
            <div class="form-group legal">
                <label asp-for="legalapplicantvm.EconomicCode" class="control-label"></label>
                <input asp-for="legalapplicantvm.EconomicCode" class="form-control" />
                <span asp-validation-for="legalapplicantvm.EconomicCode" class="text-danger"></span>
            </div>
            <div class="form-group legal">
                <label asp-for="legalapplicantvm.NationalCode" class="control-label"></label>
                <input asp-for="legalapplicantvm.NationalCode" class="form-control" />
                <span asp-validation-for="legalapplicantvm.NationalCode" class="text-danger"></span>
            </div>
            <div class="form-group legal">
                <label asp-for="legalapplicantvm.RegisterNo" class="control-label"></label>
                <input asp-for="legalapplicantvm.RegisterNo" class="form-control" />
                <span asp-validation-for="legalapplicantvm.RegisterNo" class="text-danger"></span>
            </div>
        }
   else
    {
        <div class="form-group person">
            <label asp-for="personapplicantvm.Username" class="control-label"></label>
            <input asp-for="personapplicantvm.Username" class="form-control" />
            <span asp-validation-for="personapplicantvm.Username" class="text-danger"></span>
        </div>
        <div class="form-group person">
            <label asp-for="personapplicantvm.NationalCode" class="control-label"></label>
            <input asp-for="personapplicantvm.NationalCode" class="form-control" />
            <span asp-validation-for="personapplicantvm.NationalCode" class="text-danger"></span>
        </div>
        <div class="form-group person">
            <label asp-for="personapplicantvm.IssuePlace" class="control-label"></label>
            <input asp-for="personapplicantvm.IssuePlace" class="form-control" />
            <span asp-validation-for="personapplicantvm.IssuePlace" class="text-danger"></span>
        </div>
        <div class="form-group person">
            <label asp-for="personapplicantvm.BirthCertificateNo" class="control-label"></label>
            <input asp-for="personapplicantvm.BirthCertificateNo" class="form-control" />
            <span asp-validation-for="personapplicantvm.BirthCertificateNo" class="text-danger"></span>
        </div>
        }
        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>
</div>
  </div>

  <div>
  <a asp-action="Index">Back to list</a>
  </div>

  @section Scripts {
  @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
  }

если Model.applicantvm.ApplicantType == 2, то соответствующие поля отображаются пользователю, в противном случае некоторые другие поля в разделе else имеют быть показано пользователю. Теперь моя проблема в том, что я не знаю, как связать выбранное значение из списка выбора с условием if в моем коде. Например, в моем коде, если на исходной странице просто отображаются допустимые поля класса, то когда я изменяю элемент списка выбора на другое значение, тогда поля класса персонажа не показываются пользователю. Я ценю, если кто-нибудь решит мою проблему.

Answer 1

здесь также не эксперт, но что, если вы оберните эти связанные поля с помощью Id, например

 <div id="personalApplication">
     //related fields
 </div>
 <div id="legalApplication">
     //related fields
 </div>

, и потеряете @if (Model.applicantvm.ApplicantType == 2) и еще часть вокруг связанные поля. и так как у вас есть список выбора, вы можете получить значения на выбранные опции, такие как. Затем на странице чтения вы можете добавить

<script> 
 $(document).ready(function () {
     if($('#applicantvm_ApplicantType option:selected').val() != 1){
         $("#personalApplication").show();
         $("#legalApplication").hide();
      }
     else{
         $("#personalApplication").hide();
          $("#legalApplication").show();
      }
     $("#applicantvm_ApplicantType").on("change", function () {
         if ($('#applicantvm_ApplicantType option:selected').val() != 1) {
            $("#personalApplication").show();
            $("#legalApplication").hide();


         } else {
            $("#personalApplication").hide();
            $("#legalApplication").show();

         }
     })

 });
 </script>