模态对话框仅通过单击一个按钮即可加载，而不管类似按钮的数量如何-如何解决？

Question

I create a Datatables table inside a view with buttons that trigger modal dialog. The buttons appear only when some condition is met (exactly when image path is not null), and conditional statement is inside the view. Modal dialog is triggered by the button, but just one button - it is not triggered by any other buttons that conditionally appear, although they are positioned by foreach statement. Why isn't the dialog triggered by different buttons and how can I fix it?

That's the code of the view (some irrelevant columns are not shown):

@model IEnumerable<WeaponDoc.Models.Item>

@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Manager/Views/Shared/_LayoutManager.cshtml";
}

<div class="content-wrapper">
    <h2>Объекты</h2>

    <section class="content">
        <table id="itemtable" class="table">
            <thead>
                <tr>

                    <th>
                        @Html.DisplayName("Серийный номер")
                    </th>

                    <th>
                        @Html.DisplayName("Изображение")
                    </th>
                </tr>
            </thead>

            @foreach (var item in Model)
            {
                <tr>

                    <td>
                        @Html.DisplayFor(modelItem => item.ItemSerialNumber)
                    </td>

                    <td>
                        @Html.ActionLink("Загрузить", "Upload", new { itemID = item.ItemID }, htmlAttributes: new { @class = "btn btn-primary", @role = "button" })
                        @{ if (item.ImagePath != null && item.ImagePath.Length > 0)
                            {


                                <p><a href="#myModal2" id="btn2" class="btn btn-success"> <span class="glyphicon glyphicon-eye-open"></span> Открыть</a></p>
                                <div id="myModal2" class="modal fade">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                <h4 class="modal-title">Заголовок модального окна 2</h4>
                                            </div>
                                            <div class="modal-body">
                                                <img src="@Url.Content(item.ImagePath)" alt="@Url.Content(item.ImagePath)">
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            }
                            else
                            {
                                Html.Display("Нет изображения");
                            }
                        }
                    </td>

                </tr>
            }

        </table>

    </section>

    @section scripts{

        <link href="~/Content/DataTables/datatables.min.css" rel="stylesheet" />
        <script src="~/Content/DataTables/datatables.min.js"></script>
        <script src="~/Content/DataTables/datatables.js"></script>
        <script src="~/Content/DataTables/Buttons-1.5.2/js/dataTables.buttons.min.js"></script>
        <script src="~/Content/DataTables/Buttons-1.5.2/js/buttons.flash.min.js"></script>
        <script src="~/Content/DataTables/JSZip-2.5.0/jszip.min.js"></script>
        <script src="~/Content/DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>
        <script src="~/Content/DataTables/Buttons-1.5.2/js/buttons.html5.min.js"></script>
        <script src="~/Content/DataTables/Buttons-1.5.2/js/buttons.print.min.js"></script>
        <!-- jQuery -->
        <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script>
        <!-- Bootstrap -->
        <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script>


        <script>
            $(document).ready(function () {

                $("#itemtable").DataTable(
                    {
                        dom: 'Bfrtip',
                        buttons: [
                            { extend: 'copy', attr: { id: 'allan' } }, 'csv', 'excel', 'pdf', 'print'
                        ],

                        "language":
                        {
                            "processing": "Подождите...",
                            "search": "Поиск:",
                            "lengthMenu": "Показать _MENU_ записей",
                            "info": "Записи с _START_ до _END_ из _TOTAL_ записей",
                            "infoEmpty": "Записи с 0 до 0 из 0 записей",
                            "infoFiltered": "(отфильтровано из _MAX_ записей)",
                            "infoPostFix": "",
                            "loadingRecords": "Загрузка записей...",
                            "zeroRecords": "Записи отсутствуют.",
                            "emptyTable": "В таблице отсутствуют данные",
                            "paginate": {
                                "first": "Первая",
                                "previous": "Предыдущая",
                                "next": "Следующая",
                                "last": "Последняя"
                            },
                            "aria": {
                                "sortAscending": ": активировать для сортировки столбца по возрастанию",
                                "sortDescending": ": активировать для сортировки столбца по убыванию"
                            }
                        }

                    }
                )

                $
            })

        </script>

        <script>
            $(function () {
                $("#btn2").click(function () {
                    $("#myModal2").modal('show');
                });
            });
        </script>
    }
</div>

Here's the code of the action:

 public ActionResult Index()
        {
            var items = db.Items.Include(i => i.ItemSubtype);

            return View(items.ToList());

And the model itself:

namespace WeaponDoc.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Item
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Item()
        {
            this.CallDetails = new HashSet<CallDetail>();
            this.OrderDetails = new HashSet<OrderDetail>();
        }

        public System.Guid ItemID { get; set; }
        public string Additional { get; set; }
        public string ItemName { get; set; }
        public string ItemProducer { get; set; }
        public System.Guid ItemSubtypeID { get; set; }
        public string ImagePath { get; set; }
        public System.Guid CalcDetailsID { get; set; }
        public string ItemSerialNumber { get; set; }
        public int Number { get; set; }
        public Nullable<int> ItemStatus { get; set; }

        public virtual CalcDetail CalcDetail { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<CallDetail> CallDetails { get; set; }
        public virtual ItemSubtype ItemSubtype { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<OrderDetail> OrderDetails { get; set; }
    }
}

I know that there's a ton of other bugs in this code (at least the picture is not loaded), but first things first - I cannot even make the dialog appear. So many thanks in advance for any suppositions.

Answer 1

The element <p><a href="#myModal2" id="btn2" class="btn btn-success"> <span class="glyphicon glyphicon-eye-open"></span> Открыть</a></p> is duplicated with same id which cause issue. Id should be unique in a page.

You creates same modal with element id id="myModal2" inside loop which cause another issue.

Below is the suggestion and updated code.

Use class name for trigger the click event. I have added a class show-modal to the anchor element and removed the id from it. Also keep the image src @Url.Content(item.ImagePath) as data attribute

<p><a href="#myModal2" class="btn btn-success show-modal" data-imageurl="@Url.Content(item.ImagePath)"> <span class="glyphicon glyphicon-eye-open"></span> Открыть</a></p>

Next, move the modal popup code outside of the loop and while clicking on anchor tag you can set the image src using jquery.

See the updated code.

     @model IEnumerable<WeaponDoc.Models.Item>

        @{
            ViewBag.Title = "Index";
            Layout = "~/Areas/Manager/Views/Shared/_LayoutManager.cshtml";
        }

        <div class="content-wrapper">
            <h2>Объекты</h2>

            <section class="content">
                <table id="itemtable" class="table">
                    <thead>
                        <tr>

                            <th>
                                @Html.DisplayName("Серийный номер")
                            </th>

                            <th>
                                @Html.DisplayName("Изображение")
                            </th>
                        </tr>
                    </thead>

                    @foreach (var item in Model)
                    {
                        <tr>

                            <td>
                                @Html.DisplayFor(modelItem => item.ItemSerialNumber)
                            </td>

                            <td>
                                @Html.ActionLink("Загрузить", "Upload", new { itemID = item.ItemID }, htmlAttributes: new { @class = "btn btn-primary", @role = "button" })
                                @{ if (item.ImagePath != null && item.ImagePath.Length > 0)
                                    {
                                       <p><a href="#myModal2" class="btn btn-success show-modal" data-imageurl="@Url.Content(item.ImagePath)"> <span class="glyphicon glyphicon-eye-open"></span> Открыть</a></p>

                                    }
                                    else
                                    {
                                        Html.Display("Нет изображения");
                                    }
                                }
                            </td>

                        </tr>
                    }

                </table>
       <div id="myModal2" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Заголовок модального окна 2</h4>
                </div>
                <div class="modal-body">
                    <img src="" alt="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                </div>
            </div>
        </div>
    </div>

            </section>

            @section scripts{

                <link href="~/Content/DataTables/datatables.min.css" rel="stylesheet" />
                <script src="~/Content/DataTables/datatables.min.js"></script>
                <script src="~/Content/DataTables/datatables.js"></script>
                <script src="~/Content/DataTables/Buttons-1.5.2/js/dataTables.buttons.min.js"></script>
                <script src="~/Content/DataTables/Buttons-1.5.2/js/buttons.flash.min.js"></script>
                <script src="~/Content/DataTables/JSZip-2.5.0/jszip.min.js"></script>
                <script src="~/Content/DataTables/pdfmake-0.1.36/pdfmake.min.js"></script>
                <script src="~/Content/DataTables/Buttons-1.5.2/js/buttons.html5.min.js"></script>
                <script src="~/Content/DataTables/Buttons-1.5.2/js/buttons.print.min.js"></script>
                <!-- jQuery -->
                <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script>
                <!-- Bootstrap -->
                <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script>


                <script>
                    $(document).ready(function () {

                        $("#itemtable").DataTable(
                            {
                                dom: 'Bfrtip',
                                buttons: [
                                    { extend: 'copy', attr: { id: 'allan' } }, 'csv', 'excel', 'pdf', 'print'
                                ],

                                "language":
                                {
                                    "processing": "Подождите...",
                                    "search": "Поиск:",
                                    "lengthMenu": "Показать _MENU_ записей",
                                    "info": "Записи с _START_ до _END_ из _TOTAL_ записей",
                                    "infoEmpty": "Записи с 0 до 0 из 0 записей",
                                    "infoFiltered": "(отфильтровано из _MAX_ записей)",
                                    "infoPostFix": "",
                                    "loadingRecords": "Загрузка записей...",
                                    "zeroRecords": "Записи отсутствуют.",
                                    "emptyTable": "В таблице отсутствуют данные",
                                    "paginate": {
                                        "first": "Первая",
                                        "previous": "Предыдущая",
                                        "next": "Следующая",
                                        "last": "Последняя"
                                    },
                                    "aria": {
                                        "sortAscending": ": активировать для сортировки столбца по возрастанию",
                                        "sortDescending": ": активировать для сортировки столбца по убыванию"
                                    }
                                }

                            }
                        )


                    })

                </script>

                <script>
    $(function () {
        $(document).find(".show-modal").click(function () {
            var img_url = $(this).data('imageurl');
            $("#myModal2").find('.modal-body').find('img').attr('src', img_url).attr('alt', img_url);
            $("#myModal2").modal('show');
        });
    });
</script>
            }
        </div>

Hope this will help..