MinaMr Ответов: 0

Как отправить данные из razor в lightbox in ASP.NET ядро 3.1

I'm implementing asp.net core 3.1 project. I need have a grid view in the razor view and I want when the user clicks on a detail link for each row. a lightbox popup with the related data for that row, displays to the user which is still of type grid view. I have searched a lot on the net and I could just find some examples for lightbox that shows image instead of data. I want to use this link I'm implementing asp.net core 3.1 project. I need have a grid view in the razor view and I want when the user clicks on a detail link for each row. a lightbox popup with the related data for that row according to selected applicantID, displays to the user which is still of type grid view. I have searched alot on the net and I could just find some examples for lightbox that shows image instead of data. I want to use this link https://fancyapps.com/fancybox/[^] чтобы реализовать fancybox для отображения вида сетки. Я буду признателен, если кто-нибудь поможет мне найти хороший ресурс для изучения и как я могу отправить значения itemName и requeststatus и связанные с ними заголовки для конкретного applicantID в fancybox из представления razor после нажатия на ссылку Details. Я просто хочу, чтобы эти поля были показаны на лайтбоксе, а не на виде бритвы.

Что я уже пробовал:

@model IEnumerable<CSDDashboard.TempClasses.ApiApplicantDTO>


    <head>
        <link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <link href="~/contents/Index.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="~/css/jquery.fancybox.min.css" type="text/css" media="screen" />

    </head>


<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/jquery.fancybox.min.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/datatables.min.js"></script>



<script>

      jQuery(document).ready(function ($) {

  //      $(document).ready(function() {
		//$(".fancybox").fancybox();
  //      });
        jQuery(".fancybox").fancybox();


    });


    jQuery(document).ready(function ($) {

  //      $(document).ready(function() {
		//$(".fancybox").fancybox();
  //      });
        //jQuery(".fancybox").fancybox();

        $("#myDummyTable").DataTable({

            //"searching": false,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Persian.json"
            }
        });
    });
</script>


<div id="main">


</div>

<div id="tablecontainer" class="my-5 col-sm-12  d-flex justify-content-center">
    <table id="myDummyTable" class="table m-table mytable table-striped mb-4 col-12 dataTable table-bordered px-0 mx-0" style="box-sizing:content-box;">
        <thead>
            <tr id="headerrow">

                <th>
                    Name
                </th>

                <th>
   Requested item count
                </th>
                <th>
                    delivered request
                </th>
                <th>
                    pending request count
                </th>
                <th>
                    registered request count
                </th>
                <th>
                    operations
                </th>
                 <th>
                    itemName
                </th>
                 <th>
                    requestStatus
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
            <tr>

                <td>
                    @Html.DisplayFor(modelItem => item.applicantName)
                </td>


                <td>
                    @Html.DisplayFor(modelItem => item.requestedApiCount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.deliveredApiCount)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.pendingApiCount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.inProcessApiCount)
                </td>
                
                <td>
                    @Html.DisplayFor(modelItem => item.itemName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.requestStatus)
                </td>

                <td>
                    <a asp-action="Edit" asp-route-id="@item.applicantID">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.applicantID">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.applicantID">Delete</a>
                </td>
            </tr>
            }
        </tbody>
    </table>
</div>

<style>
    #myfooter {
        padding-top: 2em;
    }
     .table {
      position: relative;
      top:20px;
 

}
    #tablecontainer {
        clear: both;
        position: relative;
        top: 20px;
        display: block;
    }

    .a-ijaad:hover {
            text-decoration: none;
            color: white;
        }

        .a-ijaad{
            font-size:0.8rem;
        }

</style>

0 Ответов