使用剃刀页面在 Asp.net 核心中显示事件按钮和 Div

Question

我有两个下拉菜单，一个用于类别，另一个用于子类别。 我有一个名为 _CreateProject 的部分视图，其中包含用于创建新项目的帖子表单的 html。 我有一个按钮，单击时我希望它显示用于创建新项目的表单。但是，我希望"创建项目"按钮仅在选择类别和子类别时可见，并且仅在单击按钮时显示部分_CreateProject。

我尝试将div 标记为隐藏，然后使用 $(#id(.show(( 显示它们，但div 没有被显示。

这些是我的脚本，以及我尝试显示按钮的位置：

<script>
//Populate SubCategory when Category changes
$(function () {
$("#Category").on("change", function () {
var categoryId = $(this).val();
$("#SubCategory").empty();
$("#SubCategory").append("<option value=''>---Select Subcategory---</option>");
$.getJSON(`?handler=SubCategories&categoryId=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#SubCategory").append(`<option value="${item.subCategoryId}">${item.subCategoryName}</option>`);
});
});
});
//try to show #partial on button click
$("#projectButton").click(function () {
$("#partial").show(); //try to reveal partial here
});

$("#SubCategory").on("change", function () {
$("#projectButton").show();  //try to show button here
var SubCategoryId = $(this).val;
$("#ProjectId").empty();
$.getJSON(`?handler=Projects&SubCategory=${SubCategoryId}`, (data) => {
//...

这是按钮以及包含部分的div：

<div hidden id="projectButton">
<button type="submit" class="btn btn-default">New Project</button>
</div>
<div id="partial" hidden>
<partial name="_CreateProject"/>
</div>

供参考的类别和子类别

<label asp-for="Category">Category:  </label>
<select asp-for="Category" asp-items="Model.categorylist">
<option value="">---Select Category---</option>
</select>

<label asp-for="SubCategory">Subcategory:</label>
<select asp-for="SubCategory"><option value="">---Select Subcategory---</option></select>

public void OnGet()
{
categorylist = new SelectList(categoryService.GetCategories(), nameof(Category.CategoryId), nameof(Category.CategoryName));
}
//called by first jQuery
public JsonResult OnGetSubCategories()
{
UserId = Convert.ToInt32(HttpContext.Session.GetString("SessionUserId"));
return new JsonResult(categoryService.GetSubCategories(Category.CategoryId, UserId));
}

实现此目的的好方法是什么？ 我是 Jquery 的新手，所以也许那里可能存在某种"错误"？ 谢谢

Answer 1

下面是使用完全静态数据的场景的最小演示 - 您的基本概念是正确的：https://jsfiddle.net/f7j6vgmo/。

但是如果我们添加 Bootstrap，它会停止工作：https://jsfiddle.net/f7j6vgmo/1/

这似乎是因为引导程序向hidden属性的 CSS 定义中添加了!important。如果您查看其中一个标记为隐藏的元素(即使它是.show()命令的主题(，这在浏览器的元素检查器中可见：

[hidden] {
display: none!important;

该规则的来源以reboot.scss的形式给出，它是 Bootstrap 的一部分。该规则使display:none;通过运行.show()方法重写display:block规则集。(通常，设置display属性会覆盖hidden属性，如此处所述(。

最简单的替代方法是将hidden属性替换为style="display:none;"。

演示：https://jsfiddle.net/f7j6vgmo/2/