javascript - 如何使用名为 data 的 ajax 加载 Bootstrap 模式

Question

我的 Razor 语法是

 @foreach(var item in Model) 
 {
                      <td>@item.email</td>
                      <td><a href ="javascript:void(0);"onclick="Getinfo(this)"  data-assigned-id="@item.email" ></a>@item.lastaccessdate</td>

 }

这是我用来从 Controller 获取数据，然后将该数据绑定(bind)为选项卡中的表格的 JavaScript

  function Getinfo(elem)
{
    var email = $(elem).data('assigned-id');
    $.get('/Home/GetDetails', { email: email }, function (data) { grid(data); });

}
function grid(abc)
{
    var tab = "<table class='table'>";
    tab += "<thead>";
    tab += "<tr>";
    tab += "<th>Name</th>";
    tab += "<th>Login</th>";
    tab += "<th>Username</th>";
    tab += "</tr>";
    tab += "</thead>";
    tab += "<tbody>";
    for (var it in abc)
    {
        tab += "<tr>";
        tab += "<td>" + abc[it].Name + "</td>";
        tab += "<td>" + abc[it].login + "</td>";
        tab += "<td>" + abc[it].username + "</td>";
        tab += "</tr>";
    }
    tab += "</tbody>";
    tab += "</table>";
}

现在我如何将“选项卡”中的数据绑定(bind)到 Twitter Bootstrap 模式弹出窗口？ 提前致谢。

Answer 1

我通常有一个隐藏模式。当我获取数据时，我会用从服务器接收到的 html 影响正文。

<div class="modal fade" id="alertModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content modal-xl">
        <div class="modal-header" style="text-align: center">
            <h1>Something something Dark Side</h1>
        </div>
        <div class="modal-body modal-scroll" id="alertModalBody"></div>
        <div class="modal-footer"></div>
    </div>
  </div>
</div>

对于您的情况，类似于:

function grid(abc)
{
  var tab = "<table class='table'>";
  // ... More string appends

  $('alertModalBody').html(tab);
  $("#alertModal").modal('show');
}