How to send data from razor to lightbox in ASP.NET core 3.1

Question

0.00/5 (No votes)

See more:

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/[^] to implement fancybox to show grid view. I appreciate if anyone helps me to find a good resource to learn from and How can I send itemName and requeststatus values and their related headers for the specific applicantID to fancybox from the razor view after clicking a Details link. I just want those fields to be shown on the lightbox not on the razor view.

What I have tried:

Razor

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

Posted 9-Aug-20 7:35am

MinaMr

Updated 9-Aug-20 23:33pm

Richard Deeming

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)