Показать кнопки и Div на событии в ядре Asp.net с Razor Pages - PullRequest
1 голос
/ 04 октября 2019

У меня есть два выпадающих меню, одно для категорий, а другое для подкатегорий. У меня есть частичное представление _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, так что, может быть, там может быть какая-то "ошибка"? Спасибо

1 Ответ

1 голос
/ 08 октября 2019

Вот минимальная демонстрация вашего сценария с использованием полностью статических данных - ваша базовая концепция верна: https://jsfiddle.net/f7j6vgmo/.

Но если мы добавим Bootstrap, он перестанет работать: https://jsfiddle.net/f7j6vgmo/1/

Это происходит потому, что bootstrap добавляет !important в определение CSS для атрибута hidden. Это видно в инспекторе элементов браузера, если вы посмотрите на один из элементов, помеченных как скрытые (даже после того, как он был предметом команды .show()):

[hidden] {
    display: none!important;

Источник этого правила указанкак reboot.scss, который является частью Bootstrap. Правило заставляет display:none; переопределить набор правил display:block, запустив метод .show(). (Обычно установка свойства display переопределяет атрибут hidden, как указано здесь ).

Самая простая альтернатива - заменить атрибуты hidden на style="display:none;".

Демо: https://jsfiddle.net/f7j6vgmo/2/

...