[英]ASP.NET MVC Using Modal popup with button onclick inside a jQuery datatable
目前我正在做一个页面,其中包含一个包含一些数据的表格。 但是,我想放置一个引导模式来在弹出窗口的正文中显示消息内容。 但我不知道如何处理该按钮,因为当我点击表格内的每个按钮时,它会向我显示相同的消息内容,但它不应该。 每一行,我的意思是他们中的大多数不应该有相同的消息内容。
@model Savoye.BridgeServices.Models.MessageModel
@{
ViewData["Title"] = "Administration";
}
@{
var data = ViewBag.Channels;
var msg = ViewBag.Msg;
}
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.datatables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<br />
<form asp-controller="Administration" asp-action="AdminMessageManagement">
<div class="row">
<div class="col">
<select name="getChannelValue">
<option value="">Select Channel</option>
@foreach (var item in data)
{
<option value="@item">@item</option>
}
</select>
<input type="text" name="getMessageKeyValue" placeholder="Message Key" />
<select name="getIsDelivered">
<option value="">Is Delivered ?</option>
<option value=true>True</option>
<option value=false>False</option>
</select>
<input type="date" id="start" name="getDateFrom" value="@null" />
<input type="submit" value="Filter" />
<input type="button" value="Reset" onclick="location.href='@Url.Action("AdminTest", "Administration")'" />
</div>
</div>
</form>
</div>
<br />
<table id="dataTable_id" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Source Channel</th>
<th>Message Key</th>
<th>IsDelivered ?</th>
<th>Target Channel</th>
<th>Send Date</th>
<th>Reception Date</th>
</tr>
</thead>
<tbody>
@foreach (var item in msg)
{
@foreach (var target in item.Targets)
{
<tr>
<td class="details-control"><i class="fa fa-plus" data-toggle="modal" data-target=".bootstrapmodal" id="iconAdd" style="font-size:22px"></i></td>
<td>@item.SourceChannel</td>
<td>@item.MessageKey</td>
<td>@target.IsDelivered</td>
<td>@target.Channel</td>
<td>@item.Date</td>
<td>@target.DateDelivered</td>
</tr>
}
}
</tbody>
</table>
@foreach (var item in msg)
{
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Message :</div>
<div class="modal-body">@item.Content</div>
</div>
</div>
</div>
}
@section Scripts{
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dataTable_id').DataTable({
"processing": true,
"serverside": true,
"filter": false,
"paging": true
});
});
</script>
}
弹出窗口在那里:
@foreach (var item in msg)
{
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Message :</div>
<div class="modal-body">@item.Content</div>
</div>
</div>
</div>
}
我想要这个按钮:
<td class="details-control"><i class="fa fa-plus" data-toggle="modal" data-target=".bootstrapmodal" id="iconAdd" style="font-size:22px"></i></td>
显示表中每一行的消息内容。 我检索得很好,除了弹出窗口中的数据外,数据中我需要的所有数据。 在弹出窗口中,这是显示的相同消息内容。
你在哪里让你的行用这个替换双 foreach:
@foreach (var item in msg)
{
<div class="modal fade bootstrapmodal-@item">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Message :</div>
<div class="modal-body">@item.Content</div>
</div>
</div>
</div>
@foreach (var target in item.Targets)
{
<tr>
<td class="details-control"><i class="fa fa-plus" data-toggle="modal" data-target=".bootstrapmodal-@item" id="iconAdd" style="font-size:22px"></i></td>
<td>@item.SourceChannel</td>
<td>@item.MessageKey</td>
<td>@target.IsDelivered</td>
<td>@target.Channel</td>
<td>@item.Date</td>
<td>@target.DateDelivered</td>
</tr>
}
}
并删除您制作模态的表格下方的 foreach,因为它现在包含在双 foreach 中。 这应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.