Я создаю таблицу Datatables внутри представления с помощью кнопок, которые запускают модальное диалоговое окно. Кнопки появляются только тогда, когда выполняется какое-то условие (в точности, когда путь к изображению не нулевой), и условный оператор находится внутри представления. Модальное диалоговое окно запускается кнопкой, но только одной кнопкой - оно не запускается никакими другими условно отображаемыми кнопками, хотя они позиционируются оператором foreach.
Почему диалог не запускается разными кнопками и как я могу это исправить?
Это код представления (некоторые нерелевантные столбцы не показаны):
@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>
Вот код действия:
public ActionResult Index()
{
var items = db.Items.Include(i => i.ItemSubtype);
return View(items.ToList());
А сама модель:
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; }
}
}
Я знаю, что в этом коде есть масса других ошибок (по крайней мере, изображение не загружено), но обо всем по порядку - я даже не могу заставить диалоговое окно появиться. Огромное спасибо заранее за любые предположения.