.net Core 如何将数据从列表的 table 传递到控制器？

Question

我在我的视图中有一个对象列表。在 table 中，在某些情况下，我创建行并添加一个按钮。当按下 modal-footer 按钮时，我想将该行的数据传递给我的控制器。我尝试了 ajax 请求和表格，但无法处理。到达我的控制器的始终是列表的第一个元素。

我的看法：

<table class="table border-bottom dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
            <thead>
                <tr><th rowspan="1">Saat</th><th rowspan="1">Durum</th></tr>
            </thead>
            @{int i = 0; }
            @foreach (var v in Model)
            {
                <tbody>
                    <tr>
                        @if (v.IsActive == 1)
                        {
                            <td>@v.Hour.ToString():@v.Minute.ToString().ElementAt(0)0</td>
                            <td><p class="blckpassive">Dolu</p></td>                           
                        }
                        else
                        {
                            <td>@v.Hour.ToString():@v.Minute.ToString().ElementAt(0)0</td>
                            <td><p class="blckactive">Boş</p></td>                                                                                  
                            <td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Randevu Al</button></td>
                            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Emin Misiniz?</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            Seçtiğiniz Randevuyu Almak İstiyor Musunuz?
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
                                            <a type="button" href="/Appointment/AddAppointment?hour=@v.Hour" class="btn btn-primary">Evet</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        }
                    </tr>
                </tbody>
                i++; 
                
            }

        </table>

控制器：

public IActionResult AddAppointment(int hour)
        {
            return null;
        }

列表中的对象具有小时和分钟变量，它们是 int 并排序为“9:00,9:30,10:00,10:30...16:00”。

Answer 1

What is coming to my controller is always the first element of list.

你把弹出模式对话框的代码放在一个foreach循环中，如果你查看html源代码，你会发现多个按钮具有相同的值#exampleModal of data-target 属性，以及具有相同值 exampleModal 的 id 属性的目标模态，这会导致上述问题。

要解决这个问题并使模态弹窗正常工作，您可以修改代码如下，使按钮触发器的data-target属性和模态的id属性唯一在 HTML 文档中。

<td><button type="button" class="btn btn-info" data-toggle="modal" data-target=@("#exampleModal"+i)>Randevu Al</button></td>
<div class="modal fade" id=@("exampleModal"+i) tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

测试结果

.net Core 如何将数据从列表的 table 传递到控制器？

.netCore How to pass data to controller from table of list?

html

c#

asp.net-core-mvc

asp.net-core