ASP.NET MVC 在 jQuery 数据表中使用带有按钮 onclick 的模态弹出窗口
Posted
技术标签:
【中文标题】ASP.NET MVC 在 jQuery 数据表中使用带有按钮 onclick 的模态弹出窗口【英文标题】:ASP.NET MVC Using Modal popup with button onclick inside a jQuery datatable 【发布时间】:2021-09-18 00:26:53 【问题描述】:目前我正在做一个页面,其中包含一个包含一些数据的表。但是,我想放置一个引导模式以在弹出窗口的主体内显示消息内容。但是我不知道如何使用该按钮进行处理,因为当我单击表格中的每个按钮时,它会向我显示相同的消息内容,并且不应该。每一行,我的意思是它们中的大多数不应该有相同的消息内容。
@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" 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>
显示表格中每一行的消息内容。 我检索得很好,除了弹出窗口中的数据之外,我需要的所有数据都在数据中。在弹出窗口中显示的是相同的消息内容。
【问题讨论】:
【参考方案1】:你在哪里让你的行用这个替换双 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 中。这应该可以。
【讨论】:
问题是我不能在以上是关于ASP.NET MVC 在 jQuery 数据表中使用带有按钮 onclick 的模态弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章
在 ASP.NET MVC 3 中,Jquery 令牌输入未填充数据库中的值
ASP.NET MVC 中的 jQuery 与 MicrosoftAjax
ASP.NET MVC使用jQuery实现Autocomplete
在asp.net mvc中删除数据成功后重新排序自动编号列JQuery Datatable