如何在asp.net核心的剃刀视图中隐藏一些文本字段

Question

我正在通过 asp.net core 实现一个项目。我有一个选择列表项目，它的选项是从模型加载的，它有 2 个项目。我的问题是，我想在剃刀视图中，根据选择列表中的选定选项，向用户显示一些文本字段。例如，如果用户选择第一个选项，则向用户显示三个字段，如果用户选择第二个选项，则向用户显示其他字段，同时隐藏其他三个字段。为此。我在创建视图中尝试了如下代码：

@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和name，如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 中，根据下拉值显示和隐藏控件。