使用 Razor Pages 在 Asp.net 核心中的事件上显示按钮和 Div

Question

我有两个下拉菜单，一个用于类别，另一个用于子类别。我有一个名为 _CreateProject 的局部视图，它具有用于 post 表单的 html 以创建新项目。我有一个按钮，单击我希望它显示用于创建新项目的表单。但是，我希望 "Create Project" 按钮仅在选择类别和子类别时可见，并且仅在单击按钮时显示 _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 的新手，所以也许那里可以有某种 "error"？谢谢

Answer 1

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

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

这似乎是因为 bootstrap 将 !important 添加到 hidden 属性的 CSS 定义中。如果您查看标记为隐藏的元素之一（即使它已成为 .show() 命令的主题），这在浏览器的元素检查器中是可见的：

[hidden] {
    display: none!important;

该规则的来源为 reboot.scss，它是 Bootstrap 的一部分。该规则使 display:none; 覆盖由运行和 .show() 方法设置的 display:block 规则。（通常，设置 display 属性会覆盖 hidden 属性，如 here 所述）。

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

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

使用 Razor Pages 在 Asp.net 核心中的事件上显示按钮和 Div

Show Button and Div on Event in Asp.net core with Razor Pages

html

css

jquery

twitter-bootstrap

razor-pages