Ajax modal not displaying correctly

[kirbinator2016]

Please forgive me because this is the first time I've used TwitterBootstrapMVC. I am using Dimitry's recommended approach listed here for loading up a modal form:

http://stackoverflow.com/questions/16011151/mvc-4-edit-modal-form-using-bootstrap/19039695#19039695?newreg=8f7857ae5e92417fa88be962d169e67d

When I run this sample, I do get a modal that I can dismiss, but the modal is nearly as wide as the browser window and has a transparent background. When I run some of the samples of opening a modal (not using AJAX), everything appears to work great. But opening the modal using the helper method, things just don't look right at all.

Any suggestions?

[DmitryEfimenko]

Could you please show the issue in a sample project?

[kirbinator2016]

Thank you very much for responding so quickly. I have attached an MVC5 very basic web application. It basically mimics what you posted in stackoverflow. On the Index page I have a grid that uses AJAX for opening the modal. I also included a simple button demonstrating opening a modal in a non-AJAX manner. Both are examples that you are familiar with because you wrote the code.

You should see pretty quickly what I'm talking about in the AJAX version.

[kirbinator2016]

Hi Dmitry, I think I know what the issue is. I determined that the PartialView "GetPersonInfo" needs to be wrapped with 2 DIV's (one with a class of "modal-dialog" and one with a class of "modal-content"). So now the question is, what is the appropriate syntax that I should use in the partial class?

@{
    // get modal helper
    var modal = Html.Bootstrap().Misc().GetBuilderFor(new Modal());
}

<div class="modal-dialog ">
    <div class="modal-content">
        @modal.Header("Edit Person")
        @using (var f = Html.Bootstrap().Begin(new Form()))
        {
            using (modal.BeginBody())
            {
                @Html.HiddenFor(x => x.Id)
                @f.FormGroup().TextBoxFor(x => x.Name)
                @f.FormGroup().TextBoxFor(x => x.Age)
            }
            using (modal.BeginFooter())
            {
                // if needed, add here @Html.Bootstrap().ValidationSummary()
                @:@Html.Bootstrap().Button().Text("Save").Id("btn-person-submit")
                @Html.Bootstrap().Button().Text("Close").Data(new { dismiss = "modal" })
            }
        }
    </div>
</div>

[DmitryEfimenko]

Thanks for the sample app. I quickly found the issue and updated answer on StackOverflow. There are two changes: In GetPersonInfo ActionResult change:

return View("GetPersonInfo", model);

to:

return PartialView("GetPersonInfo", model);

Second, in the index.html change success function of the ajax call to /Person/GetPersonInfo to this:

var m = $('#modal-person');
m.find('.modal-content').html(data);
m.modal('show');

This should be it. Let me know if you still have issues.