如何在 MVC 中通过 AJAX 加载引导模式内容？答案

【问题标题】：How to load bootstrap modal content via AJAX in MVC?如何在 MVC 中通过 AJAX 加载引导模式内容？
【发布时间】：2016-03-05 22:20:59
【问题描述】：

我正在尝试使用 AJAX 加载模式的内容。这是我正在尝试做的代码 sn-p。

索引.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();
}

创建.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 内容？

【问题讨论】：

感谢您的意见，但没有奏效。它不能用作模态。
您在按钮上的 onclick 事件中有 Create()，但您要调用的函数名为 AddTask - 这是您的问题中的错字，还是实际上是您的代码?

标签： jquery ajax twitter-bootstrap-3 asp.net-mvc-5

【解决方案1】：

我相信以下内容应该适合您，但我不确定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)。

【讨论】：

【解决方案2】：

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

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

注意：这里我使用的是 bootstrap 2.3.2。希望你能明白这一点。

【讨论】：