There is a view of this kind

<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>

It turns out such a representation

enter image description here

It is necessary that by clicking on the card a modal window appears with the details of the supplier.

To do this, I need to pass an Id to the controller, so in the view I created a hidden div with the Id of the producer

 <div id ="go" style="display:none" >@s.SupplierID</div>

Then I get the request by passing to the controller Id. I wrote this function for this purpose.

 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(); }); };

Everything works fine. The controller looks like this.

  [HttpGet] public ActionResult Details(int id) { var supplier = db.Suppliers.Find(id); if (supplier == null) { return HttpNotFound(); } return PartialView("_Supplier_Details", supplier); }

Maybe I didn’t correctly come up with the whole scheme with hidden layers, maybe there are other simple options, I will be glad to help.

But the main problem is how you see above in the controller I transfer the model to a partial view, which should be a modal window. How to call him I do not know, I have a dead end. While I created _Supplier_Details and put the modal window code there. So what is next? What are my steps?

Most likely, it is necessary to add a call to this modal window to the get function after the end of the request, but how can I refer to it in the separate file as a partial view.

  • No semantic ui - shatoidil
  • one
    Looks like you are missing the response from the server. Make ajax request using jQuery and in the success handler insert the answer into your modal window $('#modal .my-content').html(response) and call the display of this window. - Andrew B

1 answer 1

There is another such method. In the supplier page you need to add the following code:

 <!-- Для модального окна --> <div id='myModal' class='modal fade in'> <div class="modal-dialog"> <div class="modal-content"> <div id='myModalContent'></div> </div> </div> </div> @section Scripts { @Scripts.Render("~/scripts/appjs/modal.js") }

Modal.js file:

 $(function () { $.ajaxSetup({ cache: false }); $(document).on("click", "a[data-modal]", function (e) { $('#myModalContent').load(this.href, function () { $('#myModal').modal({ keyboard: true }, 'show'); bindForm(this); }); return false; }); }); function bindForm(dialog) { $('form', dialog).submit(function () { $('#progress').show(); $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (result) { if (result.success) { $('#myModal').modal('hide'); $('#progress').hide(); //location.reload(); } else { $('#myModalContent').html(result); bindForm(this); } } }); return false; }); }

View details:

 <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title">Подробности</h3> </div> <div class="modal-body"> <!-- Содержимое модального окна --> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal"> <span class="glyphicon glyphicon-remove"></span> Закрыть </button> </div>

In my example, a modal window opens when clicking on a link:

 <a data-modal='' href='/Album/Details/" + item.AlbumID + "' id='" + item.AlbumID + "' title='Подробности'> <span class='glyphicon glyphicon-eye-open'> </span> </a>

You will remake modal.js to fit your needs :) I hope that I have not forgotten anything)