在Bootstrap模式中渲染asp.net部分

Question

I need to display a partial (view component) in a bootbox control. This partial receive some parameters from my current view and build a form to be submitted.

Until MVC 5 I did that rendering my partial to a string and send it back to view.

In MVC 6 I can't get this to work.

What is the correct way to do this?

Answer 1

After some research, I find out a way to do this, very easily. Just use the jquery's "load" function. The example bellow is using default WebApplication created by VisualStudio.

Main view code (Views/Home/About.cshtml):

<button class="btn btn-default details" >Click me</button>

<div class="modal" id="modal"></div>

@section scripts{
    <script>
        $(function () {
            $(".details").click(function () {
                $("#modal").load("Contact", function () {
                    $("#modal").modal();
                })
            });
        })
    </script>
}

Modal view code (Views/Home/Contact.cshtml):

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            <address>
                One Microsoft Way<br />
                Redmond, WA 98052-6399<br />
                <abbr title="Phone">P:</abbr>
                425.555.0100
            </address>

            <address>
                <strong>Support:</strong> <a href="mailto:Support@example.com">Support@example.com</a><br />
                <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
            </address>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->