如何使用bootsrap将数据传递给模态
[英]how to pass data to modal using bootsrap
问题描述
I was trying to figure out how to pass a variable to a model. 
我试图弄清楚如何将变量传递给模型。 For example, I have a table that have lists of student. 例如，我有一个包含学生列表的表。 I want to click one of them and have a modal popup that is matching that student. 我想单击其中一个，并弹出一个与该学生匹配的模式弹出窗口。 So I obviously need to pass some how the id in the table to the model. 因此，显然我需要将表中的id传递给模型。 This is all in Asp.net using razor. 这一切都在Asp.net中使用剃须刀完成。 And then after having that model popup I would like to edit and resubmit which then would refresh the table. 然后在弹出该模型后，我想编辑并重新提交，然后刷新表。 Perhaps even have a success message. 也许甚至有成功的消息。 I am using the bootstrap so I was thinking of using the alert to say Successfully Updated! 我正在使用引导程序，因此我在考虑使用警报说成功更新！ or something. 或者其他的东西。 here is the code. 这是代码。 Please help me to resolve this issue. 请帮助我解决此问题。
<body>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Name</th>
<th>DNIS </th>
<th>Created by</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td> @Html.DisplayFor(modelItem => item.service_name)</td>
<td class="center"> @Html.DisplayFor(modelItem => item.dnis)</td>
<td class="center"> @Html.DisplayFor(modelItem => item.created_by) </td>
<td class="center"> @Html.DisplayFor(modelItem => item.date_time)</td>
<td class="center">
<a class="btn btn-success" href="~/Service/AssignSkillGroup/@item.service_name">
Add/Del SkillGroup
</a>
<a class="btn btn-info" href="~/Service/Edit/@item.service_name">
<i class="icon-edit icon-white"></i>
Edit
</a>
<a class="btn btn-danger" data-toggle="modal" data-id="@item.service_name" data-target="#myModal" >
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/Service/Delete/">
Delete
<a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
</a>
</div>
</div>
</span>
</body>
2 个解决方案
解决方案1
2 2016-03-18 11:46:29
You can use bootstrap dialog event to achieve what you want : 您可以使用引导对话框事件来实现您想要的：
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get id attribute of the clicked element (delete button)
var id = $(e.relatedTarget).data('id');
// do what you want with the id ..
});
解决方案2
1 已采纳 2016-03-18 12:21:44
You can make your modal like the following 您可以像下面这样制作模态
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="Close()" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" id="del" >
Yes
</a>
<a class="btn btn-default" onclick="Close()">
No
</a>
</div>
</div>
</span>
The add the following script and call those methods through your delete button and pass the id to the script function. 添加以下脚本，并通过删除按钮调用这些方法，并将id传递给脚本函数。
<script>
function deleteFunction(id) {
$('#myModal').show();
var a = document.getElementById('del');
a.href = "/Service/Delete/" + id;
}
function Close()
{
$('#myModal').hide();
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.