How do I Watch full details for each table row with ASP.NET Core and Html Modal

Question

I'm working on a project with ASP.NET Core and I have this My Profile page.

So when the details button is clicked I want to show full details for that reservation, let's say I'm gonna send an ViewModel to this view with all datas(all reservations with full details), now the way I wanna show the full details is with Modal.

Like this. How can I achieve this with asp.net core?

That's a common use case and there are a lot of blog post and SO questions about general approaches. How do you plan to implement it and where do you have questions? — Christoph Lütjen, Dec 22 '20 at 14:45
you can use a separate page to show Full details and open that page as a modal popup onclick of a hyperlink from the grid using jQuery or onclick event and pass querystring to new page. - https://www.c-sharpcorner.com/UploadFile/cd7c2e/open-a-new-web-form-in-the-model-popup-of-Asp-Net-applicatio/ — Laxmikant, Dec 22 '20 at 14:53
@ChristophLütjen I'm trying to do it with mvc and without api if I can,so I'm gonna send a model to this view the list of reservations, each reservation will have an rental, return object and the other part is confusing me, I don't really know what to do next cause I never tried js before. What I have to do is filter reservations with an reservation ID and based from ID I will populate the modal. — G3n1t0, Dec 22 '20 at 18:00
@G3n1t0, not iframe, you can have a webform.aspx that will be shown as modal popup — Laxmikant, Dec 26 '20 at 08:58

score 1 · Answer 1 · answered Dec 22 '20 at 19:47

I'll write this as an answer, because it's too much text for a comment.

You want to show just a single item as a popup. To do so, you have multiple general approaches:

Render everything server side and hide what you don't need

In the end, each popup is just HTML. Typically a <div> element. So one option is, to render all popups in your razor view and simply hide them all with CSS. Now you can add a css class to make one of them visible.

MyView.cshtml

@foreach(var reservation in Model.Reservations)
{
    <div click="document.getElementById('@reservation.id').style.display='block';">
       reservation list item
    </div>
    <div id="@reservation.id" style="display:none">reservation details</div>
}

You would encapsulate parts in js functions and reservation.id might not be the right property for an HTML id attribute, but I guess you've got the idea.

Render only list and fetch HTML fragments

Here you render the list only, then you use javascript to load an HTML fragment from the server.

  MyController.cs
  
  getReservationDetails(Guid reservationId) {
     var reservation = load(reservationId);
     // popup html only, no layout, no body tag, ...
     return View(reservation);
  }

In your list, you'll need a js function that passes the reservationId as URL parameter and shows thre response (the reservation details) in your popup. Pls see below for some common JS frameworks that provide modals.

Pass reservations as data to javascript and render client side

Here you pass all your reservations to javascript as data. Then you can create the popup in JavaScript

   <script>
      const reservations = [{ ... reservation as json }, { ... }];
      
      function showReservation(index) {
         // render and show in JS
      }
   </script>

See How to get JSON object from Razor Model object in javascript. Example lib to render HTML with javascript: https://github.com/janl/mustache.js/

Fetch details as data

Here you create

An action that returns reservation details for single reservation. It accepts an URL parameter reservationId and returns the details as JSON.
JavaScript function that accepts reservation id, loads data from server and renders the data as popup

See e.g. How to return a Json from a .Net Core Web API?

Links

Modals

Misc

https://thoughtbot.com/blog/rendering-views-in-javascript

This is just a starting point. You could think about which option is right for you, try it and then continue in a new SO post, if you have problems with the details.