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 中。这应该可以。

【讨论】:

问题是我不能在 和 中使用 div,所以我无法执行您所做的操作,或者您可能还有其他选择 你可以,因为它不可见,但无论如何,你可以尝试用你的代码,只需在你的弹出窗口中替换: bootstrapmodal 用 bootstrapmodal-@item 和你的表 data-target= ".bootstrapmodal" 与 data-target=".bootstrapmodal-@item"。问题只是命名,你不断地制作同名的模态框,所以引导程序不知道要打开哪个。 这是个好主意,但是当我单击按钮时重命名,它不再起作用了。你认为我应该重命名 bootstrapmodal-@item.Content 吗? 是的,更改后,当我点击按钮时,弹出窗口不显示 你都改成 bootstrapmodal-@item.Content 了吗?

以上是关于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

ASP.NET MVC 在 jQuery 数据表中使用带有按钮 onclick 的模态弹出窗口

带AJAX和Jquery的asp.net MVC中的实时搜索数据