Question

我正在尝试使用AJAX加载模态的内容。这是我想要做的代码片段。

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 });
   });
}

客户控制器

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>

如何在模态中加载Create.cshtml内容？

Answer 1

你可以这样做。假设我们得到了模态内容的局部视图。而不是get方法

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

注意：这里我使用了bootstrap 2.3.2。我希望你能理解这一点。

Answer 2

我相信以下内容对您有用，但我不确定type="submit"

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

或

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

虽然这已被折旧，但您需要在版本4中手动执行此操作（或编写您自己的扩展来处理此操作，就像在3.x中一样）

我相信您还需要从Create.cshtml中删除<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">和最后一个</div>，因为它们属于您的父页面（Index.cshtml）。

如何在MVC中通过AJAX加载bootstrap模态内容？

2 个答案: