asp.net-core - 如何在asp.net核心的剃刀视图中隐藏一些文本字段
问题描述
我正在通过 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");}
}
运行项目后,视图和以前一样,所有字段都可见。如果有人建议我解决方案,我将不胜感激。
解决方案
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>
推荐阅读
- angular - 带有 ViewChildren 的 ExpressionChangedAfterItHasBeenCheckedError
- php - 注意:未定义变量:第 16 行 /Applications/XAMPP/xamppfiles/htdocs/menthor/login.php 中的电子邮件
- python - 如何在python中解析一个jsonify对象并在html中显示?
- memory-leaks - 有没有一种惯用的方法来避免使用此代码“Box::leak”?
- python - 如何在辅助函数中使用固定装置?
- php - 是否可以从多个表中的多个值创建单个 url?
- javascript - 如何获取某个元素右侧到另一个元素的偏移量?
- php - 使用 PHP cURL 发布混合 JSON 数据
- json - 我们可以使用 Hangouts Chat API 发送文件吗?
- java - 登录spring集成