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获取id内的数据属性值，例如modal event listener

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

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

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

将id和title作为传递给模态

的数据属性的示例

＆＃13;

$('#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);
});

＆＃13;

<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>

＆＃13;

Fiddle

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

1 个答案: