asp.net-mvcpartial-viewsrenderaction

MVC RenderAction inside dialog


I am hoping someone can assist me. I have a RenderAction inside a dialog so that I can dynamically populate some dropdowns with updated data. Currently, the dialog box won't close after saving when trying to re-render the action.

Here is my partial view that contains the dialog:

<div id="beneficiary-add" tabindex="-1" role="dialog" aria-labelledby="modal-responsive-label" aria-hidden="true" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header modal-header-primary">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close">&times;</button>
                <h4 id="modal-responsive-label" class="modal-title">Add Beneficiary</h4>
            </div>
            @using (Html.BeginForm("AddBeneficiary", "Clients", FormMethod.Post, new { id = "form-add-beneficiary" }))
            {
                @Html.HiddenFor(x => x.ClientId)
                Html.RenderAction("AddBeneficiaryPartial", "Clients", new { id = Model.ClientId });
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            }
        </div>
    </div>
</div>

And the partial that contains the dialog that is being returned by the controller:

<div class="table-responsive">
<table id="table-beneficiaries" style="border-bottom:1px solid #ddd" class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>ZIP Code</th>
        <th>Relationship</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.ClientBeneficiaries)
        {
    <tr>
        <td>@item.ClientBeneficiary.LastName</td>
        <td>@item.ClientBeneficiary.FirstName</td>
        <td>@item.ClientBeneficiary.Address</td>
        <td>@item.ClientBeneficiary.City</td>
        <td>@item.ClientBeneficiary.State</td>
        <td>@item.ClientBeneficiary.ZipCode</td>
        <td>@item.Relationship</td>
        <td><a class="edit-beneficiary" data-id="@item.ClientBeneficiary.Id" style="cursor: pointer;">Edit</a></td>
        <td><a class="delete-beneficiary" data-id="@item.ClientBeneficiary.Id" style="cursor: pointer;">Delete</a></td>
    </tr>
        }
    </tbody>
</table>
<button type="button" data-target="#beneficiary-add" data-toggle="modal" class="btn btn-primary">Add Beneficiary</button>
@Html.Partial("_BeneficiaryAdd", new EG.Core.ViewModels.BeneficiaryViewModel() { ClientId = Model.Client.Id })
<div id="beneficiary-edit-container"></div>

Not sure what I'm missing here.


Solution

  • Looks like you didn't close your div at the end of 'AddBeneficiaryPartial' view