javascript - Load a partial view inside a modal bootstrap 4 MVC

Question

i tried many different ways to load my partial view inside of a modal but its not working.

Main view:

        <tbody>
            @* Essas infos vir?o de outro lugar com essa mesma formata??o. *@

            @{var grupo = Model.GroupBy(x => x.logl_Company).Select(s => s.FirstOrDefault()).OrderByDescending(item => item.logl_AccessdDate).ToList();}

            @foreach (var item in grupo)
            {
                <tr>
                    <td>
                        <a class="btn btn-primary" asp-action="CompanyDetails" asp-route-company_details="@item.logl_Company" data-target="#EmpresaModal" data-toggle="modal">teste</a>
                    </td>
                </tr>
            }
        </tbody>


    <div class="modal fade" id="EmpresaModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function () {
            $('#EmpresaModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget); // Button that triggered the modal
                var url = button.attr("href");
                var modal = $(this);
                modal.find('.modal-content').load(url);

            });
            $('#EmpresaModal').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
                $('#EmpresaModal .modal-content').empty();
            });
        });

    </script>

Partial view:

<div class="modal-header">
        <h5 class="modal-title">Histórico da empresa: @ViewBag.company_details </h5>
    </div>
    <div class="modal-body">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Empresa</th>
                    <th scope="col">Nome de usuário</th>
                    <th scope="col">Login(e-mail)</th>
                    <th scope="col">último acesso</th>
                </tr>
            </thead>
            <tbody>
                @{ var company = ViewBag.company_details;
                    var companys = Model.Where(s => s.logl_Company == company).ToList();
                }
                @foreach (var item in companys)
                {
                    <tr>
                        <td>@Html.DisplayFor(modelItem => item.logl_Company)</td>
                        <td>@Html.DisplayFor(modelItem => item.logl_Name)</td>
                        <td>@Html.DisplayFor(modelItem => item.logl_Login)</td>
                        <td>@Html.DisplayFor(modelItem => item.logl_AccessdDate)</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>

I'm trying to load my partial view inside of my modal with the js script on main page but i dont know why its not working..

When i run my project and enter in the developer console in my firefox i got this message : modal.find(...).load is not a function

My controller :

        public IActionResult Index()
        {
            return View(_context.lcr_LogLastAccess.ToList());
        }

        public IActionResult CompanyDetails(string company_details)
        {
            if (company_details == null)
            {
                //intru??o de erro

                return PartialView("PAGINA ERRO");
            }
            else
            {
                ViewBag.company_details = company_details;

                return PartialView(_context.lcr_LogLastAccess.ToList());
            }
        }

EDIT: solution

Main View :

//Button
<a class="empresa-texto-modal" data-company_details="@item.logl_Company">@Html.DisplayFor(modelItem => item.logl_Company)</a>

//Modal
    <div class="modal fade" id="EmpresaModal" tabindex="-1">
        @* CONTEUDO DA MODAL DEVE SER CARREGADO AQUI *@
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

            </div>
        </div>
    </div>

Partial View:

<div class="modal-header">
                <h5 class="modal-title">Histórico da empresa: @ViewBag.company_details </h5>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Empresa</th>
                            <th scope="col">Nome de usuário</th>
                            <th scope="col">Login(e-mail)</th>
                            <th scope="col">último acesso</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{  var company = ViewBag.company_details;
                            var companys = Model.Where(s => s.logl_Company == company).ToList();
                        }
                        @foreach (var item in companys)
                        {
                            <tr>
                                <td>@Html.DisplayFor(modelItem => item.logl_Company)</td>
                                <td>@Html.DisplayFor(modelItem => item.logl_Name)</td>
                                <td>@Html.DisplayFor(modelItem => item.logl_Login)</td>
                                <td>@Html.DisplayFor(modelItem => item.logl_AccessdDate)</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-fechar-modal-empresa" data-dismiss="modal">Fechar</button>
            </div>

SCRIPT ON MAIN VIEW**

@section scripts {
        <script>
            $(document).ready(function () {
                $(".empresa-texto-modal").click(function () {
                    var id = $(this).data("company_details");
                    $(".modal-content").load("/Acesso/CompanyDetails?company_details=" + id, function () {
                        $("#EmpresaModal").modal("show");
                    });
                });

            });
        </script>
    }

Controller was not modified. OBS : Use the full jquery version

Main index :

Main

When click the "Empresa" text :

Modal

question from:https://stackoverflow.com/questions/65617634/load-a-partial-view-inside-a-modal-bootstrap-4-mvc

Answer 1

Waitting for answers