MVC RenderAction inside dialog

Question

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.

score 0 · Accepted Answer · answered Sep 18 '14 at 06:14

0

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

answered Sep 18 '14 at 06:14

Agaspher

485
3
10

It is closed. Maybe I didn't paste it correctly. :-( Thanks. – jallen Sep 18 '14 at 11:37
Which js library you use to show your modal dialog? May be this library causes a problem? – Agaspher Sep 18 '14 at 11:41
It seems to be bombing when I repopulate the model and then try to render the partial again. – jallen Sep 18 '14 at 11:51
How do you perform rerender action? Are you using ajax or postback? – Agaspher Sep 18 '14 at 11:56
Using ajax form submit. Controller returns the partial view and I use jquery to empty the container and return the new results. – jallen Sep 18 '14 at 11:59
Do you call modal.close action on your modal dialog object? – Agaspher Sep 18 '14 at 12:02
I use modal('hide') after a successful ajax call. Currently working on the edit partial to see if it does the same thing. – jallen Sep 18 '14 at 12:04
For the very beginning try to call modal('hide') before ajax call. If it will work this problem may be caused by DOM inconsistencies after you updated it via Jquery. – Agaspher Sep 18 '14 at 12:11
It closed the modal, but it didn't clear out my results and put the new partial in. I'll keep testing and see if it has something to do with my model. Will keep you posted. Thank you! – jallen Sep 18 '14 at 12:20
What code do you use to update you result? May be it's a good idea to use something like Ajax.BeginForm instead of Html.BeginForm? – Agaspher Sep 18 '14 at 12:24
in this case you'll need to set UpdateTargetId in your AjaxOptions object, and all the content inside container with this id will be updated. – Agaspher Sep 18 '14 at 12:33
Using Ajax, I get this: A public action method 'AddBeneficiaryPartial' was not found on controller 'EG.Core.Controllers.ClientsController'. – jallen Sep 18 '14 at 12:55
Okay, I removed the [HttpGet] and it works, but not putting the target in the right place. Getting closer! – jallen Sep 18 '14 at 13:00
Could you update code in your question to match your new code? – Agaspher Sep 18 '14 at 13:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61493/discussion-between-agaspher-and-jallen). – Agaspher Sep 18 '14 at 13:02
I'm marking this as the answer! I just got it working. – jallen Sep 18 '14 at 13:02

MVC RenderAction inside dialog

1 Answers1