[英]Get id in bootstrap modal when button click on same page
I have multiple buttons to invoke a bootstrap model in a page the buttons are generated through foreach loop based on db table rows example if db table has two rows the first row id is 1, and second row id is 2 that's mean tow buttons are generated and I have set specific id to each button and i want when user click on button the bootstrap popup modal will open and display the button id in modal which one the clicked.我有多个按钮来调用页面中的引导模型,这些按钮是通过基于 db 表行示例的 foreach 循环生成的,如果 db 表有两行,第一行 id 为 1,第二行 id 为 2,这意味着生成两个按钮并且我已经为每个按钮设置了特定的 id,我希望当用户点击按钮时,引导弹出模式将打开并以模式显示按钮 id,其中一个被点击。
I want to pas button holded id to modal within the same page我想在同一页面内将按钮持有的 id 传递到模态
You could refer to the following demo你可以参考下面的demo
View code查看代码
@model IEnumerable<MVC2_1Test.Models.City>
@{
ViewData["Title"] = "Index";
}
<h2>Index</h2>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CityName)
</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.CityName)
</td>
<td>
<button data-id="@item.Id" data-toggle="modal" data-target="#myModal" class="ModalClick"> Edit </button>
</td>
</tr>
}
</tbody>
Modal code , <input type="text" name="id" id="id" />
in the modal-body to get the id of button模态代码,在模态体中
<input type="text" name="id" id="id" />
获取按钮的id
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label">Id:</label>
<input type="text" name="id" id="id" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
In jQuery , get the specific id of each button through data-id="@item.Id"
, and set the id to the <input type="text" name="id" id="id"/>
in the modal-body.在jQuery中,通过
data-id="@item.Id"
获取每个按钮的具体id,并将id设置为data-id="@item.Id"
中的<input type="text" name="id" id="id"/>
-身体。
@section Scripts
{
<script type="text/javascript">
$(".btnModal").click(function () {
var passedID = $(this).data('id');//get the id of the selected button
$('input:text').val(passedID);//set the id to the input on the modal
});
</script>
How it works这个怎么运作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.