Return View as a Modal

Question

I am trying to return a modal from my controller post action of a previous modal. The issue I am having is that the partial view is not rendered as a modal. All the documentation I can find refers to opening a modal from a button, however my modal is conditional so I want the controller to handle whether or not to load the modal / which modal to load

Part of partial view where I return the view containing the modal

return PartialView("_AccountUpdateSuccess");

My View

<div class="modal fade" tabindex="-1" role="dialog" id="updateSuccess">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Success!</h4>
            </div>
            <div class="modal-body">
                <p class="text-success">@ViewBag.Account has been updated successfully!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script type="text/javascript">
    $(document)
        .ready(function() {
            $("#updateSuccess").modal('show');
        });
</script>

*The issue I am having is that the partial view is not rendered as a modal* ....How is it rendered? — Hackerman, Aug 30 '16 at 13:15
It looks like a modal sort of but there is no pop-up. Just a white screen with the text/forms but not properly formatted — Eitan K, Aug 30 '16 at 13:19
I think this post helpful to you : http://stackoverflow.com/questions/11231862/using-bootstrap-modal-window-as-partialview — Vijay Maheriya, Aug 30 '16 at 13:24
How are you handling the controller response on the client side? — Javier, Aug 30 '16 at 13:37
I have a little script tag in my view to render the modal. This seems to work when returning a view but not when returning a partial `` — Eitan K, Aug 30 '16 at 13:47

score 1 · Answer 1 · answered Aug 30 '16 at 13:49

1

You would have to add the javascript into the parent view, as a call back from your ajax function and not in the partial view. The reason for this is that script tags added by an ajax call are not automatically run.

answered Aug 30 '16 at 13:49

Milney

6,253
2
19
33

How would I trigger the show from the parent without using a click event? – Eitan K Aug 30 '16 at 17:30
You can still use a click even, you must simply bind it one level higher, using something like $("body").on(".selector", "click", function() { – Milney Aug 30 '16 at 17:57
I wouldnt actually use body, but the closest element already on the page. Read up on the on function: http://api.jquery.com/on/ – Milney Aug 30 '16 at 17:57
I do not want to do it off of a click event. I want to do it off of a successful submit. So my submit will hit the controller. The controller will check some values and if successful load a success modal, otherwise reload the current modal with the validation messages – Eitan K Aug 30 '16 at 18:00
In that case refer to Javiers answer which shows you an ajax call. One of the parameters is called success and this is a function which is called after the submit. This is what i meant initially when I said a 'call back' as after the submit happens it 'calls back' this function that you have provided – Milney Aug 30 '16 at 18:24

score 1 · Answer 2 · answered Aug 30 '16 at 14:05

The way I do it is to insert the response in an empty div where you can put it, for example, at the bottom of the shared layout. I use this method while returning PartialView without any issues.

Then I use this script to load a modal:

$.ajax({
    type: "POST",
    url: "/Controller/ActionWhichReturnsAPartialView",
    success: function (data) {
        $(".modal-backdrop").remove(); // I have to do this hack just in case of a modal calling another modal and to avoid some display issues with the overlayed background
        $("#temp").html(data); // #temp is the empty div
        $("#myModal").modal("show"); // myModal is the root div id of the html result
    }

This will work provided the ajax call is in the parent page and NOT the partial, which seems to be the OPs problem — Milney, Aug 30 '16 at 14:06

Return View as a Modal

2 Answers2