Как скрыть некоторые текстовые поля в виде бритвы в ядре asp. net

Question

Я реализую проект на asp. net ядре. У меня есть элемент списка выбора, его параметры загружаются из модели, и он имеет 2 элемента. Моя проблема в том, что я хочу, чтобы в окне бритвы, согласно выбранной опции в списке выбора, некоторые TextFields были показаны пользователю. Например, если пользователь выберет первый вариант, пользователю будут показаны три поля, а если пользователь выберет второй вариант, пользователю будут показаны другие поля, а остальные три поля будут скрыты. Для этого. Я попробовал некоторый код, подобный приведенному ниже, в моем представлении создания:

@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 () {
    $('#applicantvm.ApplicantType').change(function () {
    var value = $(this).val();
    if (value == '1') {
        $(".legal").hide();
    } else {
        $(".person").show();
    }
});
});
 </script>


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

 <h1>Create</h1>

 <h4>Applicant</h4>
 <hr />
 <div class="row">
 <div class="col-md-4">
    <form asp-action="Create">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

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

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

        <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 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.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.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">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>
</div>

<div>
<a asp-action="Index">Back To List</a>
</div>

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

После запуска проекта представление будет таким же, как и раньше, и все поля будут видны. Я ценю, если кто-нибудь предложит мне решение.

Answer 1

asp-for="applicantvm.ApplicantType" отображает идентификатор и имя в html как id="applicantvm_ApplicantType" name="applicantvm.ApplicantType", вы можете использовать инструменты разработчика для проверки исходного кода.

Поэтому вы должны изменить javascript, как показано:

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

Результат:

Answer 2

Проще говоря,

1. Запись ONCHANGE Событие в раскрывающемся списке и вызов функции JavaScript.
2. Начиная с JavaScript, основываясь на выпадающих значениях, показать и скрыть элементы управления.