Я думаю, что ваша концепция полностью неверна.Я предполагаю, что вы хотите отобразить детали заказа в модальном режиме?И так как у вас уже есть метод, позволяющий вернуть частичное представление для этого, вы хотите загружать содержимое деталей заказа в модальное положение всякий раз, когда пользователь щелкает по столбцу гиперссылки?
Если это так, то модем начальной загрузки не подходитинструмент для вас.Он предназначен для загрузки статического контента.Если вы хотите загрузить динамический контент, то есть детали заказа для разных номеров заказа, вам следует обратиться к концепции под названием iframe и таким библиотекам, как Fancybox и т. Д.
Вот что я хотел бы сделать:
1. Определить модальное расположение
Поскольку вы хотите отобразить частичное представление на модальном, вы обычно не хотите иметь такие вещи, как боковая панель, верхнавигация и т. д. из макета вашего сайта.Поэтому я определю макет для модалов.
<!-- _PopupLayout.cshtml -->
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<!-- All your necessary styles, meta data, etc -->
<title>...</title>
@RenderSection("css", required: false)
</head>
<body>
<main class="container-fluid">
@RenderBody()
</main>
<!-- All your necessary javascripts -->
@RenderSection("scripts", required: false)
</body>
</html>
2. Возвратные представления, использующие _PopupLayout
Я знаю, что вы создали частичные представления.Но обычный вид это нормально.На самом деле, это лучше, потому что вы можете настроить макет, который используется обычным представлением, а также модели представления для этого.
Поскольку вы хотите, чтобы это представление выглядело как модальный загрузчик, вы должны сконструировать свое представление с помощью начальной загрузкимодальная структура.
@model ...
@{
ViewData["Title"] = "Order Details";
Layout = "~/Views/Shared/_PopupLayout.cshtml";
}
<div class="modal-header">
<h5 class="modal-title">Order Details</h5>
</div>
<div class="modal-body">
...
</div>
3.Написать JavaScript для запуска FancyBox при нажатии ссылки
Вы можете использовать собственный класс css для селектора для всех ссылок, из которых вы хотите загрузить iframe.В моем случае я называю это .popup-fancy.Вы также можете определить несколько классов для отображения разных размеров модальных / модных коробок.
$(function() {
$().fancybox({
selector: 'a.popup-fancy',
defaultType: 'iframe',
baseClass: 'fancybox-md',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-lg',
defaultType: 'iframe',
baseClass: 'fancybox-lg',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
$().fancybox({
selector: 'a.popup-fancy-xl',
defaultType: 'iframe',
baseClass: 'fancybox-xl',
iframe: {
preload: false
},
arrows: false,
infobar: false,
smallBtn: true
});
});
Посмотрите, как он устанавливает тип по умолчанию iframe ?Вы можете найти эти параметры конфигурации в документации Fancybox.Чтобы не забыть эти 3 стиля базовых классов (я использую Sass):
.fancybox-md {
.fancybox-content {
max-width: 36.75rem;
}
}
.fancybox-lg {
.fancybox-content {
max-width: 65.625rem;
}
}
.fancybox-xl {
.fancybox-content {
max-width: 78.75rem;
}
}
4.Создать ссылки для открытия модальных
Теперь вы можете создавать ссылки с любым из этих классов триггеров fancybox.:
<a href="@Url.Action("details", "order", new { area = "", id = item.Id })"
class="popup-fancy">
See Order Details
</a>
Я предполагаю, что у вас есть все настроенные контроллер действия и метод действия детализации, чтобы вернуть представление, которое использует _PopupLayout, затем, когда пользователь нажимает на ссылку, вместо обычного перенаправления на страницу с помощьюстандартный макет, содержимое страницы должно быть загружено в модальный fancybox.
Например:
Если вы можете использовать только начальную загрузкумодальный ??
В этом случае вам придется создать модальный шаблон (возможно, в макете, чтобы его можно было вызывать где угодно) с iframe внутри.И затем по ссылке, которую вы нажали, вы используете javascript, чтобы установить источник iframe и вручную открыть модал.
Образец модального шаблона
<div id="fancy-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="" frameborder="0"></iframe>
</div>
</div>
</div>
Затем на странице, где вы генерируете ссылки,вместо того, чтобы генерировать реальные ссылки, вы должны будете сгенерировать модальные триггеры:
<a href="#" class="fancy-modal-trigger"
data-iframe-src="@Url.Action("details", "order", new { area = "", id = item.Id })">
See Order Details
</a>
Смотрите здесь, вы ставите фактическую ссылку на ваше представление на data-attribute вместо href, потому что вы не делаетехотите, чтобы ссылка действительно перемещалась к месту назначения.
$(function() {
$('a.fancy-modal-trigger').click(function() {
let iframeSrc = $(this).data('iframe-src'),
$fancyModal = $('#fancy-modal');
$fancyModal.find('iframe').prop('src', iframeSrc);
$fancyModal.modal('show');
return false;
});
});
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: это еще не проверено.