Итеративно сгенерированные модалы с автоматически сгенерированными идентификаторами - не работает!В чем проблема?

Question

Я создаю страницу, которая должна отображать записи из базы данных в виде текстовых полей, и у каждого есть кнопка, которая вызывает контроллер, чтобы удалить эту запись, основываясь на его ключе Id.Затем мой босс попросил меня добавить модальное предупреждение пользователя - ваше типичное «Вы действительно хотите ...?»

Для этого мне нужно сгенерировать модальный кодовый код для каждой записи и назначитьсоответствующие идентификаторы и цели данных автоматически.

Мой текущий дизайн выглядит следующим образом:

@model System.Data.DataRow


<div class="input-group my-1">
    <input type="text" class="form-control border-secondary tinybox" value="@Model[1]" name="ArtCategory">

    <div class="input-group-append">



        <button type="button" class="btn btn-outline-secondary tinybox py-0" name="CatDelete" value="@Model[0]" data-toggle="modal" data-target="@("#" + Model[0] + "DeleteCategoryModal")">
            <i class="fas fa-times"></i>
        </button>

    </div>
</div>



<div class="modal fade" id="@(Model[0] + "DeleteCategoryModal")">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Vill du verkligen radera denna kategori?</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->

            <div class="modal-body">
                Kategorinummer: @Model[0]
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">


                @using (Html.BeginForm("DeleteCategory", "Backoffice", FormMethod.Post, new { id = Model[0] }))
                {

                    <button type="submit" id="DeleteCategory" Name="CatDelete" value="@Model[0]" class="btn btn-dark">Bekräfta</button>
                    <script>
                        $('#DeleteArticle').click(function () {
                            $('#DeleteArticleModal').modal('hide');
                        });
                    </script>

                }
                    <button type="button" class="btn btn-dark" data-dismiss="modal">Avbryt</button>
                </div>

        </div>
    </div>
</div>

Этот код передается как частичное представление и отображается несколько раз.Модель [0] является числовым значением.Идея состоит в том, что для удаления категории 3 и т. Д. Для идентификаторов модалов будет использоваться код "3DeleteCategoryModal" и т. Д.

Проблема?Модалы не открываются.Я нажимаю кнопку, ничего не происходит.По какой-то причине он не может найти модальный сегмент с правильным именем.Любопытно, что когда я смотрю скомпилированный исходный код, он выглядит просто отлично:

            <div class="col-12 px-1">

<div class="input-group my-1">
    <input type="text" class="form-control border-secondary tinybox" value="Stuff" name="ArtCategory">

    <div class="input-group-append">



        <button type="button" class="btn btn-outline-secondary tinybox py-0" name="CatDelete" value="3" data-toggle="modal" data-target="#3DeleteCategoryModal">
            <i class="fas fa-times"></i>
        </button>

    </div>
</div>



<div class="modal fade" id="3DeleteCategoryModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Vill du verkligen radera denna kategori?</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->

            <div class="modal-body">
                Kategorinummer: 3
            </div>

Итак.Как мне сделать эту работу?