Есть представление такого вида
<div class="ui three stackable cards">
@foreach (var s in Model.Suppliers)
{
<div class="ui card link">
<div class="content">
<div id ="go" style="display:none" >@s.SupplierID</div>
<h2 class="header">@s.ShortName</h2>
<div class="meta" style="font-size: 0.92857143rem; ">
<span style="color:black">@s.Name</span><br />
<span>ИНН: @s.Inn</span>
</div>
<div style="font-weight:700; font-size: 0.92857143rem; margin-top:1em;">
@foreach (var ph in s.Phones)
{
<i class="phone icon"></i> @ph.PhoneNumber<br />
}
@foreach (var em in s.Emails)
{
<a href="mailto:@em.Contact_Email" target="_top"><i class="mail icon"></i>@em.Contact_Email</a><br />
}
<a href="http://@s.Site" target="_blank"><i class="world icon"></i>@s.Site</a> <br />
</div>
</div>
</div>
}
</div>
Получается вот такое представление
Надо, чтобы по клику на карточке появлялось модальное окно с деталями поставщика.
Для этого мне нужно в контроллер передать Id, поэтому в представлении я создал скрытый div с Id постановщика
<div id ="go" style="display:none" >@s.SupplierID</div>
Затем Get запросом передаю в контроллер Id. Написал вот такую функцию для этих целей.
function get(){
$('.card').click(function () {
$('.navbar-fixed-top').css("z-index", "1");
var id = $("#go", this).text();
var xhr = new XMLHttpRequest();
xhr.open("GET", '/Supplier/Details/'+ id, true)
xhr.send();
});
};
Все отлично работает. Контроллер выглядит так.
[HttpGet]
public ActionResult Details(int id)
{
var supplier = db.Suppliers.Find(id);
if (supplier == null)
{
return HttpNotFound();
}
return PartialView("_Supplier_Details", supplier);
}
Может я не правильно всю схему со скрытыми слоями придумал, может есть и другие простые варианты, буду рад подсказкам.
Но основная проблема в том, как Вы видите выше в контроллере я передаю модель в частичное представление, которое должно быть модальным окном. Как его вызвать я не знаю, у меня тупик. Пока я создал _Supplier_Details
и туда поместил код модального окна. А дальше? Какие мои шаги?
Скорее всего нужно дописать в функцию get после окончания запроса вызов этого модального окна, но как мне на него сослаться оно же в отдельном файле в виде частичного представления.
jQuery
и в обработчикеsuccess
вставьте ответ в ваше модальное окно$('#modal .my-content').html(response)
и вызовите отображение этого окна. – Andrew B 3 сен '16 в 17:43