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">×</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.
Looks like you didn't close your div at the end of 'AddBeneficiaryPartial' view