从网络网格获取模态的特定 ID

Question

我希望在单击网络网格中的按钮时打开一个模型。我创建了一个按钮，它通过 ID 定位模式。对于模型（列表）中的每个项目，我想创建一个带有项目 ID 的模态。下面是我的代码：

<div id="divCurrentRented">
@{
    WebGrid obj = new WebGrid(Model, rowsPerPage: 5);
}

@obj.Table(htmlAttributes: new
{
    id="tableCurrentRented",
    @class = "table"
},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: obj.Columns(
    obj.Column("Title", header: "Title"),
    obj.Column("Author", header: "Author"),
    obj.Column("Avaible", header: "Available", canSort:false),
    obj.Column(header: "Rent", format:@<button type="button" class="btn btn-default" data-toggle="modal" data-target="#@item.BookID">Yes</button>)

            ))

如您所见，按钮的数据目标等于项目的 ID。

我的模态代码如下：

<div class="modal fade" id="@Model.First().BookID" ( role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Return confirmation</h4>
        </div>
        <div class="modal-body">
            <p class="modalBody">Are you sure you want to return this book?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
</div>

正如您在第一行中看到的，我正在获取第一项的 bookID。我需要的是获取列表中每个项目的 ID，以便每次单击按钮都会打开其相应的模式。知道怎么做吗？

Answer 1

要在保持同一页面的同时将信息从页面传递到模态，您可以使用 bootstrap modal event listener show 或 shown 并将数据属性值传递给模态

例如，将 id 和 title 作为模态触发按钮内的数据属性传递给模态。

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>

并使用 event property relatedTarget 获取数据属性值，例如 modal event listener

中的 id

var id = $(e.relatedTarget).data('id');

并将其传递给模态，例如传递给 <div class="modal-body"></div>

$(".modal-body").html(id);

示例 id 和 title 作为数据属性传递给模态

$('#myModal').on('show.bs.modal', function (e) {
    var id = $(e.relatedTarget).data('id');
    var title = $(e.relatedTarget).data('title');
    //pass date-title to modal header
    $(".modal-title").html(title);
    //Pass Id to modal body or any element in modal
    $(".modal-body").html(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="456" data-title="I'm Second Modal Title">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
 <!-- Modal content-->
 <div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" aria-labellbyid="writeLabel"></h4>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer" id="edit-footer">
   <input type="submit" data-dismiss="modal" class="btn btn-success" value="Submit">
  </div>
 </div>
</div>
</div>

Fiddle

从网络网格获取模态的特定 ID

Getting a particular ID from a web-grid for a modal

html

twitter-bootstrap

bootstrap-modal