Load a partial view into the modal bootstrap

Asked

Viewed 69 times

0

Following , I’m trying to load my partial view into the modal but I’m not getting it. I’ve tried several ways, including with the @Html.Parcial , However, if you do so, the string company_details takes null value and does not work. So what I’m trying to do is : load the partial view into the modal via javascript with the load function, but it’s not working.. I appreciate any help..

In firefox developer console gives me the following error : Uncaught TypeError: modal.find(...).load is not a function

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>

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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.