How to hide some textfields in razor view in asp.net core

Question

I'm implementing a project by asp.net core. I have a selectlist item which its options are loaded from a model and it has 2 items. My problem is, I want in the razor view, according to the selected option in selectlist, some TextFields be shown to the user. For example if the user choose the first option, three of the fields be shown to the user and if the user selects the second option, other fields be shown to the user meanwhile the other three field be hidden. For doing this. I have tried some code like below in my Create view:

@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");}
}

After running the project, the view is the same as before and all the fields will be visible. I appreciate if anyone suggest me a solution.

Answer 1

In Simple terms,

1. Write ONCHANGE Event in the drop down and invoke a JavaScript function.
2. From JavaScript, based on the drop down values, show and hide the controls.

Answer 2

asp-for="applicantvm.ApplicantType" render the id and name in the html like id="applicantvm_ApplicantType" name="applicantvm.ApplicantType" ,you could use the developer tools to check the Source code.

So you should change your javascript as shown:

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

Result: