我在視圖中創(chuàng)建了一個 Datatables 表，其中包含觸發(fā)模式對話框的按鈕。按鈕僅在滿足某些條件時出現(xiàn)（正是當圖像路徑不為空時），并且條件語句在視圖內(nèi)。模態(tài)對話框由按鈕觸發(fā)，但只有一個按鈕 - 它不會由任何其他有條件出現(xiàn)的按鈕觸發(fā)，盡管它們由 foreach 語句定位。為什么對話框不是由不同的按鈕觸發(fā)的，我該如何解決？這是視圖的代碼（未顯示一些不相關(guān)的列）：@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>
1 回答
ibeautiful
TA貢獻1993條經(jīng)驗 獲得超6個贊
該元素與導致問題<p><a href="#myModal2" id="btn2" class="btn btn-success"> <span class="glyphicon glyphicon-eye-open"></span> Открыть</a></p>的相同元素重復。idID在一個頁面中應(yīng)該是唯一的。
您在循環(huán)內(nèi)使用元素 id 創(chuàng)建了相同的模態(tài)，id="myModal2"這會導致另一個問題。
以下是建議和更新的代碼。
使用class名稱觸發(fā)click事件。我已經(jīng)向show-modal錨元素添加了一個類并從中刪除了id。同時將圖像 src 保留@Url.Content(item.ImagePath)為數(shù)據(jù)屬性
<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>
接下來，將模式彈出代碼移到循環(huán)之外，同時單擊錨標記，您可以src使用 jquery 設(shè)置圖像。
請參閱更新的代碼。
@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>
希望這會有所幫助..
- 1 回答
- 0 關(guān)注
- 91 瀏覽
添加回答
舉報
0/150
提交
取消