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

【问题标题】：Show Button and Div on Event in Asp.net core with Razor Pages使用 Razor 页面在 Asp.net 核心中的事件上显示按钮和 Div
【发布时间】：2020-02-03 01:41:50
【问题描述】：

我有两个下拉菜单，一个用于类别，另一个用于子类别。我有一个名为 _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 的新手，所以那里可能存在某种“错误”？谢谢

【问题讨论】：

"可能存在某种语法错误" ...如果您有语法错误，它将显示在浏览器的控制台中
无论如何，假设没有其他错误......因为您没有显示足够的相关代码，我们无法真正说出为什么事情没有发生。您是否也尝试过使用浏览器的调试器？或者做一些简单的控制台日志来查看事件是否被触发等？
经过进一步调试，JQuery 函数确实会触发。此外，如果我从 div 中删除“隐藏”，然后将 Jquery 更改为： .hide() 它实际上隐藏了 div，但 .show() 不会反向显示。我尝试将 class="invisible" 放在 div 中，看看是否可行，但它没有。使用“隐藏”和 class="invisible" 是一种很好的方法吗？也许有办法通过 OnGet 隐藏 div？也让我知道您还想看到哪些其他相关代码。
主要是相关的HTML和CSS，以便我们重现问题。您正在谈论的 div 以及您正在谈论的 CSS 类。否则很难知道一切是如何相互作用来产生这些结果的
div 已经包含在内，我还没有创建新的 CSS 类，“不可见”是一个引导类。我已经添加了 Category 和 SubCategory 的 html 以及它们是如何使用后面的代码初始化的。

标签： jquery html css twitter-bootstrap razor-pages

【解决方案1】：

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

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

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

[hidden] {
    display: none!important;

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

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

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

【讨论】：