CODEWITHSUNDEEP
jqueryasp.net-core-mvcbootstrap-modal
Kacey Ezerioha
Kacey Ezerioha

Reputation: 1218

Edit Bootstrap Modal Popup not Loading Partial View

I have a details view of a Model TModel that displays the details of a record as Read only and has a button that should load the edit view (modal). So I have the modal container in _layout.cshtml and my partial view created in the shared folder but when the button from the details view is clicked it only shows the modal without the form from the partialview.

Modal in Layout

<div class="modal fade" id="EditCompanyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
                <div class="p-5 BigShadow">
                    <h5 class="font-weight-bold">
                        Edit Company Account
                        <span class="pull-right"><i class="fa fa-user-circle-o text-tomato"></i></span>
                    </h5>
                    <span class="small">Please ensure that information provided is valid</span>
                    <hr style="border-top: 1px dashed #EEE" />

                    @*@await Html.PartialAsync("CompanyModalPartial")*@
                    <div class="modal-content">

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

Javascript in Layout

$('#EditCompanyModal').on('hidden.bs.modal', function (e) {
    $('#EditCompanyModal modal-content').load('@Url.Action("ModalDetails", "Company")')
});

Action in Company Controller

public IActionResult ModalDetails()
{
    return PartialView("CompanyModalPartial");
}

Partial View

@model TModel
<form asp-action="Save">
    //form
</form>

Note that the partial view has the same model as the Details View. So with the above appraoch, when I click the edit button, the modal displays but there's no form. How can I get this to work?

Upvotes: 0

Views: 1724

Answers (1)

itminus
itminus

Reputation: 25380

there're two bugs in your jQuery codes :

$('#EditCompanyModal').on('hidden.bs.modal', function (e) {
    $('#EditCompanyModal modal-content').load('@Url.Action("ModalDetails", "Company")')
});
  1. the $('#EditCompanyModal modal-content') is not a valid selector , there's no <modal-content> html tag at all.
  2. the 'hidden.bs.modal' event will not be fired before show .

to show the modal with the partial view , change your code as below :

$('#EditCompanyModal').on('show.bs.modal', function (e) {
    $('#EditCompanyModal .modal-content').load('@Url.Action("ModalDetails", "Company")')
});
$('#EditCompanyModal').on('hidden.bs.modal', function (e) {
    $('#EditCompanyModal .modal-content').html("");
});

It will works as expected .

Upvotes: 1

Related Questions