Jquery 使用Razor页面在Asp.net core中显示事件上的按钮和Div

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

我尝试将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) => {
                                             //...

---

实现这一目标的好方法是什么？我是Jquery新手，所以可能会有某种“错误”吗？谢谢

这里有一个使用完全静态数据的场景演示-您的基本概念是正确的：

但如果我们添加引导，它将停止工作：

这似乎是因为引导添加了

！对于
隐藏的
属性的CSS定义，请参见重要信息。如果查看标记为隐藏的其中一个元素（即使该元素已成为
.show（）
命令的主题），则浏览器的元素检查器中会显示该元素：

该规则的来源为
reboot.scss
，它是引导的一部分。规则使
显示：无通过运行
.show（）
方法覆盖
显示：阻止
规则集。（通常，设置
显示
属性会覆盖
隐藏
属性，如文档所述）

最简单的替代方法是将
隐藏的
属性替换为
style=“display:none；”

演示：
“可能有某种语法错误”…如果您有语法错误，它将显示在浏览器的控制台上，假设没有其他错误。。。因为您没有展示足够的相关代码，所以我们无法真正说明为什么事情没有发生。您是否也尝试过使用浏览器的调试器？或者做一些简单的控制台日志记录，看看是否触发了事件等等？在进一步调试之后，JQuery函数实际上会触发。此外，如果我从div中删除“hidden”，然后将Jquery更改为do:.hide（），它实际上会隐藏div，但.show（）不会执行相反的操作并显示。我试着把class=“隐形”放在div上，看看这是否可行，但没有。使用“隐藏”和class=“不可见”是一种很好的方法吗？也许有办法通过OnGet隐藏DIV？同时让我知道你还想看什么其他相关的代码。主要是相关的HTML和CSS，这样我们就可以重现问题了。你正在谈论的div，还有你正在谈论的CSS类。否则很难知道一切是如何相互作用产生这些结果的div已经包含在内了，我还没有创建新的CSS类，“隐形”是一个引导类。我已经为Category和SubCategory添加了html，以及它们如何用后面的代码初始化。
<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));

}

[hidden] {
    display: none!important;