How to load bootstrap modal content via AJAX in MVC?

Question

I am trying to load the contents of the modal using AJAX. Here is the code snippet what I am trying to do.

Index.cshtml

<button type="submit" class="btn btn-default" onclick="Create()">Create</button>

index.js

function AddTask() {
   $Modal = $('#myModal')
   $.get('/Customer/Create', function (data) {
      $Modal.modal({ show: true });
   });
}

Customer Controller

public ActionResult Create()
{
   return PartialView();
}

Create.cshtml

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>My modal content here…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>

How can I load the Create.cshtml contents in the modal?

Thank you for your input but didn't work. It didn't work as a modal. — Lakhae
– Lakhae, Commented Dec 1, 2015 at 22:53
you have Create() in the onclick event on your button, but the function you want to call is named AddTask - is that a typo in your question, or is that actually your code? — StanK
– StanK, Commented Dec 2, 2015 at 3:26

Robert McKee · Accepted Answer · 2015-12-01 21:26:26Z

1

I believe the following should work for you, although, I'm not sure about the type="submit"

<button type="submit" href="@Url.Action("Create","Customer")"
  class="btn btn-default" data-toggle="modal" data-target="#myModal">Create</button>

or

<button type="submit" data-remote="@Url.Action("Create","Customer")"
  class="btn btn-default" data-toggle="modal" data-target="#myModal">Create</button>

Although, this has been depreciated, so you'll need to do it manually in version 4 (or write your own extension to handle this like it did in 3.x)

I believe you'll also need to remove <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"> and the last </div> from Create.cshtml, as these belong in your parent page (Index.cshtml).

edited Dec 1, 2015 at 21:26

answered Dec 1, 2015 at 21:21

Robert McKee

21.5k1 gold badge48 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

unique · Accepted Answer · 2015-12-02 09:20:52Z

1

You can do like this. Suppose We get partial view for modal content.Instead of get method

function AddTask() {
   $Modal = $('#myModal');
   $Modal.load('/Customer/Create');
   $Modal.modal('show');
}

Note: Here i used bootstrap 2.3.2.I hope you can get idea of this.

answered Dec 2, 2015 at 9:20

unique

5,6026 gold badges25 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to load bootstrap modal content via AJAX in MVC?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related